将画布转换为图像 - 使用 Javascript答案

【问题标题】：Transform a canvas into an image - with Javascript将画布转换为图像 - 使用 Javascript
【发布时间】：2015-10-25 18:17:19
【问题描述】：

首先，我想说我已经寻找了几个小时的答案......

问题如下。我的 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 中，当我将图像的线悬停时，我可以看到为我的图像保留了一个尺寸良好的位置，但里面什么都没有。控制台未检测到任何错误。

我该怎么办？

【问题讨论】：

它适用于jsfiddle，创建一个 sn-p 向我们展示你得到的结果。或者在这里放一个完整的代码和html。
How To Save Canvas As An Image With canvas.toDataURL()?的可能重复
您的代码看起来不错。确保您托管的图像与网页托管在同一域中，否则您将违反跨域限制 (CORS)。违反 CORS 将污染您的画布，这将自动导致 .toDataURL 被禁止。

标签： javascript image canvas html5-canvas todataurl

【解决方案1】：

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

在导出之前你会在画布上画一些东西吗？画布在开始时是透明的，因此请确保它不只是空的。

否则，您混淆了变量。

【讨论】：