共计 2673 个字符，预计需要花费 7 分钟才能阅读完成。
网易哒哒的 H5 一贯是业界精品，其中不少 H5 会成为爆款，能在朋友圈宽泛流传的那种。同时，他们还写了一本很水的书——制作爆款：H5 营销策划一本通，草草介绍了下各式各样的 H5，但相干的技术文章却都没这么介绍，笔者始终想仿做相似的 H5，找来找去，也只找到两篇网易同厂的技术类文章：
- 高质量前端快照计划：来自页面的「自拍」
- 官网揭秘！你的色彩是这样算进去的
就此，笔者做个繁难 H5，介绍一下集体认为 H5 中比拟重要的性能点——长按保留图片及辨认二维码
此我的项目次要用到三个库
- html2canvas：将 HTML 转换为 canvas
- canvas2image：将 canvas 转换为图片
- qrcodejs2：生成二维码
后期筹备
设计稿：魔改公司 H5 中的其中一页
字体：寻找开源字体，这款不错——LXGW WenKai / 霞鹜文楷
此外，就是布局，笔者在挪动端法门：自适应计划和高清计划 中论述过一个观点：
不同的布局形式作用不同，像新闻类的 H5，采纳 px 为单位，是为了让大手机看到更多的信息；像应用型的 H5，采纳 rem/vw 为单位，力求在各种手机上能保持一致 UI
像营销页面，是心愿在各种手机上放弃 UI 统一，实践上采纳 rem/vw 是没问题的，然而 ggvswild 在高质量前端快照计划：来自页面的「自拍」中曾说：
为了给到
html2canvas明确的整数计算值，防止因小数舍入而导致的拉伸含糊，倡议将布局中应用中应用%、vw、vh或rem等单位的元素款式，对立改为应用px
而笔者在理论我的项目开发时，采纳 rem 为单位并没有发现拉伸含糊问题。除此之外，笔者又寻找了几个网易的 H5
- 对于你的画，网易云音乐出品，采纳 % + js + 相对定位布局
- 势力的游戏，网易云音乐出品，采纳 % + js + 相对定位布局
- 测一测属于你的主导色，网易云音乐出品，采纳 rem/vw + 相对定位布局
- 这 100 种人生必吃美食，你打卡了哪些，网易哒哒出品，采纳 px + 相对定位布局
集体总结：在布局上它们都应用相对定位布局，在长度单位上各有特色，所以做 H5 布局是无所谓用那种形式，只有在截图页不让元素拉伸即可，也就是说如果拉伸含糊了，可查一下此元素的单位是否是小数，至于其余页的布局，习惯用那个就用那个
实战开始
字体的使用
字体「霞鹜文楷」大概 4.4M，太大了，用 fontmin 提取用到的字体，这里我间接应用 Fontmin 的客户端，无它，命令行执行出错，营销页只用到了 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）已反对缩放，已解决图片不清晰的问题
- 图片不清晰以前是个大问题，不少博文都有对其阐明，目前的版本没看到含糊
- 文档上写反对
background-image:linear-gradient()，然而如果是突变至通明是不行的
而我心愿出现这样的款式：
背景突变计划：
background-image: linear-gradient(90deg, $white, transparent);改成背景图：
background: url('../bg.png') no-repeat;
background-size: 100% 100%;- 文字会呈现位移，这个问题至今始终存在，作者也没有修复
以上就是所遇到的问题，像跨域之类的问题，随着工夫的推移，文档上都有阐明，曾经不是什么问题
线上预览地址：这里
参考资料
- 高质量前端快照计划：来自页面的「自拍」
- 官网揭秘！你的色彩是这样算进去的……
- H5 实现保留图片的采坑记录
