博客

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});
  	}