web移动端html2canvas踩坑

1.跨域图片无法展示

我们的图片资源是走cdn的，所以导致了图片的链接域名与网页的域名不一致，而产生了跨域问题，可能导致图片无法展示。

解决：
步骤1：将html2canvas中的参数设置中的useCORS属性改为true，使html2canvas接受处理跨域资源。
步骤2：使图片资源允许跨域（响应头中加上 Access-Control-Allow-Origin: *）
这样就能显示跨域图片了~

第三方跨域图片处理：
自己的图片实现允许跨域还是比较容易的，但如果用到了第三方的不允许跨域的图片（如微信头像）呢，这时候需要我们再多做一下处理，将那张图片变成允许跨域的啦....

看别人的做法是：在服务器上实现第三方图片的代理（将第三方图片的域名变成自己的域名），再使自己的域名的资源允许跨域。

为了一个活动而修改服务器的nginx配置，是不是不太好（怂=.=）。

所以我们活动里换了另一种方式。

后端不直接返回微信头像，而是一个能对应相关微信头像的链接（这个链接的资源允许跨域），当后端接收到这个链接的请求时，拉取微信头像信息，再返回给前端这个头像的图片信息。[这里的后端指的活动中的后端代码，与上面的改nginx配置不是一个做法]

后来发现，这个拉取微信头像的操作有时会超时，所以我们又做了层处理，在第一次获取微信头像后，将这个头像上传到自己的图片库中（异步操作），以后访问页面，需要微信头像时，就返回图片库中的图片链接（当然，这个图片库链接也是可以跨域的）。

2.生成的分享图片不清晰

这里的不清晰指的有两方面：

整张分享图片的清晰度不够
原分享页面中的图片在生成的分享图片中的清晰度不够

整张分享图片清晰度不够问题解决：
这里的清晰度不够的问题，是由于图片的实际物理像素点不够的原因造成的，这里我的处理方法修改html2canvas的scale属性，增大绘制时的缩放比例，从而提高清晰度

html2canvas($snapshot, {
    useCORS: true,
    scale: window.devicePixelRatio*2 // 默认值是window.devicePixelRatio
    backgroundColor: null,
    logging: false
});
复制代码

原分享页面中的图片在生成图片中清晰度不够问题解决

我们在分享页面中有用到两种方式展示图片：

使用img标签元素引入图片
使用元素中的背景图片引入图片

但从实际生成的图片的效果发现，使用页面中使用背景图片的部分，在分享快照中会特别的不清晰，而且背景图片的底部会有一些原页面中没有的小刺点（如下图的背景图里，生成的图片中富途logo下有一条类似的白色细线，但原页面中却没有）。

而使用img标签元素引入图片则不会存在这种情况。

缩放过的背景图片
img元素的图片

从图中可以看出，两张图的页面截图（上部分图）显示的清晰度是差不多的，但通过html2canvs生成图片之后，明显看出，背景图的那张图片的清晰度差好多，而且周围还有些渣渣小点。

so: 如果分享快照中有用到图片的话，还是尽量使用img标签，而不是用背景图，以保证分享图片的清晰度。

分享图片页面中雪碧图
在重构分享图片页面时，里面有个vs的内容，里面的阵营图片会根据用户的阵营选择和最终获胜阵营的结果而展示不同的内容，而我们为了页面的性能问题，还有开发的方便，将这些阵营图片拼成了一张雪碧图，通过class控制展示不同的图片。
一开始我也没想到怎么用img元素去展示雪碧图，就还是用了背景图来显示阵营选择这块内容，后来就时不时被产品童鞋吐槽分享图片中那部分内容太模糊了....。

后来想了想，如果使用的是雪碧图的话，也是可以改成用img标签展示的：

<span class="emoji emoji01"><img src="/emoji.png" alt=""></span>

<style>
.emoji{
    width: 10px;
    height: 10px;
    /*固定大小，超过的隐藏*/
    overflow: hidden;
    display: block;
    position: relative;
}
.emoji.emoji01 img{
    position: absolute;
    /*使用top,left 偏移img图片使之展示对应的位置*/
    top: 0;
    left: -20px;
}
</style>
复制代码

3.img 图片对 transform属性的兼容性不是很好

html2canvas的官方文档中，有列了一些兼容性不是很好的css属性，所以自己多测试一下，不能支持的属性，就换一种写法啦~。

在活动中遇到的是，img元素中的transform的实现不太好。

例子中是想将图片居中展示，所以给img元素加了以下的css：

img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
}
复制代码

但实际上出来的效果是这样的...。

web移动端html2canvas踩坑

转载链接：https://juejin.im/post/5ba1ab97e51d450e8a65f9ac

秒客网

web移动端html2canvas踩坑

相关文章