不無聊的前端切版課：第7章── canvas截圖的招式

前情提要

想在在JavaScript中，用HTML5的Canvas元素來剪取畫面並存成SVG或PNG。

程式寫法(一)

首先，需要在HTML中創建一個Canvas元素
<canvas id="myCanvas"></canvas>

在JavaScript中，使用canvas.getContext('2d')方法來獲取2D繪圖環境

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

使用ctx.drawImage()方法將要剪取的圖片繪製到Canvas上

var imageObj = new Image();
imageObj.onload = function() {
  ctx.drawImage(imageObj, 0, 0);
};
imageObj.src = 'example.png';

使用canvas.toDataURL()方法將Canvas轉換成SVG或PNG格式的圖片

// 轉換為SVG
var svgData = canvas.toDataURL('image/svg+xml');
// 轉換為PNG
var pngData = canvas.toDataURL('image/png');

最後，可以將轉換後的圖片下載或顯示出來

// 下載SVG
var link = document.createElement('a');
link.download = 'image.svg';
link.href = svgData;
link.click();

// 顯示PNG
var pngImg = new Image();
pngImg.src = pngData;
document.body.appendChild(pngImg);

程式寫法(二)

使用html2canvas

這邊介紹一個用CDN的小訣竅，官網沒有寫：

<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

接下來把要抓取的元素找到，加上id為capture就可以使用JS：

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});

程式寫法(三)

使用DOM to IMG

<script src="https://unpkg.com/dom-to-image@2.6.0/dist/dom-to-image.min.js"></script>

function captureScreenshot(element) {
  return new Promise((resolve, reject) => {
    domtoimage.toPng(element)
      .then((dataUrl) => {
        resolve(dataUrl);
      })
      .catch((error) => {
        reject(error);
      });
  });
}


//放到頁面上確認有這個畫面
captureScreenshot(document.getElementById('dick')).then((value) => {$('<img>').attr('src',value).appendTo($('body'));

}).catch((error) => {
  console.error(error);
});

這樣會轉成base64然後我用appendTo把他丟到body上面，確認圖片會出來。

心得

以上三招都是實用又簡單的方法哦！(,,・ω・,,)
是不是沒有料到有三招呢，
寫前端不怕你沒招，只怕你看了招數之後還不趕緊去嘗試搞看看！
喜歡這系列記得追蹤、收藏唷！

未來會有更多有趣的API以及小項目的介紹呢！