Как сохранить 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>

Ответ 1

ПРИМЕЧАНИЕ. Этот ответ получен в 2015 году, а библиотека обновлена.
Проверьте ответы ниже для текущих реализаций.

Попробуйте это (обратите внимание, что 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>

Ответ 2

обновление 2018 года

Обратите внимание, что в новых версиях Html2Canvas параметр обновленного option is устарел и заменен обещаниями.

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

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 = "# border") не определены ни ширина, ни высота, поэтому указание высоты и ширины для оболочки содержимого сделало свое дело.

надеюсь это поможет