Canvas implements sample code for saving images locally

Requirements: Save HTML5 content as images

Idea: Generate base64 images through Canvas drawing, long press to save to local

Problem: Canvas prohibits cross-domain, Android WeChat long press cannot save base64 images, images pulled by the server are compressed

Question 1: Canvas is prohibited from cross-domain. If the image comes from other domains, calling toDataURL() will throw an error.

Solution: The <img> tag can solve cross-domain issues by introducing the crossorigin attribute, that is, crossOrigin=Anonymous or crossOrigin=*. Please note that setting 'Anonymous' in the mobile Q environment is not supported and needs to be set to '*'. If crossorigin=anonymous is used, then Equivalent to anonymous CORS

Problem 2: The <img> tag with crossOrigin set cannot pull down cross-domain images and img.onload cannot be triggered.

Solution: For background forwarding or nigix proxy, set Access-Control-Allow-Origin: wx.qlogo.cn to allow static resource server images to cross domains. This setting solves the problem of obtaining images across domains. (The picture here is the user avatar domain name wx.qlogo.cn, which has cross-domain issues)

Question 3: Base64 images cannot be saved by long pressing on WeChat h5 on Android phone

Solution: Upload the base64 image drawn by canvas to the server, and then obtain the png (jpg) image from the server. This approach is more troublesome, and we need to find ways to improve it later.

Problem 4: Images uploaded to the server are severely compressed

Solution: The uploaded pictures will have several resources on the server, with different compression levels. You can get pictures with clearer pixels from the directory 'http://img10.360buyimg.com/promotepic/'.

Question 5: Long press on the drawn QR code link (//wqs.jd.com/xxx) cannot directly enter the page.

Solution: When specifying the QR code link to be drawn, you must add http: otherwise the QR code will be recognized as text.

 //canvas drawing part of the code: var picurl = http://wx.qlogo.cn/mmopen/OicsrgN57fqDxImI3icnMeSXRfVUQRueHcxRRuWG0O1Ea1bNyBPKKKLeq5FiaXFWOdsltVe1R1PtJ2EtsDHYDjHgQ/0; var img = new Image, canvas = document.createElement(canvas), ctx = canvas.getContext(2d), //See question 2 for the background nigix agent src = picurl.replace(http://wx.qlogo.cn,//wq.jd.com); / /To solve the problem that canvas cross-domain toDataURL cannot be read, see question 1 img.crossOrigin = Anonymous; //Preloading of image resources img.onload = function() { canvas.width = img.width; canvas.height = img.height; ctx.drawImage( img, 0, 0 ); //The drawn base64 image localStorage.setItem( savedImageData, canvas.toDataURL(image/png) ); } img. src = src;

Part of the code for uploading pictures:

 // See question 3 for uploading pictures $.ajax({ type: 'POST', url: loadJs.addToken('http://wq.jd.com/activetmp/promotepic/promoteaddpic', j132), data: { filename: new Date().getTime()+''+Math.floor(Math.random()*10000) + '.jpg', content: base64pic, active: shotpic20160901 }, dataType: 'json', xhrFields: { withCredentials: true }, success: function(data) { if (picdata.id == 1 && picdata.msg) { //The image path of this prefix path is the most See question 4 for clarity var imgPre = 'http://img10.360buyimg.com/promotepic/'; //Full address link for image address splicing var photo = imgPre + picdata.msg; $(#cardImg)[0].onload = function() { //to do business logic}; $(#cardImg).attr(src ,photo); } }, error:function(data){ }});

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.