如何将画布打印到数据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手册


更多节点教程: