如何将画布打印到一个数据URL上

数据URL是浏览器提供的一个有用的功能。

我们可以有一个图像，而不是引用一个文件系统文件，如

它将图像嵌入到HTML本身，就像这样。

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

其中由看似随机的字母和数字组成的垃圾部分非常长。

我在玩Canvas API来动态生成图片的时候，偶然发现了Canvas对象的toDataURL() 方法。

我认为，当你创建了一个服务器端的图片，并且你想在网页中提供它，服务器端生成的时候，这个方法特别有用。

所有这些都来自一个Node.js进程。

特别是，使用canvas npm包，我们可以初始化一个canvas。

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 对象是对你要绘制的HTML元素的引用<canvas> 。

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