Отправить скриншот! html2canvas

139

12 марта 2022, 05:20

Доброго времени суток)

Моя задача отправить скрин элемента на другую страницу или на почту. Использую для этого html2canvas. Скрин сделать получилось, даже вставить его на эту же страницу. Но как отправить его куда то дальше не могу разобраться. Пытался через localStorage, но не вышло. Какие идеи есть?

html2canvas(document.getElementById("auto")).then(function(canvas) {
  canvas.toDataURL();
  document.getElementById("screen").appendChild(my_screen);`

Answer 1

Воспользуйтесь упаковкой бинарных данных, которые Вы получаете методом toDataURL, в base64 и обратно при помощи встроенных в API браузера методов btoa() И atob().
То что вы раскодируете - просто подставьте в атрибут src тега img

let c = canvas.getContext('2d'); 
 
for(var i=0; i<10; i++) { 
  c.fillStyle = `hsl(${Math.random()*360},55%,55%)`; 
  c.fillRect(Math.random()*150, Math.random()*100, 50, 50); 
} 
   
function canvas2img() { 
  let str = btoa(canvas.toDataURL('png')); 
  console.log('str', str); 
  img.setAttribute('src', atob(str)); 
}

canvas, img {border:solid}

<canvas id="canvas" width=200 ></canvas> 
<button onclick="canvas2img()" >canvas2img</button> 
<img id="img">

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Создание всплывающего окна для chrome extension

Необходимо при двойном клике получить доступ к DOM вкладки и нарисовать в определённом месте всплывающее окно

123

javascript

Отправить скриншот! html2canvas

Создание всплывающего окна для chrome extension

Как правильно передать props

Дсесериализация части объекта как subobject

Автозаполнение логина и пароля в приложении под iOS