共计 1352 个字符，预计需要花费 4 分钟才能阅读完成。
canvas 转为图片，并下载
来源
https://github.com/clm960227/…
描述
canvas 转为图片下载，大部分人会用到 canvas2image.js 插件来实现，但是下载的图片并没有加后缀。插件源码的原理其实很简单，我们可以在此基础上做一些工作，来达到我们想要的效果
canvas2image.js 原理
/**
* saveAsImage
* @param canvasElement
* @param {String} image type
* @param {Number} [optional] png width
* @param {Number} [optional] png height
*/
var saveAsImage = function (canvas, width, height, type) {
if ($support.canvas && $support.dataURL) {
if (typeof canvas == “string”) {canvas = document.getElementById(canvas); }
if (type == undefined) {type = ‘png’;}
type = fixType(type);
if (/bmp/.test(type)) {
var data = getImageData(scaleCanvas(canvas, width, height));
var strData = genBitmapImage(data);
saveFile(makeURI(strData, downloadMime));
} else {
var strData = getDataURL(canvas, type, width, height);
saveFile(strData.replace(type, downloadMime));
}
}
};
里面做了什么呢？其实 getDataURL 里就是设置了 canvas 的 width 和 height 然后通过 toDataURL 将 canvas 转为 base64。strData.replace(type, downloadMime); 里将 mime-type 设置为 image/octet-stream 来强制浏览器下载。saveFile 方法做的就是 window.location.href 来下载此图片
优化
直接使用插件下载的图片并没有加后缀，我们可以自己来实现插件的效果
var linkDom = document.createElement(‘a’)
linkDom.href = canvas.toDataURL()
linkDom.download = Date.parse(new Date()) + ‘.’ + ‘jpg’
var event = document.createEvent(‘MouseEvents’)
event.initMouseEvent(‘click’, true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
linkDom.dispatchEvent(event)
短短几行代码其实已经做了插件该做的事情，并且图片也有加后缀。其实代码很简单，创建一个 a 标签，设置 href 为 canvas 的 base64 编码,download 设置下载的图片的名字和后缀，接着初始化一个事件，触发 a 标签
