1. เพิ่มไลบรารี html2canvas: โหลดไลบรารี html2canvas ผ่าน CDN ในส่วน <head> ของ HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
2. องค์ประกอบ HTML ที่ต้องการแปลงเป็นภาพ: สร้าง <div> ที่มี id="capture" ซึ่งเป็นองค์ประกอบที่เราต้องการแปลงเป็นภาพ
<div id="capture">
<h1>Hello, world!</h1>
<p>This is a paragraph that will be converted to an image.</p>
<img src="https://via.placeholder.com/150" alt="Sample Image">
</div>
3. ปุ่มสำหรับการจับภาพ: เพิ่มปุ่ม <button> ที่มี id="btnCapture" ซึ่งเมื่อกดปุ่มจะทำการจับภาพ
<button id="btnCapture">Capture and Send to LINE</button>
4. การจับภาพ: ใช้ html2canvas เพื่อจับภาพขององค์ประกอบที่มี id="capture" เมื่อกดปุ่ม จากนั้นแปลง canvas เป็น Data URL
ตัวอย่างการใช้งานในโค้ด Code.gs:
function doGet() {
const html = HtmlService.createTemplateFromFile("index")
return html.evaluate()
.setTitle("Project Kru Chian")
.addMetaTag('viewport', 'width=device-width , initial-scale=1')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}
/** Send LINE notification **/
function sendReportNotify(imgDataaURL){
const token = 'YOUR_LINE_CHANNEL_ACCESS_TOKEN'
const splitBase = imgDataaURL.split(','),
type = splitBase[0].split(';')[0].replace('data:', '')
const byteCharacters = Utilities.base64Decode(splitBase[1])
const img = Utilities.newBlob(byteCharacters, type)
img.setName("capture.png")
const msg = "\nScreenshot captured and image sent."
const imgLine = img
const msgData = {
"message": msg,
"imageFile": imgLine,
};
const options = {
"method": "post",
"payload": msgData,
"headers": {
"Authorization": "Bearer " + token
}
}
UrlFetchApp.fetch("https://notify-api.line.me/api/notify", options);
}
ตัวอย่างการใช้งานในโค้ด index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML to Image with Images</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<style>
#capture {
padding: 10px;
background: #f5da55;
}
img {
max-width: 100%;
}
</style>
</head>
<body>
<div id="capture">
<h1>Hello, world!</h1>
<p>This is a paragraph that will be converted to an image.</p>
<img src="https://via.placeholder.com/150" alt="Sample Image">
</div>
<button id="btnCapture">Capture and Send to LINE</button>
<script>
document.getElementById('btnCapture').addEventListener('click', function() {
const captureElement = document.getElementById('capture');
const images = captureElement.querySelectorAll('img');
const imagePromises = Array.from(images).map(img => {
return new Promise((resolve, reject) => {
if (img.complete) {
resolve();
} else {
img.onload = resolve;
img.onerror = reject;
}
});
});
Promise.all(imagePromises).then(() => {
html2canvas(captureElement, {
useCORS: true,
logging: true
}).then(canvas => {
const imgData = canvas.toDataURL("image/png");
google.script.run.sendReportNotify(imgData)
}).catch(err => {
console.error('Error capturing image:', err);
});
}).catch(err => {
console.error('Error loading images:', err);
});
});
</script>
</body>
</html>
