Summary of the problems and solutions encountered in HTML5 Canvas Synthetic Poster

Foreword: I recently made a mobile item with Canvas synthetic poster pictures. Since there is no Canvas foundation, I went online to search for a predecessor's DEMO, but I encountered many problems during the development process. Now I will encounter problems and solve the solution. The method summarizes as follows:

Problem description: Because Canvas's Width and Height can only set PX values ​​and do not support REM units, it is difficult to reach the effect of Canvas covered with full screens when the mobile device screen resolution is complicated. Solution: Get the clientWidth value of the mobile phone screen through JS and give it to Canvas to achieve the effect of adapting the full screen;

 Var ClientWidth = Document.documenTelement.clientWidth; Var Canvaswidth = Math.floor (ClientWidth); Var Canvasheight = Math.floor (ClientWidth*(13344* /750)); $ (#Main) .css ('width', canvaswidth+'px '); $ (#main) .css (' height ', canvasheight+' px ');

Problem description: There is a vague problem with pictures generated by Canvas, especially if there are QR codes on the picture, which need to be recognized, users cannot recognize it;

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

2) You can also set the width and height values ​​in the style of Canvas to set the size you want, and then magnify the value of the Width and Height of Canvas respectively. The corresponding value should also be enlarged X times.

Problem description: When some Android phones export the Base64 picture of Canvas, they can only display half of the picture of the effect of the effect. The preliminary analysis is the bug caused by the equipment pixel ratio.

Solution: Get the equipment pixel ratio PR, judge the model. Here I only judge whether it is iPhone or Android. There is no problem for the time being. When synthetic pictures are synthetic, the width and height values ​​are restored to the original size.

 // HIDPI-CANVAS enlarge the Canvas's Width and Height attributes. ght;} else {canvas.width = width / pr; // restore to the original size Canvas.Height = Height / PR;}

Problem description: During the test, it was found that the iPhone mobile phone uploaded photos of the rotation, and the picture uploaded from the Internet will not occur, and Android is normal.

Solution: This problem can be solved using the exif.js plug -in. This plug -in will obtain information such as the angle when taking photos.

 var file = $ (this) [0] .Files [0]; exif.getdata (file, function () {exif.getalltags (this); Orientation = exif.gettag (this, 'Orientation');});}) ;;

Problem description: When there are pictures of cross -domain requests in the canvas, the output Base64 picture fails. The preliminary analysis should be caused by the security mechanism of Canvas itself.

Solution: This bug needs to be solved with the back -end and back -end. First, the picture is set to allow the picture to allow cross -domain, and then set the front end. Crossorigin = Anonymous;

 Var Pageqrcodeimg = QRCODECANVAS.TODAURL ('Image/JPG'); VAR QRCODEIMG = New Image (); = Pageqrcodeimg; qrcodeimg.onload = Function () {// Draw a picture}

Problem description: The white screen situation occasionally occasionally appears when Canvas draws a picture. The preliminary analysis is that the drawing operation is performed before the picture is completed.

Solution: Add the ONLOAD function to IMG, and then perform the drawing operation after reading the picture.

 qrcodeimg.Onload = Function () {// Draw a picture}

Problem description: The picture generated by Canvas cannot be saved or recognized the QR code in WeChat browser. Some pictures of Android have this situation. The iPhone is normal. The preliminary analysis is that the picture quality is too large.

Solution: Compress the quality of the picture when exporting the base64 picture.

 var mycanvas = document.GetelementByid (main); var image = mycanvas.todataurl (image/jpeg, 0.7);

Postscript: The current problems encountered are basically these. If any problems are encountered in the later period, it will continue to be updated.

The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.