Canvas generates a record of stepping on a poster with QR code

Time:2020-2-11

Canvas posters include background pictures, round heads, user nicknames, and linked QR code pictures.

The problem is as follows

Picture not shown

  • When drawing and rendering, the image is not displayed: because the image is loaded asynchronously, the canvas operation needs to be placed in the onload event, otherwise the image will not be displayed, because there is more than one picture, it is recommended to put it in promise, and call async and await
  • Canvas finally generates images and shares them. The generated images are not displayed: because of the cross domain problem of images, it’s good to set the attr of img and “crossorigin” to “anonymous”. However, it should be noted that if this parameter is also set for Base64 accidentally, Base64 will not be displayed in the lower version of Android (my problem is Huawei Android 4.4.2).

Image blur

At the beginning, I made a unified DPR = 1 processing for Android models. As a result, the pictures on Android were very fuzzy, the rounded heads were severely serrated, and none of the solutions on the Internet was successful. Later, I would like to set DPR to window.devicepixelratio, but the width and height of the pictures should be set to a fixed value, which is adaptive according to flexible

Some code examples

// head;
const imgAvadar = await promiseLoadImg(this.userInfoExternal.headUrl);
const imgSize = 40 * this.dpr;
const imgPos = 24 * this.dpr;

ctx.arc((this.canvas.width / 2), (imgPos + (imgSize / 2)), (imgSize / 2), 0, 2 * Math.PI);
ctx.clip();
ctx.drawImage(imgAvadar, ((this.canvas.width / 2) - (imgSize / 2)), imgPos, imgSize, imgSize);

 

new Promise(resolve => {
    const img = new Image();
    //Base64 adds the following cross domain configuration, which will not show pictures in the lower version of Android
    if (src.indexOf('base64,') === -1) {
        img.setAttribute('crossOrigin', 'Anonymous');
    }
    img.onload = function () {
        resolve(img);
    };
    img.src = src;
});

summary

The above is the whole content of this article. I hope that the content of this article has some reference learning value for your study or work. Thank you for your support for developepaer.