背景最近在做的微信html5项目有一个需求：页面包含背景大图+用户链接二维码图片合成图片，以便用户长按时要保存，您可以保存整个页面而不仅仅是二维码。思考1.哪种实现方式效率会更高，虽然可以从后台获取图片，但是需要等待生成二维码->添加到大图->转换成图片->传输，这是一个同步过程。花了很长时间；其次看网上的评价，后台用的库生成的图片偶尔会出错，修改起来也麻烦。所以决定在前端做。2.使用svg或者canvas考虑到移动端对html5和高分辨率屏幕更好的新特性支持，使用svg似乎很合适------如果没看到前辈踩的坑，它会这样~~根据https://www.jianshu.com/p/458...，步骤是html-->svg-->canvas-->img，问题出在cross的使用上-domainimages:也就是iphone系列被拒...所以我决定用html2canvas这个库来完成html-->canvas-->img的转换。以下是踩坑的经历。坑1图片模糊。这是一个意想不到的坑，代码检查浪费了很多时间...问题：html2canvas渲染的背景图会不清晰。解决方法：使用Img标签。坑2.高分辨率下，文字模糊。这是预期的情况。获取设备像素比window.devicePixelRatio百分比来拉伸画布。。。奇怪。。后来发现这是0.5版本需要做的操作，1.0版本的默认参数scale已经设置好了，但目前还不清楚。终于得到同事的启发，最终的解决办法是！！始终设置为4x！即html2canvas(ele,{sacle:4}).then((canvas)=??>{});简单粗暴。。。虽然图片尺寸因此变大了。。。坑3IOS下，大图有概率画不出来针对这个需求，原来的操作是写一个链接到img标签的src属性中的大图，在activated()中生成二维码然后新建一个img标签附加到大图上（使用vue）。在IOS上，经常会出现页面只有背景色和二维码图片的情况。原因：在下载大图之前就开始画图了。解决方法：给img添加onload事件，下载完成后调用绘图方法。坑四个html元素的隐藏是为了让用户长按保存整个页面，所以使用html2canvas将所有内容转为图片。并且不能绘制隐藏内容，所以需要先显示页面，生成图片后隐藏。在vue中，就是v-show的值的变化过程。问题：页面会闪烁，然后显示图片解决方法：直接设置组件v-show=false，在html2canvas中添加参数onclone，生成一个复制的虚拟组件，设置为显示，就可以拿到它进行绘图，并且虚拟组件不会显示在页面上。html2canvas(ele,{onclone(doc){lete=doc.querySelector('#wrapper');e.style.display='block';}}).then((canvas)=??>{});其他坑图片高度问题：UI只给出一张图片，宽度可以拉长一点，全面屏下高度会不够覆盖整个屏幕，会漏出白底；如果强制将图片设置为屏幕高度，则图片会失真。解决方法：让UI帮你，不要把图片底部弄得五颜六色，只保留一种颜色。然后将页面的背景颜色设置为相同的颜色。二维码图片定位问题：如何在不同屏幕上将二维码图片定位到正确的位置。解决方法：设置为绝对定位，以屏幕宽度为基准设置left和top值。.qr{宽度：32vw；位置：绝对；左：16vw；top:97vw;}图片跨域等类似的图片跨域问题可以参考以下两篇文章：http://www.php-master。com/pos...https://www.jianshu.com/p/458...
