2013-07-26 3 views
-5

나는 코드이에서div의 내용을 이미지로 저장하는 방법은 무엇입니까?

<div style="background:url('upload/image1.jpg'); width:300px; height:400px; position:relative;"> 
    <br/> 
    <div style="position: absolute; top:300px; overflow:hidden; height:100px; width:300px;" id="overlay">This is a sample text</div> 
    <br/> 
</div> 

전 사업부의 배경으로 이미지를 사용하고 사용하고 있습니다. 그리고 div 오버레이처럼 이미지에 오벨 레이 텍스트를 추가하십시오.

오버레이 텍스트를 추가 한 후 기본 div를 새 이미지로 저장하려고합니다. 어떻게?

+2

한 방법이 사용된다 [html2canvas (http://html2canvas.hertzen.com/) 유래 –

+0

이미 논의 http://stackoverflow.com/questions/14595541/capture-div-into- image-using-html2canvas – Massanu

+1

도 여기에서 설명합니다. http://stackoverflow.com/questions/13252773/converting-contents-of-a-div-into-an-image – AnaMaria

답변

3
먼저와 이미지로 캔버스를 저장 html2canvas 같은 것을 사용하고 자바 스크립트를 사용해야합니다

:이 이미지와 HTML을 렌더링

window.open(document.getElementById('canvas_id').toDataURL('image/png')); 

PNG 파일 데이터 URL로 이미지를 변환 그런 다음 해당 URL을 새 창에서 열어 이미지 다운로드를 요청하십시오.

관련 문제