网易哒哒[1]的 H5 一向是业界精品，其中不少 H5 会成为爆款，能在朋友圈广泛流传的那种。同时，他们还写了一本很水的书——制造爆款：H5营销策划一本通[2]，草草介绍了下各式各样的H5，但相关的技术文章却都没这么介绍，笔者一直想仿做类似的H5，找来找去，也只找到两篇网易同厂的技术类文章：
- 高质量前端快照方案：来自页面的「自拍」[3]
- 官方揭秘！你的颜色是这样算出来的[4]
就此，笔者做个简易H5，介绍一下个人认为H5中比较重要的功能点——长按保存图片及识别二维码
此项目主要用到三个库
- html2canvas[5]：将HTML 转换为 canvas
- canvas2image[6]：将 canvas 转换为图片
- qrcodejs2[7]：生成二维码
前期准备
设计稿：魔改公司H5中的其中一页
字体：寻找开源字体，这款不错——LXGW WenKai / 霞鹜文楷[8]
此外，就是布局，笔者在移动端法门：自适应方案和高清方案 中阐述过一个观点：
不同的布局方式作用不同，像新闻类的H5，采用 px 为单位，是为了让大手机看到更多的信息；像应用型的H5，采用 rem/vw 为单位，力求在各种手机上能保持一致UI
像营销页面，是希望在各种手机上保持UI一致，理论上采用 rem/vw 是没问题的，但是 ggvswild 在高质量前端快照方案：来自页面的「自拍」[9] 中曾说：
为了给到
html2canvas明确的整数计算值，避免因小数舍入而导致的拉伸模糊，建议将布局中使用中使用%、vw、vh或rem等单位的元素样式，统一改为使用px
而笔者在实际项目开发时，采用 rem 为单位并没有发现拉伸模糊问题。除此之外，笔者又寻找了几个网易的 H5
- 关于你的画[10]，网易云音乐出品，采用 % + js + 绝对定位布局
- 权力的游戏[11]，网易云音乐出品，采用 % + js + 绝对定位布局
- 测一测属于你的主导色[12]，网易云音乐出品，采用 rem/vw + 绝对定位布局
- 这100种人生必吃美食，你打卡了哪些[13]，网易哒哒出品，采用 px + 绝对定位布局
个人总结：在布局上它们都使用绝对定位布局，在长度单位上各有特色，所以做 H5 布局是无所谓用那种方式，只要在截图页不让元素拉伸即可，也就是说如果拉伸模糊了，可查一下此元素的单位是否是小数，至于其他页的布局，习惯用那个就用那个
实战开始
字体的运用
字体「 霞鹜文楷」大约4.4M，太大了，用 fontmin[14] 提取用到的字体，这里我直接使用 Fontmin 的客户端[15]，无它，命令行执行出错，营销页只用到了9个汉字，裁剪后从4.4M减少到 44kb
二维码功能的实现
很简单，看文档就能学会
var qrcode = document.getElementById("qrcode") new QRCode(qrcode, { width: 200, height: 200, colorDark: "#000000", colorLight: "#ffffff", correctLevel: QRCode.CorrectLevel.L }).makeCode(window.location.href)
快照实现
将 html2canvas 和 canvas2image 结合，将 HTML 转成 base64 图片，而这一功能可以做成一个库：
var convertToImage = (function () { function createBaseCanvas(scale, width, height) { const canvas = document.createElement('canvas'); canvas.width = width * scale; canvas.height = height * scale; const context = canvas.getContext("2d"); // 关闭抗锯齿 context.mozImageSmoothingEnabled = false; context.webkitImageSmoothingEnabled = false; context.msImageSmoothingEnabled = false; context.imageSmoothingEnabled = false; context.scale(scale, scale); return canvas; } function convertToImage(container, options = {}) { const scale = window.devicePixelRatio; const width = container.offsetWidth; const height = container.offsetHeight; const canvas = createBaseCanvas(scale, width, height); const ops = { useCORS: true, // 如果截图的内容里有图片,解决文件跨域问题 allowTaint: false, // 是否允许跨源图像污染画布 ...options }; return html2canvas(container, ops).then(canvas => { const imageEl = Canvas2Image.convertToPNG(canvas, canvas.width, canvas.height) return imageEl }) } return convertToImage })()
使用：
convertToImage(document.querySelector("#capture")).then((imageEl) => { document.getElementsByClassName("save")[0].appendChild(imageEl) })
canvas2image 的坑点
- 最新版本（1.4.1）已支持缩放，已解决图片不清晰的问题
- 图片不清晰以前是个大问题，不少博文都有对其说明，目前的版本没看到模糊
- 文档[16]上写支持
background-image:linear-gradient()，但是如果是渐变至透明是不行的
而我希望呈现这样的样式：
背景渐变方案：
background-image: linear-gradient(90deg, $white, transparent);
改成背景图：
background: url('../bg.png') no-repeat; background-size: 100% 100%;
- 文字会出现位移，这个问题至今一直存在[17]，作者也没有修复
以上就是所遇到的问题，像跨域之类的问题，随着时间的推移，文档上都有说明，已经不是什么问题
线上预览地址：这里[18]
参考资料
- 高质量前端快照方案：来自页面的「自拍」[19]
- 官方揭秘！你的颜色是这样算出来的……[20]
- H5 实现保存图片的采坑记录[21]
[1] 网易哒哒: http://d.news.163.com/#/h5
[2] 制造爆款：H5营销策划一本通: https://book.douban.com/subject/35131526/
[3] 高质量前端快照方案：来自页面的「自拍」: https://musicfe.dev/canvas-snapshot/
[4] 官方揭秘！你的颜色是这样算出来的: https://musicfe.dev/color-quiz/
[5] html2canvas: https://html2canvas.hertzen.com/
[6] canvas2image: https://github.com/hongru/canvas2image
[7] qrcodejs2: https://www.npmjs.com/package/qrcodejs2
[8] LXGW WenKai / 霞鹜文楷: https://github.com/lxgw/LxgwWenKai
[9] 移动端法门：自适应方案和高清方案: https://blog.azhubaby.com/2021/12/29/2021-12-22-%E7%A7%BB%E5%8A%A8%E7%AB%AF%E6%B3%95%E9%97%A8%EF%BC%9A%E8%87%AA%E9%80%82%E5%BA%94%E6%96%B9%E6%A1%88%E5%92%8C%E9%AB%98%E6%B8%85%E6%96%B9%E6%A1%88/
[10] 高质量前端快照方案：来自页面的「自拍」: https://musicfe.dev/canvas-snapshot/
[11] 关于你的画: https://st.music.163.com/c/yourposter/m1/index.html
[12] 权力的游戏: https://st.music.163.com/c/gameofthrones
[13] 测一测属于你的主导色: https://st.music.163.com/st-color-quiz/index
[14] 这100种人生必吃美食，你打卡了哪些: https://wp.m.163.com/163/page/news/food_2022/index.html
[15] fontmin: https://github.com/ecomfe/fontmin
[16] Fontmin 的客户端: http://ecomfe.github.io/fontmin/#app
[17] 文档: https://html2canvas.hertzen.com/features
[18] 一直存在: https://github.com/niklasvh/html2canvas/issues/2769
[19] 这里: http://azhubaby.com/demo/WeChat/canvas-snapshot/index.html
[20] 高质量前端快照方案：来自页面的「自拍」: https://musicfe.dev/canvas-snapshot/
[21] 官方揭秘！你的颜色是这样算出来的……: https://musicfe.dev/color-quiz/
[22] H5 实现保存图片的采坑记录: https://github.com/whinc/whinc.github.io/issues/8
