Как сохранить img на локальный компьютер пользователя с помощью HTML2canvas

Я рендеринг скриншота onclick с HTML2canvas .4.1 и хотите сохранить изображение на локальном компьютере пользователя. Как этого можно достичь? Обратите внимание, что я новичок, поэтому фактический код будет наиболее полезен для меня.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="html2canvas.js"></script>

<button id="save_image_locally">download img</button>

   <div id="imagesave">
      <img id='local_image' src='img1.jpg'>
   </div>

<script>

    $('#save_image_locally').click(function(){

            html2canvas($('#imagesave'), 
             {
                onrendered: function (canvas) {
                    var img = canvas.toDataURL("image/png");
                    alert('This will currently open image in a new window called "data:". Instead I want to save to users local computer. Ideally as a jpg instead of png.');
                    window.open(img);
                }
             });
            });

</script>
17
html2canvas

2 ответов

попробуйте это (Обратите внимание, что Safari открывает изображение на той же вкладке вместо его загрузки; атрибут загрузки не поддерживается в Safari)

<script>

  $('#save_image_locally').click(function(){
    html2canvas($('#imagesave'), 
    {
      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 = 'somefilename.jpg';
        a.click();
      }
    });
  });

</script>
36

обновить 2018

обратите внимание, что в новой версии Html2Canvas на onrendered и устаревший и заменяется обещаниями.

чтобы иметь возможность загружать изображения на компьютер пользователя, вы можете использовать что-то вроде этого:

HTML-код

<html>
    <head></head>
    <body>
        <div id="boundary">
            <div class="content">
                <p>My content here</p>
            </div>
        </div>

        <button id="download">Download</button>

    </body>
</html>

Javascript

на основе Кшиштоф ответ

document.getElementById("download").addEventListener("click", function() {

    html2canvas(document.querySelector('#boundary')).then(function(canvas) {

        console.log(canvas);
        saveAs(canvas.toDataURL(), 'file-name.png');
    });
});


function saveAs(uri, filename) {

    var link = document.createElement('a');

    if (typeof link.download === 'string') {

        link.href = uri;
        link.download = filename;

        //Firefox requires the link to be in the body
        document.body.appendChild(link);

        //simulate click
        link.click();

        //remove the link when done
        document.body.removeChild(link);

    } else {

        window.open(uri);

    }
}

проблему

действительно, я смог загрузить изображение, но это было пробел ...возможной причиной этого (по крайней мере, в моем случае) было то, что оболочка содержимого (id=" # граница") не имеет определенной ширины или высоты, поэтому указание высота и a ширина до фантик контент сделал трюк для меня.

надеюсь, что это помогает

4