1

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:

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

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 give html2canvas a clear integer calculation value and avoid stretching and blurring caused by decimal rounding, it is recommended to use % , vw in the layout. , vh or rem and other units of element style, unified to use px

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

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

  1. 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.
  2. 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%;
  1. 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

References


山头人汉波
394 声望555 粉丝