使用Canvas绘图，将图片保存到本地方法

整理的代码1（推荐）：


//下载图片事件 function downloadClick() {     //判断是否是IE     var fileName = 'testImg.jpg';     if (window.navigator.msSaveBlob) {         //支持IE10，IE11 ,Edage         var blob = canvas.msToBlob();         window.navigator.msSaveBlob(blob, fileName);     } else {         //下载图片,Goggle浏览器，火狐浏览器         var dataImg = new Image()         dataImg.src = canvas.toDataURL('image/png')         document.querySelector('#view').appendChild(dataImg)         var alink = document.createElement("a");         alink.href = dataImg.src;         alink.download = fileName;         alink.click();     } }


整理代码2：


//下载图片事件,支持Edge,谷歌浏览器,火狐浏览器 //不支持IE11，IE10 function downloadClick() {     var fileName = 'testImg.jpg';     var dataImg = new Image();     var imgData = canvas.toDataURL('image/png');     dataImg.src = imgData;     var blob = dataURLtoBlob(imgData);     var objurl = URL.createObjectURL(blob);     document.querySelector('#view').appendChild(dataImg)     var alink = document.createElement("a");     alink.href = objurl;     alink.download = fileName;     alink.click();      function dataURLtoBlob(dataurl) {         var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],             bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);         while (n--) {             u8arr[n] = bstr.charCodeAt(n);         }         return new Blob([u8arr], { type: mime });     } }



一、使用HTML5 a标签的download属性，将图片保存到本地，不需要链接服务器

关于download属性：​​HTML5 <a>标签download 属性​​

特别说明：这种方式只支持Google和FF，IE浏览器还不支持。(注：目前测试手机版浏览器也不支持)


<canvas id="canvas1"></canvas>     <br /><br />     <input type="button" value="保存png图片" id="btn1" />     <input type="button" value="保存jpg图片" id="btn2" />


示例1：简单模式：


//下载图片,Goggle浏览器，火狐浏览器 const dataImg = new Image() dataImg.src = canvas.toDataURL('image/png') document.querySelector('#view').appendChild(dataImg) const alink = document.createElement("a"); alink.href = dataImg.src; alink.download = "testImg.jpg"; alink.click();



示例2：JS代码：


//绘制图片 var canvas = document.getElementById('canvas1'); var ctx = canvas.getContext('2d'); ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = "red"; ctx.font = 'italic bold 30px Helvetica '; ctx.fillText('楷体', 50, 50); //绑定下载事件 var btn = document.getElementById('btn1'); btn.onclick = function () {     var type = 'png';     download(type); } document.getElementById('btn2').onclick = function () {     var type = 'jpg';     download(type); } //图片下载操作,指定图片类型 function download(type) {     //设置保存图片的类型     var imgdata = canvas.toDataURL(type);     //将mime-type改为image/octet-stream,强制让浏览器下载     var fixtype = function (type) {         type = type.toLocaleLowerCase().replace(/jpg/i, 'jpeg');         var r = type.match(/png|jpeg|bmp|gif/)[0];         return 'image/' + r;     }     imgdata = imgdata.replace(fixtype(type), 'image/octet-stream')     //将图片保存到本地     var saveFile = function (data, filename) {         var link = document.createElement('a');         link.href = data;         link.download = filename;         var event = document.createEvent('MouseEvents');         event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);         link.dispatchEvent(event);     }     var filename = new Date().toLocaleDateString() + '.' + type;     saveFile(imgdata, filename); }



Canvas保存图片保存到本地_火狐浏览器


二、IE 浏览器 下载图片到本地

该​​Navigator.msSaveBlob()​​方法将“ ​​​File​​​​或” 保存​​​Blob​​​​到磁盘。该方法的行为与​​​Navigator.msSaveOrOpenBlob()​​​禁用文件打开选项的行为相同。

非标准

此功能是非标准的，不在标准范围内。请勿在面向Web的生产站点上使用它：它不适用于每个用户。实现之间也可能存在很大的不兼容性，并且将来的行为可能会更改。


navigator.msSaveBlob(blob, defaultName);


参量

​​blob​​​ 要保存的Blob。 ​​defaultName​​

保存文件时使用的文件名。


function download(content, filename) {     // 字符内容转变成blob地址     var blob = new Blob([content]);     if('msSaveOrOpenBlob' in navigator){         window.navigator.msSaveOrOpenBlob(blob, filename);         return;     }     var eleLink = document.createElement('a');     eleLink.download = filename;     $(eleLink).css('display', 'none');     eleLink.href = URL.createObjectURL(blob);     document.body.appendChild(eleLink);     eleLink.click();     document.body.removeChild(eleLink); };




三、将生成图片数据返回服务器，通过http协议通知浏览器下载

这种方式需要服务器处理，暂时没提供代码示例。

手机生成图片长按可以下载到本地。

目前针对手机浏览器使用的方案。