Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to avoid using canvas to generate QR code posters with QR code related knowledge, the content is detailed and easy to understand, the operation is simple and quick, and has a certain reference value, I believe that after reading this article on how to avoid using canvas to generate posters with QR code, there will be some gains, let's take a look.

The questions are as follows

Picture does not display

When rendering, the image is not displayed: because the picture is loaded asynchronously, the operation of canvas needs to be placed in the onload event, otherwise the picture will not be displayed. Because there is more than one picture, it is recommended to put it in promise and call it with async,await.

Canvas finally generates pictures to share, and the generated images are not displayed: because of cross-domain problems, just set the attr,'crossOrigin' of img to 'Anonymous', but note that if you accidentally set this parameter for base64, the base64 will not display in the lower version of Android (I have the problem in Huawei Android 4.4.2).

Image blur

At first, the Android model was treated with dpr=1. As a result, the picture on the Android machine was very blurry, the fillet profile picture was badly jagged, and none of the online solutions were successful. Later, it would be better to set dpr to window.devicePixelRatio, but the width and height of the picture had better be set to a fixed value, adapting according to flexble.

Partial code examples

/ avatar; 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 has added the following cross-domain configuration so that the image if (src.indexOf ('base64,') =-1) {img.setAttribute (' crossOrigin', 'Anonymous');} img.onload = function () {resolve (img);}; img.src = src;} will not appear in lower versions of Android) This is the end of the article on "how to avoid using canvas to generate posters with QR codes". Thank you for reading! I believe you all have a certain understanding of "how to avoid using canvas to generate posters with QR codes". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.