Загрузить HTML5 как изображение

Question

Как загрузить мой div как изображение? (В JavaScript, Jquery или PHP)

У меня есть простой HTML код:

<div id="downloadThis"> 
    <div style="width: 200px; height: 100px; background: red"></div> 
    <div style="width: 200px; height: 100px; background: blue"></div> 
</div> 
<button id="downloader" onClick="download('downloadThis')">Download</button> 

И я хочу, чтобы загрузить его как изображение:

<script> 
    function download(id){ 
    document.getElementById(id).downloadAsImage("jpeg"); 
    } 
</script> 

Answer 1

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

В Javascript нет стандартного API для снятия скриншотов с отрисованных страниц. В конце концов, это не работа веб-браузера, а ваши системные инструменты. Но трюк, который вы можете сделать, заключается в том, чтобы отдельно отобразить часть вашего DOM (или DOM DOM) в <canvas> и сохранить содержимое этого холста для изображения. В этом ответе объясняется общая механика такого процесса: https://stackoverflow.com/a/6678156/1542343

Теперь вы можете сказать, что есть онлайн-сервисы, которые позволяют загружать скриншот веб-сайта, выполненного в разных браузерах, но в основном эти службы выполняют браузер на сервере и использовать инструменты операционной системы, чтобы сделать снимок экрана с нужной страницы. Они могли бы также делать скриншоты Microsoft Word на своих серверах или что-то еще, по сути, это не имеет ничего общего с веб-браузерами.

Answer 2

Браузеры не позволяют программистам экспортировать содержимое Divs по очень хорошим соображениям безопасности - ваша банковская информация, вероятно, находится внутри div.

Что вы можете сделать, это отправить html + css, который создал div в библиотеку, которая повторно отображает этот html + css таким образом, который может быть отображен.

Вот 2 библиотеки, пересборку HTML + CSS:

html2canvas использует грубую силу, чтобы преобразовать все HTML + CSS в холст рисунок. Он отлично работает для основного контента, но не подходит для более сложного контента. Он также имеет ограничения безопасности и не может повторно отображать содержимое, загруженное из другого домена, чем сама веб-страница. Ссылка: http://html2canvas.hertzen.com/

PhantomJS - это серверная библиотека, которая использует webkit для повторной обработки html + css. Это создаст более истинное изображение из html + css, которое вы отправите ему, потому что он использует механизм браузера webkit для выполнения рендеринга. Ссылка: http://phantomjs.org/