Это код, который я использую для преобразования div в изображение и загрузки, используя html2canvas.js
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://html2canvas.hertzen.com/build/html2canvas.js"></script> <style> #download{ margin:10% 40%; } .download-btn{ padding:10px; font-size:20px; margin:0 20px; } #test{ background:#3399cc; padding:50px; } .x2{ transform: scale(2,2); } </style> <div id="download"> <h1 id="test">Testing Download</h1> </div> <center> <button id="download-window" class="download-btn">New Window</button> <button id="download-png" class="download-btn">Download png</button> <button id="download-jpg" class="download-btn">Download jpg</button> <button id="download-pngx2" class="download-btn">Download pngx2</button> </center> <script> $('#download-window').click(function(){ html2canvas($('#download'), { onrendered: function (canvas) { var img = canvas.toDataURL("image/png"); window.open(img); } }); }); $('#download-png').click(function(){ html2canvas($('#download'), { onrendered: function (canvas) { var a = document.createElement('a'); a.href = canvas.toDataURL("image/png"); a.download = 'image.png'; a.click(); } }); }); $('#download-pngx2').click(function(){ $('#download').addClass('x2'); html2canvas($('#download'), { onrendered: function (canvas) { var a = document.createElement('a'); a.href = canvas.toDataURL("image/png"); a.download = 'image.png'; a.click(); } }); }); $('#download-jpg').click(function(){ html2canvas($('#download'), { onrendered: function (canvas) { var a = document.createElement('a'); // toDataURL defaults to png, so we need to request a jpeg, then convert for file download. a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream"); a.download = 'image.jpg'; a.click(); } }); }); </script> Здесь созданное изображение не имеет хорошего разрешения.
Есть ли другой способ генерации изображения с хорошим разрешением?
Можно ли использовать php-функцию для выполнения этой задачи?
Увеличьте разрешение, сделав больше пикселей
Тип разрешения равен плотности пикселей. Если вы хотите получить большее разрешение, тогда одна попытка создать больше пикселей – создать второй холст с пропорционально большей шириной и высотой, а затем использовать secondaryContext.scale & secondaryContext.drawImage(mainCanvas,0,0) для увеличения и рисования основного содержимого холста на второй холст. Используйте этот большой холст, например, на принтере.
Вот пример, который увеличивает плотность пикселей за счет некоторой ясности. Вы не указываете, почему вы хотите большего разрешения, но этот пример полезен, например, если вы выводите изображение на принтер. Примечание. Печатная страница будет более четкой, чем изображение с увеличенной плотностью, которое вы подаете на принтер, потому что принтер печатает с более высокой плотностью (возможно, разрешение принтера 300 точек на дюйм, а не 72 / 96ppi).
var divX2=document.createElement('canvas'); divAt2X('#download',1.5); $('#go').on('click',function(){ // save var a = document.createElement('a'); a.href = divX2.toDataURL("image/png"); a.download = 'image.png'; a.click(); }); function divAt2X(id,upscale){ var w=$(id).width(); var h=$(id).height(); html2canvas($(id),{ onrendered: function(canvasDiv){ // scale up ctx=divX2.getContext('2d'); divX2.width=w*upscale; divX2.height=h*upscale; ctx.scale(upscale,upscale); ctx.drawImage(canvasDiv,0,0); } } ); }
#download{ margin:10% 20%; } .download-btn{ padding:10px; font-size:20px; margin:0 20px; } #test{ background:#3399cc; padding:50px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src='https://html2canvas.hertzen.com/build/html2canvas.js'></script> <button id='go'>Download 1.5X</button><span>(IE/Edge don't support download)</span> <div id="download"><h1 id="test">Testing Download</h1></div>
Вот простой способ сделать это.
<div id="my-node"> You will get a image downloaded. </div> <button id="foo">download img</button> <script> var node = document.getElementById('my-node'); var btn = document.getElementById('foo'); btn.onclick = function() { node.innerHTML = "I'm an image now." domtoimage.toBlob(document.getElementById('my-node')) .then(function(blob) { window.saveAs(blob, 'my-node.png'); }); } </script>
Вот демо: это JSFiddle .
В этой скрипте используются две библиотеки:
dom-to-image : https://github.com/tsayen/dom-to-image
FileSaver.js : https://github.com/eligrey/FileSaver.js/
Первый используется для превращения dom в изображение, второй используется для загрузки изображения.
Обновление: если вы хотите получить img base64 вместо того, чтобы просто загружать img в качестве формата blob. Вы можете сделать так:
domToImage .toBlob(document.getElementById("my-node")) .then(function(blob) { saveBlobAsFile(blob, "XX.png"); }); // this function is to convert blob to base64 img function saveBlobAsFile(blob, fileName) { var reader = new FileReader(); reader.onloadend = function() { var base64 = reader.result; var img = document.createElement("img"); img.classList.add("me-img"); img.setAttribute("src", base64); // insert the img to dom document.getElementById("bar").appendChild(img); }; reader.readAsDataURL(blob); }
Здесь FileSaver.js не требуется, мы используем html5 api FileReader, чтобы сделать трюк.
Один хороший подход, который мы использовали для работы в производственной системе для ежедневных пользователей 1M +, – это сделать это полностью на стороне сервера – создать браузер (Chrome); затем сделайте снимок экрана; затем передайте его клиенту. Результаты очень четкие / не пикселированные – все остальные варианты оказались довольно неровными.
В HTML5 есть атрибут, называемый download . Например:
<a href="link_to_the_file" download="">Download</a>