html2cavnas 一些注意事项

#### 前言
本篇文章,不是去说`html2cavnas`的使用方式或者功能的,而是来说一下,`html2cavnas`中常碰到的一些问题,以及该如何解决;

我也不是一个资深的使用者,我也只是在移动端使用过,所以这里主要整理一下网上查到的信息,以及我自己碰到,在我认为是比较重要的信息;

下面列一下问题,不会添加代码,最后会有一个小demo;

#### 清晰度问题
生成图片的清晰度,是一个很大的问题,如果你生成的图片,模糊的啥都看不出来了,那还玩个毛线啊;

影响清晰度的问题:

1. 原图,原图的清晰度,会影响生成图的清晰度(这个可以当我没说,哈…)
2. 分辨率,可以默认就生成2倍图片,这个没啥好说的。
3. `background-image`,生成的图片效果会很差,这里可以使用`img`来模拟`background-image`(这个是主要问题,公司同事提出的,我在做的过程中并没有发现这个问题);
4. 关闭`canvas`默认的抗锯齿设置;

参考一下:[基于html2canvas实现网页保存为图片及图片清晰度优化](https://segmentfault.com/a/1190000011478657)

#### 影响生成图片大小的设置
生成图片的大小也是一个特别的影响因素,这来源于几个原因:

1. 你们自己的服务保存图片时,是否有大小的限制?
2. 你生成的图片,被分享到其他平台时,是不是会受到其他平台的限制(比如:其他客户端分享一个图片到微信的限制就是`1M`大小);
3. 生成图片太大,整个过程,是不是就会体验很差,开始生成到生成图片结束,有漫长的等待期;

甚至还有其他各种各样的因素,这里不一一列举;

那么影响图片质量的因素有哪些呢?

1. 原图,原图越大,生成的图片也会越大,所以尽量使用小图,尽量使用`jpg`的图。
2. 生成图片的类型,默认生成图片是`png`格式的,可以改为`jpeg`格式。
3. 图层里,图片的数量,这个很明显,量越大,生成的图片也越大,建议把不变的图片,都进行图层合并,使用一张图片;
4. 特殊字体(这个未验证)

所以这里建议:
生成图片的部分,可以重新生成一套模板,把模板里,所有的图片都尽可能的合并到一张底图上,然后其他的元素使用定位到指定的位置,这样兼容性是最好的。
这样的一个不好是:要重新写一个简单的模板。

#### 影响图片布局
当使用`canvas`布局的时候,其实质原来就是它会计算出,你`HTML`布局中所有的显示的元素,然后通过一个无比复杂的算法(没有去研究),把这些元素绘制在`canvas`上面。

毕竟`canvas`与`html`还是有差别的,所以`canvas`并不能很完美的支持`html`和`CSS`中的所有的渲染属性,这里就要求对生成图片的模板,有一定的注意事项;

1. 伪类尽量少用,可以使用`after`,`before`,但是其他的就尽量不要使用了,我自己试了一下,`first-child`这样的伪类,就不适用,无法绘制成图片。
2. 不能使用`display:none`的容器,因为内部的背景图,特殊字体,可能还没有下载,绘制出的图片会有问题。
3. `animation`和`transition`不能使用,会导致整个布局混乱。

#### 影响生成图片时间

1. 页面上的img数量
2. 外部可能会影响的资源(比如特殊字体)

这个没有专门做研究测试,不过有个原则是,尽量简单尽量少。

#### 其他
1. 图片跨域可是一个大问题哦,让服务器支持图片跨域吧。

#### 综上,最值得注意的地方
1. background-image -> img
2. png -> jpg
3. 2倍图
4. 不使用animation和transition;
5. 不使用除after和before的伪类;

只要上面5点注意一下,应该可以使用html2cavnas生成你需要的图片的哦。

所以可以看一个:[demo](/study/2019/20190112/index-1.html)

还有之前做的一个活动:[【起点年终盘点】](https://activity.qidian.com/2019/63842771),也许会下线哦。

### 总结

内容会持续总结,也欢迎您提出一些宝贵的意见,让大家在前端生成图片的时候,更方便,更少踩坑;

如果有发现新的特性,也欢迎留言,感谢阅读;

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>