移动端 html2canvas 踩坑记录

妤锋シ发布于2019-06-25 12:28 / 2660人阅读

摘要：原因大图还未下载完毕即开始了绘制。而其并不能绘制隐藏的内容，因此需要先显示页面，在图片生成后再隐藏。解决方法设为绝对定位，使用屏幕宽度作为基准设置值。

背景

最近在做的微信 html5 项目有个需求：页面包含一张大的背景图片 + 一个用户的链接二维码图片拼成一张图片，让用户长按保存的时候，可以把整个页面都保存起来，而不是只保存二维码。

思考

1.前后端哪个实现方法会更高效

虽然图片都可以从后台获取，但是一来需要等待二维码生成->添加到大图上->转换成一张图片->传输，是一个同步过程，耗时比较久；二来看到网上的评价，后台使用的库生成的图片偶尔会出错，修改起来也麻烦。因此决定在前端完成。

2.使用 svg 还是 canvas

考虑到移动端对 html5 新特性支持得比较好以及高分辨率屏幕，使用 svg 看起来很适合------如果没看到前辈的踩坑文章的话，会是这样的~~

根据 https://www.jianshu.com/p/458... 所说，步骤是 html-->svg-->canvas-->img ，问题出在使用跨域图片的时候：

也即是 iphone 系列都被拒之门外 ...

因此决定用 html2canvas 库，完成 html-->canvas-->img 的转变。以下是踩坑心得。

坑一

图片模糊

此为想不到的坑，浪费了很多时间在代码检查上...

问题： html2canvas 渲染背景图片 background-image 会不清晰。

解决方法：使用 Img 标签。

坑二

高分辨率下，文字模糊

此为预料中的情况，获取了设备像素比 window.devicePixelRatio 百分比伸展 canvas 画布即可......才怪......

然后发现这是 0.5 版本需要做的操作，1.0 版本的默认参数 scale 已经设置好了，但还是不太清晰。

最后从同事处得到启发，最终解决方法是！！

一律设为 4 倍！即

html2canvas(ele, {
    sacle: 4
}).then((canvas) => {});

简单粗暴...虽然图片体积因此变大了...

坑三

IOS 下，概率性出现大图绘制不出来的情况

对于这个需求，原本的操作是在 img 标签里的 src 属性写上大图链接，在 activated() 里生成二维码再创建新的 img 标签附到大图里（用的 vue）。在 IOS 上，经常出现页面上只有背景颜色和二维码的图片的情况。

原因：大图还未下载完毕即开始了绘制。

解决方法：给 img 添加 onload 事件，下载完毕再调用绘制方法。

坑四

html 元素的隐藏

因为是要让用户长按保存整个页面，所以用 html2canvas 将所有内容转成图片。而其并不能绘制隐藏的内容，因此需要先显示页面，在图片生成后再隐藏。在 vue 里就是 v-show 的值的变化过程。

问题：页面会有闪烁，再显示图片

解决方法：组件直接设为 v-show = false，html2canvas 添加参数 onclone ，生成一个复制的虚拟组件，设置为显示，即可获取进行绘制，且虚拟组件不会显示在页面上。

html2canvas(ele, {
    onclone(doc) {
        let e = doc.querySelector("#wrapper");
        e.style.display = "block";
    }
}).then((canvas) => {});

其他坑

图片高度

问题： UI 只给了一张图片，宽度可以稍微拉伸，高度在全面屏下会不足以覆盖整个屏幕，漏出白底；强制设置为屏幕高度图片会失真。

解决方法：让 UI 帮忙别把图片底部设计得五颜六色，只保留一种颜色。然后将页面的背景颜色设为同种颜色即可。

二维码图片的位置定位

问题：如何让二维码图片在不同屏幕下都定位到正确的位置。

解决方法：设为绝对定位，使用屏幕宽度作为基准设置 left、top 值。

.qr {
    width: 32vw;
    position: absolute;
    left: 16vw;
    top: 97vw;
}

图片跨域等

其他更多类似图片跨域等问题可以参考以下两篇文章：

http://www.php-master.com/pos...

https://www.jianshu.com/p/458...

超融合服务器 idc机房托管移动端海外移动端移动端推送移动端框架

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/14552.html

移动端 html2canvas 踩坑记录

摘要：原因大图还未下载完毕即开始了绘制。而其并不能绘制隐藏的内容，因此需要先显示页面，在图片生成后再隐藏。解决方法设为绝对定位，使用屏幕宽度作为基准设置值。背景最近在做的微信 html5 项目有个需求：页面包含一张大的背景图片 + 一个用户的链接二维码图片拼成一张图片，让用户长按保存的时候，可以把整个页面都保存起来，而不是只保存二维码。思考 1.前后端哪个实现方法会更高效虽然图片...

xfee 2019-06-25 17:02 评论0 收藏0
移动端 html2canvas 踩坑记录

摘要：原因大图还未下载完毕即开始了绘制。而其并不能绘制隐藏的内容，因此需要先显示页面，在图片生成后再隐藏。解决方法设为绝对定位，使用屏幕宽度作为基准设置值。背景最近在做的微信 html5 项目有个需求：页面包含一张大的背景图片 + 一个用户的链接二维码图片拼成一张图片，让用户长按保存的时候，可以把整个页面都保存起来，而不是只保存二维码。思考 1.前后端哪个实现方法会更高效虽然图片...

kviccn 2019-08-05 15:31 评论0 收藏0
html2canvas以及domtoimage的使用踩坑总结

摘要：本人建议第二种，更保险三转换的位图不能被以上版本所识别。客户使用的时候发现了这个问题，没法。五离成功只有一步之遥了，使用了之后安卓手机不能将图片分享给朋友。识别不了问题分析安卓能识别但不能识别矢量图片解决办法自己手写咯。判断手机为安卓还是。前言首先做个自我介绍，我是成都某企业的一名刚刚入行约一年的前端，在之前的开发过程中，遇到了问题，也解决了问题，但是在下一次解决相同问题的时候，只...

邹强 2019-08-23 11:01 评论0 收藏0
html2canvas以及domtoimage的使用踩坑总结

摘要：本人建议第二种，更保险三转换的位图不能被以上版本所识别。客户使用的时候发现了这个问题，没法。五离成功只有一步之遥了，使用了之后安卓手机不能将图片分享给朋友。识别不了问题分析安卓能识别但不能识别矢量图片解决办法自己手写咯。判断手机为安卓还是。前言首先做个自我介绍，我是成都某企业的一名刚刚入行约一年的前端，在之前的开发过程中，遇到了问题，也解决了问题，但是在下一次解决相同问题的时候，只...

MageekChiu 2019-08-02 11:14 评论0 收藏0
移动端H5页面生成图片解决方案

摘要：现在有很多微信公众号运营活动，都有生成图片的需求，生成图片后可以发送给好友和发到朋友圈扩散，利于产品的宣传生成图片可以用但是由于已经有了这个开源库，所以为了节省时间就没有自己写了地址少啰嗦，先看东西根据获取像素比将传入值转为整数绘制获取想要现在有很多微信公众号运营活动，都有生成图片的需求，生成图片后可以发送给好友和发到朋友圈扩散，利于产品的宣传！ 1. 生成图片可以用canvas,但...

sewerganger 2019-08-29 16:19 评论0 收藏0