By

Contents

决定开始写一些东西记录一下平时做了什么，毕竟博客闲置了很久，如果能坚持在简书上写下去再把博客恢复起来吧=-=。
首先我的需求是把一个带有动态变化img的弹窗以图片形式保存下来，实时监控到平板界面。因为这个图片是相差几秒刷新一次，需要每次都要获取到这个图片是什么，所以把html转canvas这个操作放在了图片请求中。当每次从服务器请求到新图片的时候，也随之把相应的图片画下来。而本地保存就是用canvas的toDataURL()，这里我是用的是一个插件Canvas2Image.js。只要调用它封装好的方法就可以把图片保存下来。下面说下在本次构建中踩的坑。
一、截下来的图片只有一半或者直接空白
前面也说了，弹窗中图片是动态变化了，由于canvas对于图片资源的同源限制，如果画布中包含跨域的图片资源则会污染画布，造成生成图片样式混乱或者html2canvas方法不执行等问题。针对这个问题，做了如下设置
1.html2canvas的配置项中配置 allowTaint:true 或 useCORS:true(二者不可共同使用)：

1
2
3
var opts = {useCORS: true};
 
html2canvas(element, opts);

2.img标签增加 crossOrigin=‘anonymous‘ ；
3.图片服务器配置Access-Control-Allow-Origin 或使用代理；
二、生成的图片失真
大部分找到的结果都是使用设备像素比去操作，我是按照这个大神文中的方法来一葫芦画瓢的。

Contents