html to image send line notify

1. เพิ่มไลบรารี html2canvas: โหลดไลบรารี html2canvas ผ่าน CDN ในส่วน <head> ของ HTML

2. องค์ประกอบ HTML ที่ต้องการแปลงเป็นภาพ: สร้าง <div> ที่มี id="capture" ซึ่งเป็นองค์ประกอบที่เราต้องการแปลงเป็นภาพ

<h1>Hello, world!</h1>

<p>This is a paragraph that will be converted to an image.</p>

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>

html to image send line notify

ตัวอย่างการใช้งานในโค้ด Code.gs:

ตัวอย่างการใช้งานในโค้ด index.html:

1 ความคิดเห็น

ฟอร์มรายชื่อติดต่อ