使用Javascript将画布转换为图像

Question

首先，我想说我几个小时都在寻找答案......

问题如下。我的HTML代码中有一个画布，在屏幕上显示一些图纸。 我想要做的是将我在屏幕上（在画布中）看到的内容转换为图像，该图像将显示在网站中的经典图像等“img”标签中。

在我的HTML代码中，我有：

array.join(',') \\John,Steve,Rob,Mary,Tom 
array.join(' ') \\John Steve Rob Mary Tom 
array.join('And') \\JohnAndSteveAndRobAndMaryAndTom

当我看到屏幕时，我确实有一些东西。

但我在代码中想要的是：

<canvas height="842" width="595"></canvas>

上面的行应该显示的图像与我们在画布中看到的图像相同。

这是我的javaScript代码的一部分。 canvas变量是之前已经创建的东西，它显示了我画布中的内容，因此它可以正常工作。

<img src="blabla" style="height: 842px; width: 595px";></img>

当我运行我的代码时，当我打开DevTools时，在我的HTML代码中，有一行，在src标记中有一个URL。但在视觉上，在我的屏幕上，什么都没有。图像甚至不是白色，绝对没有。 在DevTools中，当我将图像的线条悬停时，我可以看到有一个保留给我的图像的地方具有良好的尺寸，但内部没有任何东西。 控制台未检测到任何错误。

我该怎么办？

Answer 1

我复制/粘贴您的代码，它就像一个魅力。 http://jsbin.com/hojuco/edit?html,css,js,output

在导出之前，你在画布上画了什么吗？

在开始时是透明的，所以请确保它不仅仅是空的。

否则，你混淆了你的变量。