canvas转化为图片，并且强制浏览器下载

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标签