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[0].match(/:(.*?);/)[1],bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);while(n--){u8arr[n] = bstr.charCodeAt(n);}eturn new Blob([u8arr], {type:mime});}

canvas保存到本地图片三种方法相关推荐

vue 展示本地图片三种方法
第一种:直接写两个都可以如果@配置了的话 <img src="../assets/img/mapchange/map1.png" alt=""> ...
7.1 安装软件包的三种方法 7.2 rpm包介绍 7.3 rpm工具用法 7.4 yum工具用法 7.5 yum搭建本地仓库...
7.1 安装软件包的三种方法 7.2 rpm包介绍 7.3 rpm工具用法 7.4 yum工具用法 7.5 yum搭建本地仓库三种方法 rpm工具----->类型windows下的exe程序 ...
远程图片保存到服务器 php,保存远程图片到本地服务器几种方法[php,asp]网
保存远程图片到本地服务器几种方法[,] function get_file($url,$folder){ set_time_limit (24 * 60 * 60); $destination_fol ...
html页面转换成图片的三种方法——canvas、dom-to-image、html2canvas
html页面转换成图片的三种方法--canvas.dom-to-image.html2canvas canvas绘制网络图片报错(跨域) 使用canvas将html页面转成图片 dom-to-imag ...
图片怎么压缩图片大小_图片的体积怎么压缩？这三种方法你会吗？
图片是我们在工作中经常要使用到的东西,在平时使用图片的时候相信大家都遇到过由于系统限制图片大小导致自己的图片无法上传的情况,这时候就需要对图片进行压缩了,把图片的体积降低到符合系统要求的大小,然后再进 ...
图片的体积怎么压缩？这三种方法你会吗？
图片是我们在工作中经常要使用到的东西,在平时使用图片的时候相信大家都遇到过由于系统限制图片大小导致自己的图片无法上传的情况,这时候就需要对图片进行压缩了,把图片的体积降低到符合系统要求的大小,然后再进 ...
PDF文件如何转JPG图片？三种方法教你快速转换
PDF文件是我们经常用来处理工作的一种文件形式,它的体积很小,不仅占用储存空间很少,而且传输起来也非常方便,但是有时候我们也会根据工作需求来将PDF文件转换成其他类型的文件,为了浏览起来更方便,我们也 ...
测试Python下载图片的三种方法
简介: 通过Python软件包对网络URL图片链接进行下载,可以加快后期处理.本文测试了urllib, request两个软件包对图片进行下载效果.如果图片原网页有了防止下载机制,是无法下载图片. ...
canvas 判断哪个元素被点击_监听 Canvas 内部元素点击事件的三种方法
canvas内部元素不能像DOM元素一样方便的添加交互事件监听,因为canvas内不存在"元素"这个概念,他们仅仅是canvas绘制出来的图形.这对于交互开发来说是一个必经障碍,想 ...

canvas保存到本地图片三种方法