Este artículo presenta un ejemplo de cómo html2canvas guarda imágenes de alta definición en divs y las comparte con todos. Los detalles son los siguientes:
http://www.bootcdn.cn/ (puede buscar html2canvans)
1. Seleccione la versión html2canvas (esta versión se puede ampliar para garantizar imágenes claras)
La imagen del lienzo generada de forma predeterminada es muy borrosa en los dispositivos retina. Procesarla en una imagen 2x puede resolver este problema:
var w = $(#code).width();var h = $(#code).height();//Establezca el ancho y alto del lienzo en 2 veces el ancho y alto del contenedor var canvas = document .createElement(canvas);canvas.width = w * 2;canvas.height = h * 2;canvas.style.width = w + px;canvas.style.height = h + px;var contexto = canvas.getContext(2d);// Luego escale el lienzo y duplique la imagen para dibujar en el lienzo context.scale(2,2);html2canvas(document.querySelector(#code), { canvas: canvas, onrendered: function ( lienzo) { ... }});Método de descarga:
.on('click','.download',function(){ $('#mycanvas').remove(); var _height=$('.skinReport').height(); //Desplazarse hasta la parte superior$ ( 'html, body').animate({scrollTop:0}); if(confirm('¿Quieres descargar el informe de la prueba cutánea?')) { setTimeout(function(){ var canvas = document.createElement(lienzo), w=$('#skinReport').width(), h=$('#skinReport').height() lienzo.width = w * 2 lienzo.height = h * 2; ; lienzo.estilo.ancho = w + px lienzo.estilo.alto = h + px contexto; canvas.getContext(2d);// Luego escale el lienzo y duplique la imagen para dibujar en el lienzo context.scale(2,2); html2canvas(document.getElementById('skinReport'), { enableTaint: false, taintTest: true , lienzo: lienzo, renderizado: función (lienzo) { lienzo.id = mycanvas.style.display = 'none'; document.body.appendChild(canvas); //Generar datos de imagen base64 imgData = canvas.toDataURL(type); //var newImg = document.createElement(img); //newImg.src = dataUrl; appendChild(newImg); //console.log(imgData); var _fixType = función(tipo) { tipo = type.toLowerCase().replace(/jpg/i, 'jpeg'); var r = type.match(/png|jpeg|bmp|gif/)[0]; / Procesar datos de imagen y reemplazar el tipo mime imgData = imgData.replace(_fixType(type),'image/octet-stream'); /** * Guardar el archivo localmente* @param {String} data Datos de imagen que se guardarán localmente * @param {String} nombre de archivo nombre de archivo */ var saveFile = function(data, filename){ var save_link = document.createElementNS('http://www.w3.org/1999/xhtml ' , 'a'); save_link.href = datos; save_link.download = nombre de archivo; var event = document.createEvent('MouseEvents'); event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); El nombre del problema var filename = aname+'Skin Test Report' + (new Date()).getTime() + '.' // descargar saveFile(imgData,filename); }, ancho: 1512, alto: 15000 }) },2500) } más {retorno;Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.