水平居中的元素截图后向左跑偏
明明是水平居中的代码，截图出来的会偏左，结构是左图片右文字，有时候是图片自己跑到最左边，有时候是整体偏左一点点
? 这个问题也不是经常遇到，场景是父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下，重复加载背景音乐的bug12 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 ??????* 获取mimeType35 ??????* @param ?{String} type the old mime-type36 ??????* @return the new mime-type37 ??????*/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, //自定义 canvas57 ??????????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 (持续更新中...)
Html2canvas - 项目中遇到的那些坑点汇总(更新中...)
原文地址：https://www.cnblogs.com/padding1015/p/9225517.html