diff --git a/canvas2image.js b/canvas2image.js index 44b10c7..dc83abd 100644 --- a/canvas2image.js +++ b/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, diff --git a/index.html b/index.html index c932490..a677c28 100644 --- a/index.html +++ b/index.html @@ -24,7 +24,8 @@
width :
- height : + height :
+ fileName:

@@ -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, diff --git a/readme.md b/readme.md index 3656940..32d8dba 100644 --- a/readme.md +++ b/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)