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