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

Я делаю снимок экрана по щелчку с помощью 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>

html2canvas
person TheGrayVacuum    schedule 27.07.2015    source источник

Ответы (3)


arrow_upward
58
arrow_downward

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

Попробуйте это (обратите внимание, что он использует атрибут загрузки. См. таблицу поддержки caniuse для браузеров, которые поддерживают атрибут загрузки)

<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>
person 2pha    schedule 27.07.2015
comment
О, функция toDataURL также принимает второй параметр качества от 0 до 1, если вы хотите установить качество/размер файла jpeg. - person 2pha; 27.07.2015
comment
Спасибо @2pha. Это сработало для меня. Очень признателен. Сначала было сохранено дополнительное пространство за пределами исходного изображения. Я смог исправить, добавив стиль в div. Например, чтобы сохранить изображение размером 512x512, я сделал следующее: ‹div id=imagesave style=max-width:512px;max-height:512px;› - person TheGrayVacuum; 28.07.2015
comment
Спасибо за это. Однако, когда я применяю это, все работает, но фон черный, а не белый. Есть идеи, как это исправить? - person Arko Elsenaar; 08.06.2016
comment
@ArkoElsenaar добавьте CSS background-color:white к вашему элементу. или посмотрите другие решения здесь: stackoverflow.com/questions/14584946/ - person Shoham; 12.07.2016
comment
Это идеальное решение, вы можете изменить jpg на png a.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); - person Ahmed Al Bermawy; 26.04.2017
comment
png на самом деле используется по умолчанию, поэтому toDataURL() на самом деле возвращает то же самое, что и toDataURL("image/png"). Я просто поместил его туда, чтобы продемонстрировать, что вы можете запросить тип. Чтобы получить jpg, вы должны сделать toDataURL("image/jpeg") - person 2pha; 04.05.2017

arrow_upward
31
arrow_downward

обновление 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

На основе ответа Krzysztof

document.getElementById("download").addEventListener("click", function() {
    
    html2canvas(document.querySelector('#boundary')).then(function(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=#boundary) не имеет определенной ширины или высоты, поэтому указание height и width для оболочки содержимого помогло мне.

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

person chebaby    schedule 23.07.2018
comment
У меня это отлично работало в Chrome 68, FireFox 61 и Safari 11.1. - person Christophe Geers; 24.08.2018
comment
Замените html2canvas(document.querySelector('#boundary')) на html2canvas(document.querySelector('#boundary'),{useCORS: true,allowTaint: true,}), если у вас есть изображения. - person Chirag; 22.07.2020
comment
Да, пример работает нормально, но похоже, что он не захватывает нужные скриншоты, он захватывает только часть тела. - person Mahmood Hussain; 22.11.2020

arrow_upward
4
arrow_downward

Это последний код, который преобразуется в PNG.

      $("#btnSave2").click(function() {
        html2canvas($("#widget"), {
          onrendered: function(canvas) {
            saveAs(canvas.toDataURL(), 'canvas.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);
        }
      }
person Royal.O    schedule 11.03.2020