//div 아이디를 가지고 canvas로만들어줌
var element = $("#mapHolder"); // global variable
var getCanvas; // global variable
$("#btn-Preview-Image").on('click', function () {
html2canvas(element, {
onrendered: function (canvas) {
getCanvas = canvas;
}
});
});
//다운로드
$("#btn-Convert-Html2Image").on('click', function () {
//익스플로러일경우
if (navigator.msSaveBlob) {
console.log('this is IE');
var URL=window.URL;
var BlobBuilder = window.MSBlobBuilder;
navigator.saveBlob=navigator.msSaveBlob;
var imgBlob = getCanvas.msToBlob();
if (BlobBuilder && navigator.saveBlob) {
var showSave = function (data, name, mimetype) {
var builder = new BlobBuilder();
builder.append(data);
var blob = builder.getBlob(mimetype||"application/octet-stream");
if (!name)
name = "Download.bin";
navigator.saveBlob(blob, name);
};
showSave(imgBlob, 'your_pic_name.png',"image/png");
}
}
//크롬 또는 다른브라우저
else {
var imgageData = getCanvas.toDataURL("image/png")
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
$("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
}
});