0

首先,我想说我一直在寻找答案几个小时......

问题如下。我的 HTML 代码中有一个画布,它在屏幕上显示一些绘图。我想要做的是将我在屏幕上(画布中)看到的内容转换为图像,该图像将显示在“img”标签中,就像网站中的经典图像一样。

在我的 HTML 代码中,我有:

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

当我看着屏幕时,我确实有一些东西。

但是我想要在我的代码中是这样的:

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

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

这是我的 JavaScript 代码的一部分。canvas 变量是之前已经创建的东西,它显示了我的画布中的内容,所以它可以工作。

var image = new Image();
image.src = canvas.toDataURL("image/jpg");

image.style.height = canvas.height;
image.style.width = canvas.width;

document.body.appendChild(image);

当我运行我的代码并打开 DevTools 时,在我的 HTML 代码中,有一行,在 src 标记中有一个 URL。但在视觉上,在我的屏幕上,什么都没有。图像甚至不是白色的,绝对没有。在 DevTools 中,当我将图像的线悬停时,我可以看到为我的图像保留了一个尺寸良好的位置,但里面什么都没有。控制台未检测到任何错误。

我应该怎么办 ?

4

1 回答 1

0

我已经复制/粘贴了你的代码,它就像一个魅力。 http://jsbin.com/hojuco/edit?html,css,js,输出

在导出之前,您是否在画布中绘制了一些东西?画布在开始时是透明的,因此请确保它不只是空的。

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

于 2015-08-03T15:19:18.863 回答