Share a mobile project using canvas to synthesize poster images

I recently made a mobile project that uses canvas to synthesize poster images. Since I don’t have any canvas foundation, I searched the Internet for a demo from a senior, but I encountered many problems during the development process. The problems encountered and the solutions are summarized as follows:

1. The problem of adapting the mobile canvas project to full screen

Problem description: Since the width and height of the canvas can only be set to px values ​​and do not support rem units, it is difficult to achieve the effect of the canvas filling the full screen when the screen resolution of the mobile device is complex.

Solution: Get the clientWidth value of the mobile phone screen through js and assign it to the canvas to achieve the effect of adapting to the full screen;

var clientWidth = document.documentElement.clientWidth;
var canvasWidth = Math.floor(clientWidth);
var canvasHeight = Math.floor(clientWidth*(1334/750));
$("#main").css('width',canvasWidth+'px');
$("#main").css('height',canvasHeight+'px');

2. The images synthesized by canvas are blurry.

Problem description: The images generated by canvas are blurry, especially when there are QR codes on the images that need to be identified. Well, users cannot identify;

Solution: 1) You can quote HIDPI-CANVAS.JS plug-in solving this problem;

2) You can also make the Width and Height values ​​in the style of Canvas's style of Canvas. Set it to the size you want, and then enlarge the width and height values ​​of the canvas by x times respectively. Note here that when you draw pictures or text in the canvas, the corresponding values ​​​​should also be enlarged by x times.

3. When compositing pictures, the pictures of some models are confusing

Problem description: Some Android phones are exporting canvas When using base64 images, only half of the image with the desired effect can be displayed. Preliminary analysis indicates that it is a bug caused by the device pixel ratio.

Solution: Get the device pixel ratio pr and determine the model. Here I only determined whether it is an iPhone or an Android. There is no problem yet. When compositing the picture, restore the width and height values ​​to the original size. .

//hidpi-canvas将canvas的width和height属性放大pr倍
if (navigator.userAgent.match(/iphone/i)) {
    canvas.width = width ;//恢复为原先的大小
    canvas.height = height ;
}else{
    canvas.width = width / pr;//恢复为原先的大小
    canvas.height = height / pr;
}

4. There is a rotation problem when uploading pictures on iPhone

Problem description: Test When I discovered that photos uploaded to iPhones were rotated, this problem did not occur when uploading pictures saved from the Internet. Android devices were normal.

Solution: This problem can be solved using the exif.js plug-in. This plug-in will obtain the angle and other information when the photo was taken, mainly the Orientation attribute, so as to perform corresponding operations;

var file = $(this)[0].files[0];
EXIF.getData(file, function() {  
    EXIF.getAllTags(this);     
    Orientation = EXIF.getTag(this, 'Orientation');  
});

5. Canvas drawing cross-domain images cannot export base64 images

Problem description : When there are images from cross-domain requests in the canvas, exporting base64 images fails. Preliminary analysis should be caused by the security mechanism of the canvas itself.

Solution: This bug needs to be solved by the front-end and back-end cooperation. First, set the image on the back-end to allow cross-domain, and then set Img.crossOrigin = "Anonymous"; on the front-end.

var pageqrcodeimg = qrcodecanvas.toDataURL('image/jpg');
var qrcodeImg = new Image();
qrcodeImg.crossOrigin = "Anonymous"; 
qrcodeImg.src = pageqrcodeimg;
qrcodeImg.onload=function(){
        //绘制图片
}

6. A white screen will appear when drawing pictures on canvas

Problem description : When drawing pictures on canvas, a white screen may occasionally appear. Preliminary analysis is that the drawing operation is performed before the picture is read.

Solution: Add the onload function to img, and then perform the drawing operation after the image is read.

qrcodeImg.onload=function(){
        //绘制图片
}

7. Long press on the picture while browsing on WeChat cannot be saved

Problem description : Pictures generated through canvas cannot be saved or the QR code can be recognized when long-pressed in the WeChat browser. This happens to some pictures on Android but normal on iPhone. Preliminary analysis is that the picture quality is too high.

Solution: Compress image quality when exporting base64 images.

var mycanvas = document.getElementById("main");
var image = mycanvas.toDataURL("image/jpeg",0.7);

Postscript: These are basically the problems encountered so far. If any problems are encountered in the future, we will continue to update.

The above is the detailed content of Share a mobile project using canvas to synthesize poster images. For more information, please follow other related articles on the PHP Chinese website!