问题标签 [todataurl]

我可以实现将画布下载为 png 文件，除非我使用 drawImage() 函数。我知道 toDataURL() 不允许使用外部图像来解决安全问题。但即使我使用托管在同一台服务器上的本地图像，它仍然无法正常工作。不幸的是，我发现的所有解决方案都不适合我。

我的问题始于 KineticJS 的第 5 版，在此之前它不是问题。可以使用 stage.toDataURL 函数将原生 KineticJS 形状（例如正方形和圆形）保存到图像文件中。但它不适用于使用诸如 beginPath() 等普通画布方法绘制的非动力学形状；和 canvas.fill(); （第 4 版做得很好）。下面的代码绘制了两个矩形，一个红色，一个蓝色。红色是自定义的，蓝色是原生动态矩形。

两个形状都出现了，但只有蓝色矩形出现在由 toDataURL 函数生成的图像中。它们的绘制方式在 KineticJS 5 中发生了变化，您在其中设置了 fillStyle 等属性，所以我认为这可能与它有关，或者可能是在将图层添加到图层之后添加了自定义形状的事实阶段...

我想两个显示一个图表，并提供一个带有指向更大图表的链接的 url。小预览图像看起来和工作正常：

画布被包裹在一个 div 中，这就是为什么offsetWidth和offsetHeight（填充这个额外的 div 元素）。响应式设计的原因是没有固定的图像。无论如何，这完美无缺。对于“更大”图像的 URL，我想要 URL。我知道toDataURL()会有所帮助。

它有两个令人不安的问题：

1. 这种方式的网址是存在的，但是图片没有内容。
2. 我也想给画布图像一个新的大小，就像我用ct1.canvas.width和ct1.canvas.height管理一样，但似乎我无法将它添加到toDataURL。

代码有什么问题？

如何使用Chart.js处理两个或多个链接的 Canvas-Charts ？使用此脚本，画布图像与更大的版本链接，以在花式框中显示大文件或仅下载两个（右键单击 -> 保存）。简单的。

要将toDataURL()与Chart.js一起使用，这有点棘手，因为它不会在动画结束之前渲染整个图表。如果我们过早请求 URL，它将显示一个空（透明）图像。这就是为什么我们需要在选项中使用onAnimationComplete ：

稍后在脚本中，当动画结束时，它将触发/更改新的 HREF。

这样可行。但只有一个画布图像。如果我删除第二个函数 done()它将与第一个画布一起使用，如果我删除第一个函数，则只有第二个画布显示 url。

我认为问题在于“完成”，它不是一个名字，就像一种情况，或者？“var options”对于所有画布图像都是通用的（当然我可以更改为 options1 和 options2 以及“Line(lineChartData1,options1)”，但没有任何更改）......所以“done”将触发所有功能而且 - 这很糟糕 - 似乎只有最后一个功能。

另一方面，我无法重命名onAnimationComplete的条目。它是空的或完成的，没有别的。该怎么办？

我有一个 Fabric.js 原型，人们可以在其中将照片、文本和地图加载到画布中。完成后，我希望他们能够将画布保存为图像。我试过使用标准：

但它说画布是tainted- 我认为是因为图像（上面的方法在它只是文本时有效）。错误是：

我可以使用 Fabric 的内置方法保存为 SVG：

但我宁愿有一个PNG/JPG。有任何想法吗？

这是有关画布序列化的 Fabric.js 文档。

http://fabricjs.com/fabric-intro-part-3/#serialization

我想从我的画布创建图像，我正在使用 kineticjs，但出现错误：“动力学警告：无法获取数据 URL。无法在 'HTMLCanvasElement' 上执行 'toDataURL'：可能无法导出受污染的画布。” 我想，这是由跨域错误引起的。在画布中，我使用本地保存的图像，地址路径以“file://..”开头。有没有解决方案如何在不安装 apache 的情况下创建图像？谢谢。

在客户端独立 JS 应用程序中，我正在尝试制作它，以便我可以在画布上调用 toDataURL()，在该画布上我绘制了一些由 URL 指定的图像。即，我可以将要在画布上绘制的任何图像（托管在 imgur 上）的 URL 输入到文本框中，单击“绘制”按钮，它将在画布上绘制。最终用户应该能够将他们的最终渲染保存为单个图像，为此我使用 toDataURL()。

无论如何，直到他们真正解决了那个烦人的“操作不安全”错误（天哪，你要告诉最终用户他们可以用自己的数据做什么和不能做什么？）我遵循了一个解决方法，说添加图像到 DOM 并将其 crossOrigin 属性设置为“Anonmyous”，然后将其绘制到画布上。

这是我的代码的完整工作简化版本（但实际上会有更多功能）：

没有这img.crossOrigin = "Anonymous";条线，我可以输入http://i.imgur.com/c2wRzfD.jpg文本框并单击绘图，它会起作用。但是，一旦我添加了那条线，整个东西就坏了，甚至根本不会被绘制到画布上。

我需要改变什么来解决这个问题？我真的需要能够为最终用户实现保存最终图像的功能，而编写 html5 规范的人故意引入了这个错误，这非常烦人。

我尝试使用作为示例fillRect()而不是drawImage(). 所以它工作正常......我确定原因是drawImage()

谁能向我解释为什么这个函数为变量 dataURL_ 返回 null

我正在使用此代码段将画布另存为图像：当我单击按钮快照id="snap" 时，将打开 FF 中的新选项卡（或窗口，在 chrome 中）并调用图像。

问题是 IE9 给我一个错误并且不显示文件。该错误表示打开文件需要软件。老实说，我不明白这个错误，微软在说什么软件？如果有任何解决方案或解决方法，请提供帮助。