웹페이지 이미지로 만들기.

https://html2canvas.hertzen.com/

html2canvas - Screenshots with JavaScript

위 사이트에서 html2canvas.js  를 받는다. 

 

<script src="/html2canvas.js" language="JavaScript" type="text/javascript"></script>

<input type="button" value="저장"  onclick="makeShareImage();" style="width:80%;float:right;">

 

makeShareImage() 함수에서 웹 페이지를 이미지로 만든다. 

 

function makeShareImage(){
element = $(".wrap");
html2canvas(element, {

onrendered : function(canvas) {

//alert(canvas)
getCanvas = canvas;
upload();
}
});
}

 

class wrap 영역을 이미지로 만들것이다. 

body 전체를 이미지로 만들고 싶으면  element = $("body"); 이런식으로 변경해준다. 

 

 

function upload() {  
var imageData = getCanvas.toDataURL("image/png");
//alert(imageData)    // 이미지 데이터가 들어있다. 
//return;
var formData = new FormData();
formData.append('file', imageData);

alert(imageData)  // form 이나 ajax로 전송하여 이미지를 서버에 저장한다. 이미지 저장은 각 언어별로 다르다.


}