Cet article présente un exemple de la façon dont html2canvas enregistre les images haute définition dans des divs et les partage avec tout le monde. Les détails sont les suivants :
http://www.bootcdn.cn/ (vous pouvez rechercher html2canvans)
1. Sélectionnez la version html2canvas (cette version peut être agrandie pour garantir des images claires)
L'image du canevas générée par défaut est très floue sur les appareils Retina. La traiter en une image 2x peut résoudre ce problème :
var w = $(#code).width();var h = $(#code).height();//Définissez la largeur et la hauteur du canevas à 2 fois la largeur et la hauteur du conteneur var canvas = document .createElement(canvas);canvas.width = w * 2;canvas.height = h * 2;canvas.style.width = w + px;canvas.style.height = h + px;var contexte = canvas.getContext(2d);//Puis redimensionnez le canevas et doublez l'image pour dessiner sur le canevas context.scale(2,2);html2canvas(document.querySelector(#code), { canevas: canevas, onrenendered: function ( toile) { ... }});Méthode de téléchargement :
.on('click','.download',function(){ $('#mycanvas').remove(); var _height=$('.skinReport').height(); //Faites défiler vers le haut$ ( 'html, body').animate({scrollTop:0}); if(confirm('Voulez-vous télécharger le rapport du test cutané ?')) { setTimeout(function(){ var canvas = document.createElement(canvas), w=$('#skinReport').width(), h=$('#skinReport').height(); ; toile.style.width = w + px; toile.style.hauteur = h + var contexte = canvas.getContext(2d);//Puis redimensionnez le canevas et doublez l'image pour dessiner sur le canevas context.scale(2,2); html2canvas(document.getElementById('skinReport'), {allowTaint: false, taintTest: true , canevas : toile, rendu : fonction (canvas) { canvas.id = mycanvas; canvas.style.display = 'none'; document.body.appendChild(canvas); //Générer des données d'image base64 imgData = canvas.toDataURL(type); //var newImg = document.createElement(img); //newImg.src = dataUrl; appendChild(newImg); //console.log(imgData); var _fixType = fonction(type) { type = type.toLowerCase().replace(/jpg/i, 'jpeg'); var r = type.match(/png|jpeg|bmp|gif/)[0]; / Traiter les données d'image et remplacer le type MIME imgData = imgData.replace(_fixType(type),'image/octet-stream'); /** * Enregistrez le fichier localement* @param {String}; data Données d'image à enregistrer localement * @param {String} nom de fichier nom de fichier */ 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); Le nom du problème var filename = aname+'Skin Test Report' + (new Date()).getTime() + '.' + type; }, largeur : 1512, hauteur : 15000 }) },2500) } else { return ; } })Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.