Jak zapisać zawartość elementu div jako obrazu?

Question

Zasadniczo robię to, co nagłówek stwierdza, próbując zapisać zawartość div jako obrazu.

Mam zamiar zrobić małą aplikację online na iPada.

Jedną z funkcji, która jest koniecznością, jest przycisk "Zapisz", który umożliwia zapisanie całej strony jako obrazu i zapisanie tego obrazu na rolce aparatu iPada. Chcę zapisać pełną zawartość elementu div, a nie tylko widoczny obszar.

Wyszukiwanie przez krótki czas w Internecie, ale nie mogłem znaleźć wiele dokumentacji na nic. Znalazłem wiele na płótnie HTML5. Oto kod ułożyła:

<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> 

Chociaż, ja dostaję ten błąd:

TypeError: c.getContext is not a function 

Ta aplikacja zostanie zbudowany wyłącznie z HTML, CSS i jQuery (lub innych bibliotek JavaScript).

Answer 1

Jest kilka tego samego pytania (1, 2). Jednym ze sposobów na to jest użycie płótna. Here's a working solution. Here można zobaczyć kilka przykładów użycia tej biblioteki.