2013-09-02 2 views
20

기본적으로, 나는 diving의 내용을 이미지로 저장하려고 시도하면서 heading states를하고있다.div의 내용을 이미지로 저장하는 방법은 무엇입니까?

iPad 용 온라인 응용 프로그램을 만들 계획입니다.

필수 기능 중 하나는 전체 웹 페이지를 이미지로 저장하고 iPad의 카메라 롤에 저장할 수있는 '저장'버튼이 있어야한다는 것입니다. 보이는 영역뿐만 아니라 div의 전체 내용을 저장하고 싶습니다.

온라인으로 간단히 검색했지만 아무 것도 찾을 수 없습니다. HTML5 Canvas에서 많은 것을 발견했습니다. 여기에 내가 함께 넣어 몇 가지 코드 :

TypeError: c.getContext is not a function 

이 응용 프로그램은 단지 HTML, CSS와 jQuery를 (또는 다른 자바 스크립트 라이브러리)로 구축됩니다 비록

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

, 나는이 오류를 얻고있다.

+0

[JavaScript로 div의 스크린 샷을 찍는 방법] (http://stackoverflow.com/questions/6887183/how-to-take-screen-shot-of-a-div-with- javascript) –

+0

@GlenSwift - 고맙습니다.하지만 해당 게시물의 예제 코드는 작동하지 않습니다. – Fizzix

+0

'my.getContext'는'mycanvas'가'canvas' 요소가 아니라 단지 div이기 때문에 함수가 아닙니다. '캔버스'만이 문맥을 가지고 있습니다. – CheeseWarlock

답변

13

동일한 질문 (1, 2)이 몇 가지 있습니다. 그것을하는 한 가지 방법은 캔버스를 사용하는 것입니다. Here's a working solution. Here이 라이브러리를 사용하는 몇 가지 실제 예를 볼 수 있습니다.

+0

다음 오류가 발생합니다. 나는 그것을 사용할 때마다. html2canvas (document.body) .then (function (canvas) { document.body.appendChild (canvas); }); TypeError : undefined가 함수가 아닙니다. – noj

+1

문제를 해결하는 데 필요한 정보가 충분하지 않습니다. 어떤 기능이 정의되지 않습니까? 언제 어디에서 오류가 발생합니까? 이 질문에 새로운 질문을 던지시기 바랍니다. –

관련 문제