Netease 's H5 has always been a boutique product in the industry, and many of them will become a hit, the kind that can be widely circulated in the circle of friends. At the same time, they also wrote a very watery book - Making Popular Styles: H5 Marketing Planning in One Guide, and hastily introduced all kinds of H5, but the related technical articles have not been introduced in this way. The author has always wanted to I imitated a similar H5, and I looked around, but I only found two technical articles from the same factory of NetEase:
- High-quality front-end snapshot solution: "selfie" from the page
- Official reveal! This is how your color is calculated
In this regard, the author makes a simple H5 and introduces the functions that I think are more important in H5 - long press to save the picture and identify the QR code
This project mainly uses three libraries
- html2canvas : Convert HTML to canvas
- canvas2image : convert canvas to image
- qrcodejs2 : Generate QR code
Preliminary preparation
Design draft: One of the pages in the H5 of Magic Change Company
Fonts: Looking for open source fonts, this one is good - LXGW WenKai / Xia Wu Wen Kai
In addition, it is the layout. The author expounded a point of view in the mobile terminal method: adaptive scheme and high-definition scheme :
Different layouts have different effects. For example, the news H5 uses px as the unit to allow large mobile phones to see more information; for the application-type H5, it uses rem/vw as the unit, and strives to be able to display more information on various mobile phones. Keep the UI consistent
Like the marketing page, we want to keep the UI consistent on various mobile phones. In theory, it is no problem to use rem/vw, but ggvswild once said in the high-quality front-end snapshot solution: "Selfie" from the page :
In order to givehtml2canvas
a clear integer calculation value and avoid stretching and blurring caused by decimal rounding, it is recommended to use%
,vw
in the layout. ,vh
orrem
and other units of element style, unified to usepx
In the actual project development, the author did not find the problem of stretching blur when using rem as the unit. In addition, the author also looked for a few NetEase H5
- About your painting , produced by NetEase Cloud Music, using % + js + absolute positioning layout
- Game of Thrones , produced by NetEase Cloud Music, using % + js + absolute positioning layout
- Test your dominant color , produced by NetEase Cloud Music, using rem/vw + absolute positioning layout
- These 100 must-eat foods in life, which ones have you checked in , produced by Netease DaDa, using px + absolute positioning layout
Personal summary: They all use absolute positioning layouts in terms of layout, and they have their own characteristics in length units, so it doesn't matter which way to do H5 layout, as long as the elements are not stretched on the screenshot page, that is, if stretched If it is blurry, you can check whether the unit of this element is a decimal. As for the layout of other pages, use the one you are used to.
Actual combat begins
Use of fonts
The font "Xiahu Wenkai" is about 4.4M, which is too large. I use fontmin to extract the fonts used. Here I use Fontmin's client directly. Without it, the command line execution error, the marketing page only uses 9 Chinese characters, cut Later reduced from 4.4M to 44kb
The realization of two-dimensional code function
Very simple, you can learn by reading the documentation
var qrcode = document.getElementById("qrcode")
new QRCode(qrcode, {
width: 200,
height: 200,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.L
}).makeCode(window.location.href)
Snapshot implementation
Combine html2canvas and canvas2image to convert HTML into base64 images, and this function can be made into a library:
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
})()
use:
convertToImage(document.querySelector("#capture")).then((imageEl) => {
document.getElementsByClassName("save")[0].appendChild(imageEl)
})
The pits of canvas2image
The latest version (1.4.1) already supports zooming, and the problem of unclear pictures has been solved
- The unclear picture used to be a big problem. Many blog posts have explained it. The current version does not see blur.
- The document supports
background-image:linear-gradient()
, but if it is gradient to transparent, it will not work
And I want to render like this:
Background gradient scheme:
background-image: linear-gradient(90deg, $white, transparent);
Change to background image:
background: url('../bg.png') no-repeat;
background-size: 100% 100%;
- The text will be displaced. This problem has existed until now, and the author has not fixed it.
The above are the problems encountered, such as cross-domain problems, as time goes by, the documents have instructions, it is no longer a problem
Online preview address: here
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。