In diesem Artikel wird ein Beispiel dafür vorgestellt, wie html2canvas hochauflösende Bilder in Divs speichert und sie mit allen teilt. Die Details sind wie folgt:
http://www.bootcdn.cn/ (Sie können nach html2canvans suchen)
1. Wählen Sie die html2canvas-Version aus (diese Version kann vergrößert werden, um klare Bilder zu gewährleisten)
Das standardmäßig erzeugte Leinwandbild ist auf Retina-Geräten sehr unscharf. Durch die Verarbeitung in ein 2x-Bild kann dieses Problem gelöst werden:
var w = $(#code).width();var h = $(#code).height();//Setzen Sie die Breite und Höhe der Leinwand auf das Zweifache der Breite und Höhe des Containers. 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);//Skalieren Sie dann die Leinwand und verdoppeln Sie das Bild, um auf der Leinwand zu zeichnen context.scale(2,2);html2canvas(document.querySelector(#code), { canvas: canvas, onrendered: function ( Leinwand) { ... }});Download-Methode:
.on('click','.download',function(){ $('#mycanvas').remove(); var _height=$('.skinReport').height(); //Nach oben scrollen$ ( 'html, body').animate({scrollTop:0}); if(confirm('Möchten Sie den Skin-Testbericht herunterladen?')) { 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 + var context = canvas.getContext(2d);//Skalieren Sie dann die Leinwand und verdoppeln Sie das Bild, um auf der Leinwand zu zeichnen 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); //base64-Bilddaten generieren imgData = canvas.toDataURL(type); //var newImg = document.createElement(img); //newImg.src = dataUrl; 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; / Bilddaten verarbeiten und Mime-Typ ersetzen imgData = imgData.replace(_fixType(type),'image/octet-stream'); /** * Datei lokal speichern* @param {String} data Bilddaten, die lokal gespeichert werden sollen * @param {String} Dateiname Dateiname */ 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; event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, 0, null); // Nach dem Herunterladen Der Problemname var filename = aname+'Skin Test Report' + (new Date()).getTime() + '.' }, width:1512, height:15000 }) },2500) } else { return; })Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.