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

104

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 вкладки и нарисовать в определённом месте всплывающее окно

javascript

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

Мне нужно чтобы по нажатию на карточку с фильмом переходило на страницу где будет больше деталей про этот фильмКак правильно я должен передать...

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

Допустим есть некий json объект, и мне не нравится расположение полей в нем:

169

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

Каким образом можно реализовать сохранение пароля в цепочке ключей, чтобы при входе в приложение на экране входа над клавиатурой показывалось...

149