This article introduces an example of how html2canvas saves high-definition pictures in divs and shares them with everyone. The details are as follows:
http://www.bootcdn.cn/ (you can search html2canvans)
1. Select the html2canvas version (this version can be enlarged to ensure clear images)
The canvas image generated by default is very blurry on retina devices. Processing it into a 2x image can solve 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 scale the canvas and double the image to draw on the canvas context.scale(2,2);html2canvas(document.querySelector(#code), { canvas: canvas, onrendered: function (canvas) { ... }});Download method:
.on('click','.download',function(){ $('#mycanvas').remove(); var _height=$('.skinReport').height(); //Scroll to the top$( 'html, body').animate({scrollTop:0}); if(confirm('Do you want to download the skin test 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 scale the canvas and double the image to draw on the canvas context.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 and replace mime type imgData = imgData.replace(_fixType(type),'image/octet-stream'); /** * Save the file locally* @param {String} data 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, false, false, false, 0, null); save_link.dispatchEvent(event); }; // After downloading The problem name var filename = aname+'Skin Test Report' + (new Date()).getTime() + '.' + type; // download saveFile(imgData,filename); }, width:1512, height:15000 }) },2500) } else { return; } })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.