问题标签 [todataurl]

我已经画了一个如下所示的日本国旗，并且我使用了两次 toDataURL。第一个工作正常，与画布相同，但第二个出现黑色背景，我不知道为什么？？！

这就是“我使用 Chrome 和 FireFox 来测试这个” 的结果

我目前正在研究一个解决方案，我使用 jcrop 将图像裁剪为矩形，以便可以将其用作 3D 立方体的纹理（在 three.js 中） ，并且可以将裁剪区域保存为服务器上的图像。

这里的问题是，裁剪后的图像看起来不好，质量低。一开始我以为和DPI有关，因为它保存在96 DPI，但是我上传的一些图像也有96 dpi并且质量很好。

我认为这与jcrop有关。有人知道这个问题或对 jcrop 有任何经验吗？还是我应该使用不同的插件？

原始图像

裁剪图像

渲染画布后，toDataURL 返回带有画布比例的图像（我的画布比例为 700 x 600）。如何使用我的原始高度和宽度返回图像。不是画布宽度和高度。这是代码部分。

目标 - 使用客户端：

将动态 SVG 绘图（使用 d3js 创建）转换为可下载的 PNG 图像，并使用 Internet Explorer 工作。

完成：

在 Chrome 中实现，没问题。一旦我有了 PNG DataURI，它就可以很容易地转换为可下载的 PNG blob。

不幸的是，在 IE 中运行相同的代码会产生 SecurityException，当我尝试将画布转换为 PNG DataURI ( canvas.toDataURL ) 时它会失败。

显然这是一个活跃的IE BUG，我在 StackExchange 上发现其他人也有同样的问题。我相信这与应用于来自其他域（并在画布中绘制）的图像的 CORS 限制有关，但我的 SVG 来自本地页面。

想法

想知道原因是否与我为IMG 元素呈现的 SVG 绘图生成初始 DataURI ( data:image/svg+xml ) 的方式有关。

我已经尝试了两种替代方法来生成image/svg+xml、 base64 和 charset=utf8，但它们并没有解决遇到的问题。所以想知道它是否是 SVG 的内容，目前 SVG 绘图中没有图像。

参考代码：

更新：

测试了 Canvg 对绘制到画布上的2d 上下文“ drawSvg(...) ”的扩展。这克服了在画布元素上调用 toDataURL 时的 SecurityException，但是绘制函数对于文本渲染和放置不够准确。所以我仍然需要一个解决方案。

查看示例屏幕截图，左侧使用原生 drawImage 进行正确渲染，右侧使用 Canvg 的 drawSvg 进行错误渲染

使用 Canvg 的代码 - 注意：您需要参考 JS

我正在下载图像。它仅适用于 Chrome，不适用于 Firefox 或 IE。

谁能帮助我它如何适用于所有浏览器。

JsFiddle 示例

帮助将不胜感激。谢谢

我正在尝试使用 html2canvas 在 JavaScript Angular 中创建一个“将 div 保存为 png”函数。它“几乎”有效，除了图像质量可能更好（主要是文本）

但有时它只是打开一个空的画布，没有捕获里面的元素。

我没有使用下载功能，而是尝试只使用 window.open(data) ，但我仍然只是打开一个带有空画布的新窗口。我还确认在“另存为 png div”失败时收到了该 ID。

我正在使用 javascript 和 html canvas 来调整 jpeg 图像的大小。调整大小后，我将canvas.toDataURL其用作锚标记中的 href 属性，以提供用户可以下载调整大小图像的链接。

这在一定的图像尺寸下效果很好。

似乎不同的浏览器对数据 url 的大小有不同的限制，如此处所述： https ://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs

在 chrome 中，当我超过数据 url 大小限制时，单击下载链接时没有任何反应；没有错误或任何东西（据我所知）。

是否有某种方法可以以编程方式检测数据 url 是否太大？也许一些浏览器事件会告诉我点击下载链接是否失败？

理想情况下，我想检测下载是否成功。当数据 url 太大时，我想向最终用户显示一个解释，描述如何右键单击图像并选择“另存为 ...”，这似乎总是有效的。

更新1：

看起来 usingcanvas.toBlob是目前最好的解决方法。这是 api 文档：https ://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob 。

这是一个 jsfiddle，它演示了锚 href 下载链接在toDataURL用于更大的画布时如何失败，但toBlob似乎有效：

https://jsfiddle.net/upgradingdave/c76q34ac/3/

以下是一些相关的 stackoverflow 问题： canvas.toDataURL() 下载大小限制

数据协议 URL 大小限制

我正在尝试使用 Canvas 的 DataURL（使用 JavaScript）创建图像。当用户点击提交时，该值被发送到输入类型文本标签（例如，<input type='text'>），然而，显然在 Chrome 上，当文本长度为 524,288 个字符时，该文本被截断。

我将其发送到输入标签，因为我需要获取 PHP 中的值（作为 $_POST['dataurltext'];），以便我可以创建图像并将其上传到我的 Web 服务器。

关于如何绕过这个长度的任何想法？

我应该改用评论框吗？

感谢您的任何帮助，我们将不胜感激。

我在将画布转换为 img 时遇到问题。使用 toDataURL() 并将其插入 img src 的最佳方法是什么？当我启动脚本时，它给了我正确的画布，但 img 是空白的。这是我的代码：

给定 javascript 中的画布，保存到后端服务器的正常工作流程如下：

1. 创建画布元素
2. 绘制/修改画布
3. 调用 canvas.toDataURL()
4. 将此画布的 base64 表示上传到您的后端服务器（基本 ajax）。

由于对 toDataURL() 的调用可能非常慢，我想知道是否可以直接将图像字节上传到后端服务器，而不是使用 toDataURL() 的 base64 方式。

有任何想法吗？