Html2canvas + Fabricjs 應用

前言
#

之前在專案上有需要在前端上用 Canvas 開發一些功能，發現了二個好用的工具Html2canvas、Fabricjs。

在這裡做個紀錄整理一下，安裝參照Github 執行command即可，也可以用CND的方式 Include 進來。

Html2canvas 使用
#

Html2canvas : 功能如其名，能夠將在定義好的區域內(如div) 渲染成Canvas 的畫布，能夠製作將網頁其中一個區塊截圖下來。

使用時將 html2canvas 透過 CDN 方式 include 進來

javascript

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

Fabricjs 使用
#

Fabricjs : 能夠在canvas 上實現如拖曳、旋轉和變形等等的互動效果。

使用時將 Fabricjs 透過 CDN 方式 include 進來

javascript

<script src="https://cdn.jsdelivr.net/npm/fabric@6.4.3/dist/index.js"></script>

文字圖片的拖拉移動的範例
#

首先定義一個 Canvas

html

<canvas id="canvas"></canvas>

並在js內設定參數

javascript

const canvas = new fabric.Canvas('canvas', {
backgroundColor: 'black' // 畫布背景色
});
canvas.setWidth(500);  // Width
canvas.setHeight(500); // Height

新增三角形圖案至畫布

javascript

const triangle = new fabric.Triangle({
    width: 100, height: 100, fill: 'blue', left: 50, top: 50
});
 canvas.add(triangle);

新增文字至畫布

javascript

const editText = new fabric.IText('Signature', {
   top: 100,
   left: 250,
   width: 150,
   fontSize: 36, // 字體大小
   fontWeight: 800, // 字體粗細
   fill: 'red', // 字體顏色
   fontStyle: 'italic',  // 斜體
   fontFamily: 'Calibri', // 字型
   hasControls: true,   
    borderColor: 'white',
   editingBorderColor: 'blue'
  });
  canvas.add(editText);

新增圖片至畫布

javascript

fabric.Image.fromURL('https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png', (img) => {
img.set({
   top: 250,
   left: 50,
  width: 560, //原圖大小
  height: 560,
  // opacity: 0.85, 
  hasControls: true, 
  borderColor: 'orange',
  scaleX: 0.3,  //放大倍率
  scaleY: 0.3
});
canvas.add(img);
});