首先,我想说我一直在寻找答案几个小时......
问题如下。我的 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 中,当我将图像的线悬停时,我可以看到为我的图像保留了一个尺寸良好的位置,但里面什么都没有。控制台未检测到任何错误。
我应该怎么办 ?