Преобразование div в загружаемое изображение

Ответ 1

Увеличить разрешение, сделав больше пикселей

Тип разрешения равен плотности пикселей. Если вам требуется большее разрешение, тогда одна попытка создать больше пикселей - создать второй холст с пропорционально большей шириной и высотой, а затем использовать 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>

Ответ 2

Вот простой способ сделать это.

<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 в изображение, второй используется для загрузки изображения.

Update: Если вы хотите получить 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 для выполнения трюка.

Ответ 3

Один хороший подход, который мы использовали для работы в производственной системе для ежедневных пользователей 1M +, - это сделать это полностью на стороне сервера - создать браузер (Chrome); затем сделайте снимок экрана; затем передайте его клиенту. Результаты очень четкие/не пикселированные - все остальные варианты оказались довольно неровными.

Ответ 4

В HTML5 есть атрибут download. Например:

<a href="link_to_the_file" download="">Download</a>