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

html5

浏览数:1,034

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

原文地址:https://segmentfault.com/a/1190000017757887