index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.4.js"></script>
<script src="https://cdn.jsdelivr.net/gh/semicon/html2image/html2canvas.min.js"></script>
</head>
<body>
<!-- start capture area -->
<div id="myHtml" style="background-color: #F0F0F1; color: #00cc65; width: 500px; margin:20px; padding:25px;">
<h2 style="color: #00f;">
Html to canvas, and canvas to proper image
</h2>
<div style="float: left; width:110x; padding-right:10px;" >
<img src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1adgLN.img" style="width: 100px;height:100px;" />
</div>
<div style="float: left; width:110x; padding-right:10px;" >
<img src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1adnk5.img" style="width: 100px;height:100px;" />
</div>
<div style="color: #3e4b51; padding-left:10px;">
<b>รถยนต์ไฟฟ้าไซต์มินิ Geely Panda Mini</b>
<br> ดีไซน์ภายนอกของตัวรถ Geely Panda Mini จะมาในสไตล์รถทรงกล่อง ซึ่งเป็นดีไซน์ที่นิยมใช้ในรถยนต์ไฟฟ้าขนาดเล็ก และสำหรับรุ่นพิเศษ Little Yellow Duck Limited Edition จะมาพร้อมกับสีตัวถังสีเหลือง พร้อมด้วยการตกแต่งด้วยรูปเป็ดสุดน่ารักบริเวณประตูด้านข้างทั้ง 2 ฝั่ง รวมถึงตัวล้อยังถูกเปลี่ยนสีเป็นสีเหลืองอีกด้วย
</div>
</div>
<!-- end capture area -->
<div style="float: left; margin:20px;">
<input id="btn_convert" type="button" value="Convert to Image" />
<br />
<h3>Image Preview :</h3>
<div id="previewImg"></div>
</div>
<script>
$(document).ready(function () {
$("#btn_convert").on('click', function () {
html2canvas(document.getElementById("myHtml"),
{
allowTaint: true,
useCORS: true
}).then(function (canvas) {
/** Download file */
//const anchorTag = document.createElement("a");
//document.body.appendChild(anchorTag);
//anchorTag.download = "filename.png";
//anchorTag.href = canvas.toDataURL();
//anchorTag.target = '_blank';
//anchorTag.click();
/** preview image */
document.getElementById("previewImg").appendChild(canvas);
/** send line */
const imgFile = canvas.toDataURL("image/png")
google.script.run.withSuccessHandler().sendNotify(imgFile)
});
});
});
</script>
</body>
</html>
code.gs
const token = ["xxxxxxxxxxx"]
function doGet() {
return HtmlService.createTemplateFromFile('index')
.evaluate()
.setTitle('My Project')
.setFaviconUrl('https://semicon.github.io/img/taksila_logo.png')
.addMetaTag('viewport', 'width=device-width , initial-scale=1')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
}
function sendNotify(imgFile){
Logger.log(imgFile)
const splitBase = imgFile.split(','),
type = splitBase[0].split(';')[0].replace('data:', '')
const byteCharacters = Utilities.base64Decode(splitBase[1])
const img = Utilities.newBlob(byteCharacters, type)
img.setName("gggg.png")
const imgLine = img
const msgData = {
"imageFile": imgLine,
"message": "Html to canvas, and canvas to proper image"
};
const options = {
"method": "post",
"payload": msgData,
"headers": {
"Authorization": "Bearer " + token
}
}
UrlFetchApp.fetch("https://notify-api.line.me/api/notify", options);
}
/** Ref: https://html2canvas.hertzen.com/ */