问题标签 [todataurl]

我正在使用 HTML 5 画布创建一个纯 Javascript 图像大小调整器。我有一个将画布下载为图像文件的链接。

这适用于单个文件：

我一直在尝试一次单击获取多个文件，但不起作用，只下载了一张图片（最后一张画布）：

这是相关的 HTML，Canvas 是由 JS 在文件拖放到 droparea 时动态添加的：

JS：

有什么建议么？

How can I make a PHP page that will return image from other server specified by url in variable, like this:

http://www.mypage.com/MyScript.php?src=http://www.otherpage.com/image.png

And after going to that page an image should apear.

It need to work for any other srcs too.

(Why like this? I want to try bypass the Security Error that apears using toDataUrl from canvas while using image not from the same domain, by using http://www.mypage.com/MyScript.php?src=http://www.otherpage.com/image.png as a image src used in canvas)

正在使用fabricjs 编辑/创建图像...创建图像后应上传到WordPress 库。我对此感到震惊，我能得到

我也可以在弹出窗口中看到预览.. 但我很震惊地转换为图像并将其上传到 WordPress 库而无需下载。

谢谢

在 Chrome 中使用canvas.toDataURL('image/jpeg', 1)，图像丢失有点严重，但在 Firefox 中，还可以，几乎无损，甚至使用默认质量值 0.92。在 Chrome 中设置质量似乎不起作用。

我在某些 Android 设备（包括运行 android 4+ 的较新设备）上使用 KineticJS 的 toImage() 方法时遇到问题。奇怪的是，它在其他设备上运行良好，例如 Kindle Fire HD。

远程调试后，Kinetic 使用的 Android canvas.toDataURL() 方法似乎返回“data:”，而不是桌面浏览器中返回的通常序列化字符串。

我已经在这些设备上尝试了默认的画布实现并且效果很好（例如http://www.html5canvastutorials.com/advanced/html5-canvas-get-image-data-url/中的示例）。

我尝试使用 js PNG 编码器覆盖默认的 toDataURL 实现，但对于我的用例来说太慢了。

非常感谢任何帮助！

我有以下脚本（针对这个问题进行了精简），它使用 FileReader API 允许用户在提交更改之前上传照片并显示其照片的缩略图。

在 Mac OS X（和 Windows XP 和 7）上使用 Chrome 进行测试时，即使没有 img.onload = (function(){ }); ，Safari 和 Opera 也能完美运行。但在 Firefox 中需要它，因为在加载图像之前，源图像被分配给一个空的画布。

太好了，所以一切都在台式机上工作，直到我尝试在我的 iPhone 上使用 Safari 和 Chrome 进行测试。由于我无法直接在我的设备上进行调试，我设法使用警报来显示有时源图像被分配给一个空画布，我认为这将由 img.onload = (function(){ }); 但显然这在移动浏览器中不起作用，除非有其他原因导致它失败。

我尝试了以下代替 img.onload = (function(){ });

乃至

如果有人有任何想法或建议，我将不胜感激。谢谢。

我使用此代码在 Javascript 中保存图像：

代码有效，但保存的文件没有任何扩展名，我必须手动重命名它。

我的问题是如何将扩展名放在最后？

谢谢你。

这就是我在网络服务器上的图像文件夹中的 .htaccess 文件中的内容

我也使用该行：img.crossOrigin = 'Anonymous';在我的 JS 文件中，但我仍然收到错误消息。

工作示例可以在这里找到：http: //jsfiddle.net/burton22/48JmQ/13/

只需查看控制台的错误。

它在将图像 src 属性更改为 后有效img.src = "http://goo.gl/AOxHAL"，但不适用于我服务器上的图像。任何想法为什么？

编辑：我什至尝试在我的 htaccess 文件中使用它，它仍然给出同样的错误

我的以下代码在 IE 中运行良好，但在 Chrome 中运行良好（版本 31.0.1650.63 m）。
错误消息：无法在“HTMLCanvasElement”上执行“toDataURL”：可能无法导出受污染的画布。

我在这里看到了很多类似的问题，但没有找到答案。任何帮助，将不胜感激。

我希望能够将 Canvas（包含来自另一个域的图像）转换为 Image。为此，据我所知，我应该使用启用 CORS 的图像（以便能够将 .toDataURL() 用于画布）。问题是如何制作启用 CORS 的图像。以下代码在第一行引发错误：Cross-origin image load denied by Cross-Origin Resource Sharing policy。