html2canvas保存图片时，显示网络错误

电玩女神 2021-11-22 02:42 544阅读 0赞

报错情况，类似下图的情况（图片是其它博客找的）：  
![在这里插入图片描述][20190727132027678.png]  
需求是为报表生成图片，也真是html转canvas，再用canvas输出为base64图片，base64通过url的data写法的方式实现下载。  
出现这个原因是生成的图片太大（我报错的那个图片1.8m），接着生成的base64太长，`超出了浏览器对于url的限制`。  
具体看这个博客:[URL传值问题，不同浏览器对URL的长度要求][URL_URL]

解决方法是还一种方式来下载图片。看了下canvas有几个方法，转url的是toDataURL，而toBlob就是解决方案。

blob的文档可以参考一下这里:[细说Web API中的Blob][Web API_Blob]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODE5NzMz_size_16_color_FFFFFF_t_70]

之前的代码是这样的：

let canvas = document.querySelector('.canvas');
    this.imgmap = canvas.toDataURL('image/png',1)
    const a = document.createElement('a')
    a.href = this.imgmap
    a.setAttribute('download', `${this.shopName}报表`)
    a.click()

更改blob方式：

let canvas = document.querySelector('.canvas');
    const fileName = `${this.shopName}报表`;
    canvas.toBlob(function (blob) {
    	const eleLink = document.createElement('a');
    	eleLink.download = fileName;
    	eleLink.style.display = 'none';
    	// 字符内容转变成blob地址
    	eleLink.href = URL.createObjectURL(blob);
    	// 触发点击
    	document.body.appendChild(eleLink);
    	eleLink.click();
    	// 然后移除
    	document.body.removeChild(eleLink);
    },'image/png',1);

更改方法后就不会受到浏览器url长度影响了

更改前：  
![在这里插入图片描述][20190819085259191.png]  
更改后：  
![在这里插入图片描述][20190819085311192.png]

[20190727132027678.png]: /images/20211122/6b43c54ede63435baa878905f76c4f43.png
[URL_URL]: https://blog.csdn.net/jierry_wang/article/details/6796654
[Web API_Blob]: https://www.jianshu.com/p/4d014a45aaf7
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODE5NzMz_size_16_color_FFFFFF_t_70]: /images/20211122/3d8b68422c8d481487a156f3910b7595.png
[20190819085259191.png]: /images/20211122/473095336bcb42a9b6ed7c43394fa23f.png
[20190819085311192.png]: /images/20211122/595cee2bca4f4a96a392b488f818d88e.png