web前端生成图片之探索踩坑

前段时间，产品和运营整了个非常变态的需求，要求将一个活动页面输出为图片，然后用户进行分享

开始以为是用户自己手动截图分享，没想到后来不是，细思极恐，感叹需求之变态。

从网上找了N个方案，最后确定使用 html2canvas 基本可实现（http://html2canvas.hertzen.com/），下面开始踩坑。

html2canvas 的原理在于利用封装的js将html的显示输出转化为canvas，根据页面的复杂度，可能会遇到一些问题。

截图模糊

解决原理就是讲canvas画布的width和height放大两倍

后来了解canvas的时候，其写法不同于css的宽高设置，因为css里的只是展示画布显示的大小，不像canvas是真正的图画分辨率的大小

 1 /*图片跨域及截图模糊处理*/
 2 let shareContent = domObj,//需要截图的包裹的（原生的）DOM 对象
 3 width = shareContent.clientWidth,//shareContent.offsetWidth; //获取dom 宽度
 4 height = shareContent.clientHeight,//shareContent.offsetHeight; //获取dom 高度
 5 canvas = document.createElement("canvas"), //创建一个canvas节点
 6 scale = 2; //定义任意放大倍数 支持小数
 7 canvas.width = width * scale; //定义canvas 宽度 * 缩放
 8 canvas.height = height * scale; //定义canvas高度 *缩放
 9 canvas.style.width = shareContent.clientWidth * scale + "px";
10 canvas.style.height = shareContent.clientHeight * scale + "px";
11 canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
12 let opts = {
13     scale: scale, // 添加的scale 参数
14     canvas: canvas, //自定义 canvas
15     logging: false, //日志开关，便于查看html2canvas的内部执行流程
16     width: width, //dom 原始宽度
17     height: height,
18     useCORS: true // 【重要】开启跨域配置
19 };
20 html2canvas(shareContent,opts).then()

the operation is insecure

canvas.toDataURL 报错 the operation is insecure

canvas.toDataURL(type, encoderOptions);语法

配置如：canvas.toDataURL("image/png", 0.7);

参数type指定图片类型，如果指定的类型不被支持则以默认值image/png替代；

encoderOptions（第二个参数）可以为image/jpeg或image/webp类型的图片设置图片质量，取值0-1，超出则以默认值0.92替代。

html2canvas在微信中base64码为空

在微信中或者可以说在移动端浏览器里，canvas.toDataURL不成功。canvas.toDataURL(type) 得到空的 data:;

引发这个问题的操作可能有2中，1、canvas被污染，2、生成图片过大，base64码有长度限制

不可见的元素截图后是空白

没法截图看不见的，比如opacity为0的东西，或者visibility为hidden的，更别说display：none了。

解决方法是让canvas部分隐藏到后边。最终选择方案,层级设为-1，上一层的把他盖住。前提是上一层要又一个可以设置的背景色，能把他盖住不被世人看到

html2canvas结合微信里的长按存图功能
先用html2canvas拿到一个html转为canvas的base64码，

再在页面建立一个img元素，src=base64码，插入dom中，盖在所有元素的最上方（或者需要用户长按保存的地方），opacity设置为0。

然后用户就长按保存，存下来的就是事先准备好的覆盖在那里的那个不可见得透明图。

事实证明，图片透明不可见覆盖在页面上边，微信里是可以存图的。

html2canvas 截图跨域

图片跨域时报错现象

这个时候你要去看图片的header头有没有这个：

看图片本身是否允许跨域访问：

上边这个是一个允许的图片。下边这个不允许，就截取不到。

主要是用于解决了本次问题的地方：useCORS:true 这个参数很重要，没有配置的话，依旧是不能解决问题的；

根据现有的解决方案大致有两种：
　　(1).在跨域的服务器上设置header设置为允许跨域请求。在服务器上设置header设置允许跨域请求
　　(2).借助代理脚本获得外域图片的 base64 编码后的字符串，本文未采用。

作者：旧旧的 <[email protected]> 解决问题的方式，就是解决它一次

web前端生成图片之探索踩坑

猜你喜欢