[javascript] html2canvas 로 html 이미지 저장

html2cavas 로 html 이미지 저장

---

html2canvas 를 이용하여 html을 canvas로 변환 한 후 이미지로 저장할 수 있다.

https://github.com/niklasvh/html2canvas/releases

js 다운 경로

html2canvas.js 를 추가하고

canvas 변환할 html DIV태그

<div id="canvas_div">

.

.

<img src="">

.

.

<div>

javascript  이미지 생성

function makeShareImage(){

element = $("#canvas_div");

html2canvas(element, {

onrendered : function(canvas) {

getCanvas = canvas;

upload();

}

});

}

javascript 이미지 업로드 form data 로 ajax 전송

function upload() {

var imageData = getCanvas.toDataURL("image/png");

var formData = new FormData();

formData.append('file', imageData);

$.ajax({

url : xxxxxxx ,

type : "POST",

dataType : "json",

data : formData,

processData : false,

contentType : false,

success : function(data) {

.

.

.

},

error : function(request, status, error) {

console.log(request, status, error);

}

});

}