/

如何將畫布打印為數據URL

如何將畫布打印為數據URL

數據URL是瀏覽器提供的一個有用功能。

我們可以使用圖像來嵌入在HTML本身中，而不是引用文件系統文件，像這樣：

1
<img src="data:image/png;base64,iVBORw0KGgoAA…" />

其中，垃圾部分是由看似隨機的字母和數字組成的，非常長。

我正在使用Canvas API動態生成圖像，並偶然發現了Canvas物件的toDataURL()方法：

1
canvas.toDataURL()

我認為這對於在伺服器端生成圖像並在網頁中提供圖像時非常有用。

特別是在Node.js進程中，使用canvas npm套件我們可以初始化一個Canvas：

1
2
3
const { createCanvas, loadImage } = require('canvas')
const canvas = createCanvas(200, 200)
const ctx = canvas.getContext('2d')

然後，我們可以繪製圖像，例如使用ctx.fillText('Hello, World!', 50, 100)，並調用canvas.toDataURL()生成圖像的數據URL，並將其附加為HTML字符串：

1
const imageHTML = '<img src="' + canvas.toDataURL() + '" />'

當然，您也可以在前端執行相同的操作，只是現在canvas物件是對您繪製所使用的<canvas> HTML元素的引用：

1
2
3
const canvas = document.getElementById('canvas')
//...
const imageHTML = '<img src="' + canvas.toDataURL() + '" />'

tags: [“canvas”, “data URL”, “前端開發”, “後端開發”]