Html2canvas provides an example of how to save a div image to a high-definition image,

Html2canvas provides an example of how to save a div image to a high-definition image,

This article describes how to use html2canvas to save a div image to a high-definition image:

Http://www.bootcdn.cn/(html2canvans search)

1. Select html2canvas (this version can be scaled in multiple times to ensure image clarity)

The canvas image generated by default is blurred on the retina device. Processing the image to 2x solves this problem:

Var w = $ ("# code "). width (); var h = $ ("# code "). height (); // set the width and height of the canvas to 2 times the width and height of the container var canvas = document. createElement ("canvas"); canvas. width = w * 2; canvas. height = h * 2; canvas. style. width = w + "px"; canvas. style. height = h + "px"; var context = canvas. getContext ("2d"); // then zoom the canvas and double the image to the context on the canvas. scale (2, 2); html2canvas (document. querySelector ("# code"), {canvas: canvas, onrendered: function (canvas ){...}});

Download Method:

. On ('click ','. download ', function () {$ (' # mycanvas '). remove (); var _ height = $ ('. skinreport '). height (); // roll to the top $ ('html, body '). animate ({scrollTop: 0}); if (confirm ('Do you want to download the skin detection report? ') {SetTimeout (function () {var canvas = document. createElement ("canvas"), w =$ ('# skinreport '). width (), h = $ ('# skinreport '). height (); canvas. width = w * 2; canvas. height = h * 2; canvas. style. width = w + "px"; canvas. style. height = h + "px"; var context = canvas. getContext ("2d"); // then zoom the canvas and double the image to the context on the canvas. scale (2, 2); html2canvas (document. getElementById ('skinreport'), {allowTaint: false, taintTest: true, canvas: canvas, onrendered: function (canvas) {canvas. id = "mycanvas"; canvas. style. display = 'none'; document. body. appendChild (canvas); // generate base64 image data imgData = canvas. toDataURL (type); // var newImg = document. createElement ("img"); // newImg. src = dataUrl; // document. body. appendChild (newImg); // console. log (imgData); var _ fixType = function (type) {type = type. toLowerCase (). replace (/jpg/I, 'jpeg '); var r = type. match (/png | jpeg | bmp | gif/) [0]; return 'image/'+ r ;}; // process image data, replace mime type imgData = imgData. replace (_ fixType (type), 'image/octet-stream '); /*** save the file locally * @ param {String} data the image data to be saved locally * @ param {String} filename file name */var saveFile = function (data, filename) {var save_link = document. createElementNS (' http://www.w3.org/1999/xhtml ', 'A'); save_link.href = data; save_link.download = filename; var event = document. createEvent ('mouseevents'); event. initMouseEvent ('click', true, false, window, 0, 0, 0, 0, 0, false, 0, null ); save_link.dispatchEvent (event) ;}; // The downloaded question name var filename = aname + 'skin detection report' + (new Date ()). getTime () + '. '+ type; // download saveFile (imgData, filename) ;}, width: 1512, height: 15000}) }, 2500)} else {return ;}})

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.