水平居中的元素截图后向左跑偏
明明是水平居中的代码，截图出来的会偏左，结构是左图片右文字，有时候是图片自己跑到最左边，有时候是整体偏左一点点
这个问题也不是经常遇到，场景是父div元素text-align=center;内部两个子元素设为display:inline-block的模式。然后画图就会出现左边的div偏左靠或直接在左边的情况。
问题未解决，出现时也没研究因为啥，等有时间的时候就不出现了。。。
靠背景图露脸的dom们会有底线
截图时，如果有一个dom元素是用背景图填充的，里边没有任何结构，那么截图出来的底部会有一条和背景图底部一致的一条线
有时候靠拉伸dom元素的高度解决了，有时候又不行。
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:;
折腾了半天。。。
同事说如果base64码的长度有个限制，忘了超过多少就不行了，后来我尝试把放大四倍改成放大两倍，问题竟然解决了！！
不要笑话我放大了四倍，为了清晰哈哈哈。但是改成两倍后和四倍比也没差。反倒是挖了个坑自己填了半天！
不可见的元素截图后是空白
没法截图看不见的，比如opacity为0的东西，或者visibility为hidden的，更别说display：none了。都不行，
截出来的一样是白色的，可想而知，毕竟没截上东西当然就是白色了。
解决方法是让canvas部分隐藏到后边。最终选择方案,层级设为-1，上一层的把他盖住。
前提是上一层要又一个可以设置的背景色，能把他盖住不被世人看到
html2canvas结合微信里的长按存图功能
先用html2canvas拿到一个html转为canvas的base64码，
再在页面建立一个img元素，src=base64码，插入dom中，盖在所有元素的最上方（或者需要用户长按保存的地方），opacity设置为0。
然后用户就长按保存，存下来的就是事先准备好的覆盖在那里的那个不可见得透明图。
事实证明，图片透明不可见覆盖在页面上边，微信里是可以存图的。
而很多市面上的h5，结果页和最后存下来的图不一样的，估计都是这么搞得，毕竟看不见代码
html2canvas+jsbridge同时存两张图
html2canvas和jsbridge的存图功能协作时，会触发同时存两张图的现象。
第一次存图很完美，如果不关掉页面第二次存图，就会存两张，以后也会存两张。只有第一次使用存图是好的。
就是jsbridge调了两次，第二次自动调起的原因目前猜测是html2canvas引起的，
因为一层层定位，只有在html2canvas返回base64码后会有问题。具体原因暂没有找到。
最后解决方法是：配合sessionStore，第一次截完图后，将图片地址存入sessionstore，
之后判断，sessionstore里有base64码就不用html2canvas生成码了，直接取数据存图，
html2canvas触发时重新加载页面的所有静态资源（除js）
css和img图像，这一点是在和Wdatapicker组合使用时发现的问题。
本来没什么，爱加载几次加载几次，但是datapicker的样式是写在iframe里的，重新加载dom还把人家的样式给丢了。这事儿就大了
大归大，问题根本原因没解决，还是治标不治本的在每次触发html2canvas截图保存pdf的时候，重新给datapicker绘制样式，就是这么任性！
html2canvas 截图跨域
https://blog.csdn.net/yaosir1993/article/details/76474080
以下截取部分作者思想，主要是用于解决了本次问题的地方：
useCORS:true 这个参数很重要，没有配置的话，依旧是不能解决问题的；
根据现有的解决方案大致有两种：
(1).在跨域的服务器上设置header设置为允许跨域请求。 在服务器上设置header设置允许跨域请求（采用nginx做静态资源映射）
(2).借助代理脚本获得外域图片的 base64 编码后的字符串
关于跨域和清晰度解决方案的讲解地址：https://lengxing.github.io/
设置header，实现跨域访问http://blog.csdn.net/enter89/article/details/51205752
领导建议：
域名反向代理，
图片允许跨域使用：Access-Control-Allow-Origin： *；
html2canvas+qrcode 截二维码被白底遮挡
html2canvas执行截图-因为页面中有一处是qrcode执行的地址转二维码，每次截图后二维码都截不下来，那一块就是一个白块
后来把二维码img的外部div结构背景色设置半透明，二维码就截出来了，原来是div的背景色盖住了img
原理还是搞不明白，明明层级都设置了还不起作用，竟然被自己的爹给盖住也是醉了。
二维码处之所以为白色是因为外部结构的白色背景给覆盖了,最后是盛放二维码img的外部div结构不设置背景色就解决了
html2canvas截图时，背景音乐在IOS11下会重复播放
解决方法见博文：https://blog.csdn.net/lerayZhang/article/details/79207468
1 import html2canvas from 'html2canvas/dist/html2canvas.min'; 2 export { html2canvas };
1 /* 2 * @Author: guojufeng@ 3 * @Date: 2017-12-25 15:18:12 4 * html2image模块 5 * @param {object=} parameter 参数配置 6 * @param {string} parameter.targetEleId: 目标元素id--要截屏的区域 7 * @param {string} parameter.imgType: 要保留下来的图片格式：png|jpg|bmp|gif 8 * @param {Boolean} toDown: 是否执行下载功能，不执行则返回图片base64地址 9 */ 10 import { html2canvas } from './html2canvas'; 11 //解决ios11下，重复加载背景音乐的bug 12 const iosMusic = (idName)=>{ 13 let agent = navigator.userAgent.toLowerCase(),//判断手机系统 14 version; 15 // console.log(agent); 16 if(agent.indexOf("like mac os x") > 0){ 17 //ios 18 let regStr_saf = /os [\d._]*/gi, 19 verinfo = agent.match(regStr_saf) ; 20 version = (verinfo+"").replace(/[^0-9|_.]/ig,"").replace(/_/ig,".");//获取具体的系统版本号 21 let typeNum = version.split(".")[0];//获取系统版本号的第一位数字 22 // console.log(version); 23 // console.log(typeNum); 24 if(typeNum >= 11){ 25 $(idName).removeAttr("autoplay"); 26 } 27 } 28 } 29 export let html2img = (parameter,toDown = true)=> { 30 const promise = new Promise((resolve,reject)=>{ 31 if(parameter.imgType == 'png' || parameter.imgType == 'jpg' || parameter.imgType == 'bmp' || parameter.imgType == 'gif'){ 32 let type = parameter.imgType; 33 /** 34 * 获取mimeType 35 * @param {String} type the old mime-type 36 * @return the new mime-type 37 */ 38 const _fixType = function(type) { 39 type = type.toLowerCase().replace(/jpg/i, 'jpeg'); 40 let r = type.match(/png|jpeg|bmp|gif/)[0]; 41 return 'image/' + r; 42 }; 43 /*图片跨域及截图模糊处理*/ 44 let shareContent = parameter.targetEleId,//需要截图的包裹的（原生的）DOM 对象 45 width = shareContent.clientWidth,//shareContent.offsetWidth; //获取dom 宽度 46 height = shareContent.clientHeight,//shareContent.offsetHeight; //获取dom 高度 47 canvas = document.createElement("canvas"), //创建一个canvas节点 48 scale = 2; //定义任意放大倍数 支持小数 49 canvas.width = width * scale; //定义canvas 宽度 * 缩放 50 canvas.height = height * scale; //定义canvas高度 *缩放 51 canvas.style.width = shareContent.clientWidth * scale + "px"; 52 canvas.style.height = shareContent.clientHeight * scale + "px"; 53 canvas.getContext("2d").scale(scale, scale); //获取context,设置scale 54 let opts = { 55 scale: scale, // 添加的scale 参数 56 canvas: canvas, //自定义 canvas 57 logging: false, //日志开关，便于查看html2canvas的内部执行流程 58 width: width, //dom 原始宽度 59 height: height, 60 useCORS: true // 【重要】开启跨域配置 61 }; 62 /* html2canvas截图时，背景音乐重复播放问题。 */ 63 iosMusic(parameter.musicId); 64 /* html2canvas 截图 */ 65 html2canvas(shareContent,opts).then(function(canvas) { 66 let imgData = canvas.toDataURL('image/png'); 67 // console.log(canvas.toDataURL('image/png').substring(0,20)); 68 // console.log(canvas.toDataURL('image/png').length); 69 // let save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a'); 70 // save_link.href = imgData.replace(_fixType(type),'image/octet-stream'); 71 if(toDown){ 72 let link_title = parameter.titleStr ? parameter.titleStr + '_' : 'easypass_'; 73 save_link.download = link_title + (new Date()).getTime() + '.' + type; 74 let event = document.createEvent('MouseEvents'); 75 event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); 76 save_link.dispatchEvent(event); 77 }else{ 78 resolve(imgData); 79 } 80 }); 81 }else{ 82 reject(new Error('parameter.imgType 类型错误，应该是字符串，且只有四种类型值。')); 83 } 84 }); 85 return promise; 86 }
具体配置根据自己需要进行调整。
最后调用：
1 html2img({ 2 targetEleId: oCanvas, 3 imgType: 'png', 4 titleStr: '测测你是哪种汽车人', 5 musicId: '#musicAudio' 6 },false) 7 .then((imgUrl)=>{ 8 let oImg = document.createElement('img'); 9 oImg.id = 'oImg'; 10 oImg.className = 'o-img'; 11 oImg.src= imgUrl; 12 document.body.appendChild(oImg); 13 });
2018-06-25 17:54:43 (持续更新中...)
