如何將畫布打印到數據URL

資料網址是瀏覽器提供的有用功能。

我們可以擁有一個映像,而不是引用文件系統文件,例如

<img src="image.png" />

它將圖像嵌入HTML本身,如下所示:

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

在哪裡垃圾由看似隨機的字母和數字組成的部分非常長。

我在玩畫布API動態生成圖像,我偶然發現了toDataURL()Canvas對象的方法:

canvas.toDataURL()

我認為這在創建服務器端圖像並希望在服務器端生成的網頁中提供服務時特別有用。

全部來自Node.js進程。

特別是,使用canvas npm包我們可以初始化畫布:

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中,如下所示:

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

當然,除了現在,您可以在前端執行相同的操作canvas對像是對一個對象的引用<canvas>您要繪製的HTML元素:

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

免費下載我的Node.js手冊


更多節點教程: