& Lt; canvas merging poster & gt; Summary of the problems and solutions, canvas poster

<Canvas merging poster> Summary of problems and solutions, canvas poster

 

Recently I made a mobile project that used canvas to synthesize posters and images. Because there was no canvas Foundation at all, I went online to search for a demo from my predecessors. However, I encountered many problems during the development process, the problems and solutions are summarized as follows:

 

1. Full Screen adaptation for mobile canvas Projects

Problem description: Because the width and height of the canvas can only be set to the px value, and the rem unit is not supported, it is very difficult to achieve the full screen effect of the canvas when the screen resolution of the mobile device is complicated.

Solution: Use js to obtain the clientWidth value of the mobile phone screen and assign it to canvas to adapt to 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. blur the image synthesized by canvas

Problem description: The image generated by the canvas is blurred. In particular, the image must be identified by a QR code, which cannot be identified by the user;

Solution: 1) You can reference the hidpi-canvas.js plug-in to solve this problem;

2) You can also set the width and height values in the style of the canvas to the desired size, and then enlarge the width and height values of the canvas by x, when you draw an image or text in the canvas, the corresponding value should also be increased by x.

 

3. Some models are out of order during image Merging

Problem description: Some Android phones can only display half of the image you want when exporting the base64 image of the canvas. The preliminary analysis is a bug caused by the pixel ratio of the device.

Solution: Get the pixel ratio pr of the device and determine the model. Here, I only judge whether the device is an iphone or android. No problem has occurred yet, the width and height values of the merged image are restored to the original size.

// Hidpi-canvas enlarge the width and height attributes of the canvas by pr times if (navigator. userAgent. match (/iphone/I) {canvas. width = width; // restore to the original size canvas. height = height;} else {canvas. width = width/pr; // restore to the original size canvas. height = height/pr ;}

 

4. Image Rotation problems when uploading images on the iphone

Problem description: During the test, it was found that images uploaded to the iPhone are rotated, but images uploaded to and saved from the Internet do not. Android is normal.

Solution: You can use the exif. js plug-in to solve this problem. This plug-in will obtain information such as the angle of the photo taken, mainly the Orientation attribute, and perform corresponding operations;

　　

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

 

5. the base64 image cannot be exported when the canvas is used to draw cross-domain images.

Problem description: When an image from a cross-origin request exists in the canvas, exporting the base64 image fails. The preliminary analysis should be caused by the security mechanism of the canvas itself.

Solution: this bug must be solved by both the front and back ends. First, the backend sets the image to allow cross-origin, and then the front end sets Img. crossOrigin = "Anonymous.

Var pageqrcodeimg = qrcodecanvas. toDataURL ('image/jpg '); var qrcodeImg = new image (); qrcodeImg. crossOrigin = "Anonymous"; qrcodeImg. src = pageqrcodeimg; qrcodeImg. onload = function () {// draw an image}

 

6. the canvas will display a white screen when drawing an image.

Problem description: The canvas may occasionally display a white screen when drawing an image. The initial analysis is that the image has not been read.

Solution: add the onload function to the img. After reading the image, execute the Drawing operation.

QrcodeImg. onload = function () {// draw an image}

 

7. Images cannot be saved during browsing

Problem description: The images generated by using canvas cannot be saved or identified by long-pressing in the browser. This problem occurs in some Android images, and the iphone is normal. The initial analysis is that the image quality is too high.

Solution: compress the image quality when exporting base64 images.

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

 

Note: The current problems are basically the same. If you encounter any problems in the future, they will be updated continuously.