2013-09-02 5 views
20

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

Я планирую сделать небольшое онлайн-приложение для iPad.

Одна из функций, которая является обязательной, имеет кнопку «Сохранить», которая может сохранять полную веб-страницу в качестве изображения и сохранять это изображение в рулоне камеры iPad. Я хочу сохранить полное содержимое div, а не только видимую область.

Я искал коротко онлайн, но не мог найти много документации ни о чем. Я много нашел на холсте HTML5. Вот код, я соединял:

<script> 
function saveimg() 
{ 
    var c = document.getElementById('mycanvas'); 
    var t = c.getContext('2d'); 
    window.location.href = image; 

    window.open('', document.getElementById('mycanvas').toDataURL()); 
} 
</script> 

<div id="mycanvas"> 
This is just a test<br /> 
12344<br /> 
</div> 

<button onclick="saveimg()">Save</button> 

Хотя, я получаю эту ошибку:

TypeError: c.getContext is not a function 

Это приложение будет построен только с HTML, CSS и JQuery (или другими библиотеками JavaScript).

+0

Возможный дубликат [Как снять снимок экрана с помощью JavaScript?] (Http://stackoverflow.com/questions/6887183/how-to-take-screen-shot-of-a-div-with- javascript) –

+0

@GlenSwift - Спасибо за это, но код примера в этом сообщении не работает. – Fizzix

+0

'c.getContext' не является функцией, потому что' mycanvas' является просто элементом div, а не элементом 'canvas'. Только «холст» имеет контекст. – CheeseWarlock

ответ

13

Есть несколько таких же вопросов (1, 2). Один из способов сделать это - использовать холст. Here's a working solution. Here вы можете увидеть некоторые примеры использования этой библиотеки.

+0

дает мне следующую ошибку каждый раз, когда я его использую. html2canvas (document.body) .then (функция (холст)) { document.body.appendChild (canvas); }); ТипError: undefined не является обязательной. – noj

+1

Информация предоставлена ​​для получения справки. Какая функция не определена? Когда и где происходит ошибка? Я рекомендую вам создать новый вопрос для этого –

Смежные вопросы