Simone
canvas保存到本地图片三种方法
canvas保存本地图片
第一种方法（修改图片的媒体类型，window.open直接下载）
第二种方法（创建a标签，通过自己触发点击来下载）
第三种方法（将图片数据转换成Blob数据，可以保存大图片）
canvas保存本地图片
在公司做一个canvas的项目，遇到个需求 ：将canvas保存为图片，图片尺寸为12000*4000，一共用了好几种方法，最后才成功，特此记录一下。
第一种方法（修改图片的媒体类型，window.open直接下载）
我看了一些教程，这种方法直接修改image.src最前面的媒体类型，将data:image改为data:application/octet-stream，然后调用window.open(url)这个函数，浏览器直接将会下载这个保存的图片。不过图片大小一旦超过限制，就会下载出现网络错误
// 第一种方法 采用data:application/octet-stream ,让浏览器识别为下载，有大小限制，12000*4000无法保存let image = new Image();image.src = canvas.toDataURL({format: 'image/png', quality:1, width:14000, height:4000});var url = image.src.replace(/^data:image\/[^;]/, 'data:application/octet-stream');return image;window.open(url);
第二种方法（创建a标签，通过自己触发点击来下载）
// 第二种 方法一样，无法保存较大的图片，会出现错误var imgURL = canvas.toDataURL({format: "image/png", quality:1, width:12000, height:4000});var dlLink = document.createElement('a');dlLink.download = "fileName";dlLink.href = imgURL;dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':');document.body.appendChild(dlLink);dlLink.click();document.body.removeChild(dlLink);
第三种方法（将图片数据转换成Blob数据，可以保存大图片）
这个方法的核心是将图片的imgData转换成Blob数据，然后通过a标签触发保存，可以存储较大的图片，刚好满足我的需求。
var link = document.createElement("a");var imgData =canvas.toDataURL({format: 'png', quality:1, width:20000, height:4000});var strDataURI = imgData.substr(22, imgData.length);var blob = dataURLtoBlob(imgData);var objurl = URL.createObjectURL(blob);link.download = "grid1.png";link.href = objurl;link.click();function dataURLtoBlob(dataurl: string) {var arr = dataurl.split(','), mime = arr.match(/:(.*?);/),bstr = atob(arr), n = bstr.length, u8arr = new Uint8Array(n);while(n--){u8arr[n] = bstr.charCodeAt(n);}eturn new Blob([u8arr], {type:mime});}
相关文章：
vue 引入项目图片的几种方式
MarkDown添加图片的三种方式
Java代码读取图片的两种方式
ecilpse写html图片,eclipse怎么导入图片
移动端图片上传的两种方式
html 如何给图片打标签,图文详解HTML页面中添加图片的三种方法
python OpenCV 图片相似度 5种算法
word涂改涂掉图片_怎么在word中修改图片的两种方法
图种制作方法 vbs脚本
【安全技术揭秘系列】探索图片隐写的奥秘
图种
Qt线程池
线程池专栏
SpringBoot线程池
Java Review - 创建线程和线程池时建议指定与业务相关的名称
java线程池存在时间_Java线程池基础
tomcat线程池
Netty 线程池
线程池-ThreadPoolExecutor
Executors类创建四种常见线程池
