add file ext name setting

canvas2image.js

@@ -43,8 +43,12 @@ var Canvas2Image = function () {
 		return canvas.toDataURL(type);
 	}
 
-	function saveFile (strData) {
-		document.location.href = strData;
+	function saveFile (strData,filename) {
+		var save_link = document.createElement('a');
+		save_link.href = strData;
+		save_link.download = filename;
+		var event = new MouseEvent('click',{"bubbles":false, "cancelable":false});
+		save_link.dispatchEvent(event);
 	}
 
 	function genImage(strData) {
@@ -190,25 +194,31 @@ var Canvas2Image = function () {
 		return strEncoded;
 	};
 
+
 	/**
-	 * saveAsImage
-	 * @param canvasElement
-	 * @param {String} image type
-	 * @param {Number} [optional] png width
-	 * @param {Number} [optional] png height
+	 * [saveAsImage]
+	 * @param  {[obj]} canvas   [canvasElement]
+	 * @param  {[Number]} width    [optional] png width
+	 * @param  {[Number]} height   [optional] png height
+	 * @param  {[String]} type     [image type]
+	 * @param  {[String]} filename [image filename]
+	 * @return {[type]}          [description]
 	 */
-	var saveAsImage = function (canvas, width, height, type) {
+	var saveAsImage = function (canvas, width, height, type,filename) {
 		if ($support.canvas && $support.dataURL) {
 			if (typeof canvas == "string") { canvas = document.getElementById(canvas); }
 			if (type == undefined) { type = 'png'; }
+			filename = filename == undefined||filename.length === 0 ?Date.now()+'.'+type: filename+'.'+type
 			type = fixType(type);
+
 			if (/bmp/.test(type)) {
 				var data = getImageData(scaleCanvas(canvas, width, height));
 				var strData = genBitmapImage(data);
-				saveFile(makeURI(strData, downloadMime));
+
+				saveFile(makeURI(strData, downloadMime),filename);
 			} else {
 				var strData = getDataURL(canvas, type, width, height);
-				saveFile(strData.replace(type, downloadMime));
+				saveFile(strData.replace(type, downloadMime),filename);
 			}
 		}
 	};
@@ -231,20 +241,19 @@ var Canvas2Image = function () {
 	};
 
 
-
 	return {
 		saveAsImage: saveAsImage,
-		saveAsPNG: function (canvas, width, height) {
-			return saveAsImage(canvas, width, height, 'png');
+		saveAsPNG: function (canvas, width, height, fileName) {
+			return saveAsImage(canvas, width, height, 'png',fileName);
 		},
-		saveAsJPEG: function (canvas, width, height) {
-			return saveAsImage(canvas, width, height, 'jpeg');
+		saveAsJPEG: function (canvas, width, height, fileName) {
+			return saveAsImage(canvas, width, height, 'jpeg',fileName);
 		},
-		saveAsGIF: function (canvas, width, height) {
-			return saveAsImage(canvas, width, height, 'gif');
+		saveAsGIF: function (canvas, width, height, fileName) {
+			return saveAsImage(canvas, width, height, 'gif',fileName);
 		},
-		saveAsBMP: function (canvas, width, height) {
-			return saveAsImage(canvas, width, height, 'bmp');
+		saveAsBMP: function (canvas, width, height, fileName) {
+			return saveAsImage(canvas, width, height, 'bmp',fileName);
 		},
 
 		convertToImage: convertToImage,

index.html

@@ -24,7 +24,8 @@
                 <option value="bmp">bmp</option>
             </select><br/>
             width : <input type="number" value="300" id="imgW" /><br/>
-            height : <input type="number" value="200" id="imgH" />
+            height : <input type="number" value="200" id="imgH" /><br>
+            fileName: <input type="text" placeholder="optional" id="imgFileName">
         </p>
 
     </div>
@@ -46,6 +47,7 @@
         $imgs = document.getElementById('imgs');
         $imgW = document.getElementById('imgW');
         $imgH = document.getElementById('imgH');
+        $imgFileName =document.getElementById('imgFileName');
         bind();
         draw();
     }
@@ -76,7 +78,8 @@
             var type = $sel.value,
                 w = $imgW.value,
                 h = $imgH.value;
-            Canvas2Image.saveAsImage(canvas, w, h, type);
+                f = $imgFileName.value;
+            Canvas2Image.saveAsImage(canvas, w, h, type,f);
         }
         $convert.onclick = function (e) {
             var type = $sel.value,

readme.md

@@ -1,17 +1,21 @@
+
 # Canvas2image #
 a tool of saving or converting canvas to images
 
+do not support IOS
+
 ## Demo ##
-[canvas2image](http://hongru.github.com/proj/canvas2image/index.html)
+[canvas2image](https://superal.github.io/canvas2image/)
 
 ## Code ##
-you can just use it like this
+you can just use it like this  
+filename is optional, default is Date.now()
 
-    Canvas2Image.saveAsImage(canvasObj, width, height, type)
-    Canvas2Image.saveAsPNG(canvasObj, width, height)
-    Canvas2Image.saveAsJPEG(canvasObj, width, height)
-    Canvas2Image.saveAsGIF(canvasObj, width, height)
-    Canvas2Image.saveAsBMP(canvasObj, width, height)
+    Canvas2Image.saveAsImage(canvasObj, width, height, type, fileName)
+    Canvas2Image.saveAsPNG(canvasObj, width, height, fileName)
+    Canvas2Image.saveAsJPEG(canvasObj, width, height, fileName)
+    Canvas2Image.saveAsGIF(canvasObj, width, height, fileName)
+    Canvas2Image.saveAsBMP(canvasObj, width, height, fileName)
 
     Canvas2Image.convertToImage(canvasObj, width, height, type)
     Canvas2Image.convertToPNG(canvasObj, width, height)