Este artigo apresenta um exemplo de como o html2canvas salva imagens de alta definição em divs e as compartilha com todos.
http://www.bootcdn.cn/ (você pode pesquisar html2canvans)
1. Selecione a versão html2canvas (esta versão pode ser ampliada para garantir imagens nítidas)
A imagem da tela gerada por padrão fica muito desfocada em dispositivos retina. Processá-la em uma imagem 2x pode resolver este problema:
var w = $(#code).width();var h = $(#code).height();//Define a largura e a altura da tela como 2 vezes a largura e a altura do contêiner 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);//Em seguida, dimensione a tela e duplique a imagem para desenhar na tela context.scale(2,2);html2canvas(document.querySelector(#code), { canvas: canvas, onrendered: function ( tela) { ... }});Método de download:
.on('click','.download',function(){ $('#mycanvas').remove(); var _height=$('.skinReport').height(); //Rolar para o topo$ ( 'html, body').animate({scrollTop:0}); if(confirm('Deseja baixar o relatório do teste de pele?')) { setTimeout(function(){ var canvas = document.createElement(canvas), w=$('#skinReport').width(), h=$('#skinReport').height(); ; canvas.style.width = w + px; canvas.style.height = h + px; canvas.getContext(2d);//Em seguida, dimensione a tela e duplique a imagem para desenhar na tela context.scale(2,2); , canvas: canvas, onrendered: function(canvas) { canvas.id = mycanvas; canvas.style.display = 'none'; document.body.appendChild(canvas); //Gerar dados de imagem base64 imgData = canvas.toDataURL(type); //var newImg = document.createElement(img); anexarChild(newImg); //console.log(imgData); var _fixType = function(type) { type = type.toLowerCase().replace(/jpg/i, 'jpeg'); / Processar dados de imagem e substituir tipo MIME imgData = imgData.replace(_fixType(type),'image/octet-stream'); data Dados de imagem a serem salvos localmente * @param {String} nome do arquivo nome do arquivo */ var saveFile = function(data, filename){ var save_link = document.createElementNS('http://www.w3.org/1999/xhtml ' , 'a'); save_link.href = dados; save_link.download = nome do arquivo; event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); O nome do problema var filename = aname+'Skin Test Report' + (new Date()).getTime() + '.' // download saveFile(imgData,filename); }, largura:1512, altura:15000 }) },2500) } else { return;O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.