преобразование из HTML в PNG изображение при первом нажатии кнопки - PullRequest
Новая
       8

преобразование из HTML в PNG изображение при первом нажатии кнопки

0 голосов
/ 22 мая 2018

Я преобразовываю часть html-элементов в canvas и преобразую это в png-изображение.Он работает нормально, но проблема в том, что при первом клике он не конвертирует html в convas и canvas в png.// HTML To Image при нажатии кнопки 

$("#btn-Convert-Html2Image").on('click', function () {
html2canvas(element, {
  onrendered: function (canvas) {
    getCanvas = canvas;
  }
});
setTimeout(function() {
    var imgageData = getCanvas.toDataURL("image/png");
    var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
    $("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
},400)

    });

Это что-то не так.Пожалуйста, смотрите ссылку скрипка

Ответы [ 2 ]

0 голосов
/ 22 мая 2018

Хорошие новости: вы делаете все правильно!

Последняя строка кода гласит: установите атрибут кнопки загрузки для вашего изображения.Хорошо, но поздно.Вы уже нажали кнопку.Поэтому, когда вы снова нажмете кнопку, будет загружено изображение с последнего запуска, и будет сгенерировано новое изображение, связанное с кнопкой.

Вы просто должны принудительно загрузить ПОСЛЕ созданного вами изображения.Например, принудительно загружая URI ...

0 голосов
/ 22 мая 2018

При первом щелчке вы привязываете png dataURL к #btn-Convert-Html2Image привязке, и когда во второй раз вы нажимаете на эту ссылку, уже загруженные данные загружаются, вы можете использовать этот подход для решения этой проблемы. 

function downloadURI(uri, name) {
  var link = document.createElement("a");
  link.download = name;
  link.href = uri;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  delete link;
}


$("#btn-Convert-Html2Image").on('click', function () {
  html2canvas(element, {
    onrendered: function (canvas) {
      var imgageData = canvas.toDataURL("image/png");
      var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
      downloadURI(newData,"your_pic_name.png");
    }
  });
});

JSFiddle link

...