html2canvas随笔

html2canvas使用时遇到的一些问题（html2canvas": "^1.0.0-rc.1"）

生成的图片模糊，参考网上的处理图片模糊方法(scale放大2倍)结果发现生成的图片只显示了部分dom；

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

参考 https://github.com/niklasvh/html2canvas/issues/2227#issuecomment-627293784