问题标签 [todataurl]

目前我有一个canvas.todataurl，我已经把它变成了一个jpeg。我希望我网站的用户能够保存图像，然后将其用作提交按钮。关于我如何做到这一点的任何建议。

首先，我想说我一直在寻找答案几个小时......

问题如下。我的 HTML 代码中有一个画布，它在屏幕上显示一些绘图。我想要做的是将我在屏幕上（画布中）看到的内容转换为图像，该图像将显示在“img”标签中，就像网站中的经典图像一样。

在我的 HTML 代码中，我有：

当我看着屏幕时，我确实有一些东西。

但是我想要在我的代码中是这样的：

上面的行应该显示一个与我们在画布中看到的相同的图像。

这是我的 JavaScript 代码的一部分。canvas 变量是之前已经创建的东西，它显示了我的画布中的内容，所以它可以工作。

当我运行我的代码并打开 DevTools 时，在我的 HTML 代码中，有一行，在 src 标记中有一个 URL。但在视觉上，在我的屏幕上，什么都没有。图像甚至不是白色的，绝对没有。在 DevTools 中，当我将图像的线悬停时，我可以看到为我的图像保留了一个尺寸良好的位置，但里面什么都没有。控制台未检测到任何错误。

我应该怎么办 ？

https://jsfiddle.net/1gf6xzyz/3/ 是小提琴的链接。我将指出 JS 代码中的重要点以及正在尝试的内容。

第 22 行：这是我将裁剪器附加到图像对象的位置。裁剪器是一个类，它引用具有不言自明名称的图像和选项。重要的是：

• ratioDim - 裁剪窗口的纵横比。

• maxCaptureWidth - 可以裁剪的图像的最大宽度。

  /li>

作物库从第 47 行开始。我已经调整了现有库以满足我的需要。

第 357 行 - 这是裁剪器在加载后附加到图像的位置。发生的转换从 358 到 386 列出。

第 574 行 - 此函数的初始部分尝试根据提供的“maxCaptureWidth”设置图像的最大尺寸以适应。该函数的其余部分计算裁剪区域相对于图像的左上角和右下角坐标。

第 656 到 658 行 - 这些是负责将图像捕获到画布上的主要函数。selArea 是将要绘制到画布上的区域。

第 758 行 - 获取裁剪器宽度的实用程序。

第 768 行 - 获取裁剪器高度的实用程序。

第 1170 行 - 绘制区域是在裁剪器调整大小或移动时保证调用的函数。它负责根据当前裁剪器位置在图像叠加层上应用样式。

第 1230 行 - 画布功能从这里开始。这部分在 IE 和 Chrome 中都可以正常工作。在 Firefox 中，它仅在裁剪器左上角与图像左上角重合时才有效。并且裁剪器的垂直或水平移动会扭曲捕获的图像。我已经彻底检查了传递给上下文的 drawimage 函数的参数，并且没有发现任何问题。

第 1252 行 - 我将裁剪后的图像提取为 dataurl 并进一步使用 ajax 将其发送到服务器端，提交表单并将图像字节上传到 s3。

我不知道为什么它不能与 Firefox 一起使用，并且非常感谢任何帮助。提前感谢您的考虑。

我正在尝试从画布数据中提取图像信息并将其显示在 .png 文件中。到目前为止，我已经能够使用 toDataURL() 方法从画布中提取 Base64 信息并创建一个 blob 对象（正确识别为 .png 图像），但图像始终为空白。有什么建议么？这是代码

有趣的是，大小是正确的，唯一缺少的是 .png 中的实际图像。

我正在尝试通过调用 canvas.dataURL() 方法将画布转换为 dataURL。它适用于某些尺寸为 938x657 的图像，但是当我尝试使用大图像尺寸（例如 3750x2625、7500x5250 等）的相同功能时，它返回“数据：”

代码：

有什么建议/解决方案吗？

如何获得 2 个织物画布并toDataURL()使用这 2 个画布放置和输出组合图像？我尝试使用draw，但我无法得到它。

我有一个用 JavaScript 为微信平台编写的小型 webapp，用户可以在其中创建一些图像并将其提交到服务器。

图像创建是使用 Canvas2D 完成的。

将图像提交到服务器我使用从 canvas.toDataURL(type,quality) 收到的图像数据字符串，然后服务器 PHP 脚本在从 webapp 接收到的服务器端创建二进制 JPG 文件。

在我有机会尝试的所有手机（三星 S3/4/5、小米、华为荣耀、联想、Nexus 4/5、iPhone 4S/5/5S/6/6S、iPad ......）上一切正常，没有问题. 客户的三星 Note 2 除外。

他们的设备运行 Android 4.3 和最新的微信（6.2.6），就像在我的 Android 手机上一样。但是，当他们提交图片时，文件大小会大 6-7 倍。

我检查并实际收到的文件是 PNG，而不是 JPG。

我用来从 Canvas2D 图像中获取图像数据字符串的代码是：

我已经设置了接收这个数据字符串的PHP脚本，写下日志，标题中的内容，接收到的字符串大小等，我可以清楚地看到只有当客户端提交图像时，接收到的标题是“image/png”，不管在 javascript 代码中设置为“image/jpeg”。

这是显示 png 标头和大数据大小的日志： http: //snag.gy/ma39y.jpg

这是显示 jpg 标头和正常数据大小的日志： http: //snag.gy/enPvZ.jpg

我很纳闷，我做错了什么？我已经检查了规范，并且自 Android 3.4 起应该支持 toDataURL

我从 2011 年发现这个规范，浏览器必须支持 PNG，但它们不需要支持任何其他格式，并且如果提供的类型无法识别，它将返回 PNG：http ://www.w3.org/TR/ 2011/WD-html5-20110405/the-canvas-element.html#dom-canvas-todataurl

然而，考虑到这是 2015 年，WebGL 和移动设备的时代，我很难相信我无能为力。

有没有人有解决方案？高度赞赏！！！

我想获取一个 svg 并将其保存为 png（来自创建 svg 的图表插件），我想我已经想出了如何实现这一点......

我一直在寻找为什么 onload 函数没有触发，但我仍然不明白为什么下面的代码不起作用。你好没有显示。这可能非常简单，但我现在无法看到它......

更新

将 onload 更改为，它似乎工作......

但现在另一个问题，我检索到这个错误：

未捕获的 InvalidStateError：无法在“CanvasRenderingContext2D”上执行“drawImage”：提供的 HTMLImageElement 处于“损坏”状态。

UPDATE2 如果我尝试单击控制台中生成的数据字符串：

我在控制台中得到这个字符串：

和浏览器中的这个错误：

此页面包含以下错误：

第 1 行第 1 列的错误：文档为空 下面是第一个错误之前的页面渲染。

UPDATE3： 我开始意识到实际问题，这是我无法正确获取源代码。我测试了手动将源设置为指向特定文件，然后它就可以工作了。通过查看生成的 svg 内容...（部分内容）

并尝试一个明显有效的示例：（取自问题：How to convert svg to png using html5 canvas/javascript/jquery and save on server）

http://jsfiddle.net/epistemex/xfh7nctk/23/

在jsfiddle中，源码被outerHTML抓取：

和小提琴中的html ..（开始）

但在我的情况下它不起作用，因为 html 看起来不一样并且 svg 没有 id。我尝试向 SVG 添加一个 ID，尝试向 SVG 添加一个类但没有成功。我还尝试使用 wrap() - jQuery 中的函数创建包装器，但也没有成功：

我刚刚在我的项目中添加了sketch.js，效果很好！我只有一个问题：我需要将“草图”图像存储在我的数据库中，但如果可以尝试获取它，我会获得一张空白图像:-(我该怎么做？使用此代码 toDataURL 总是相同的并且代表一个空白图像

Facebook 的 Graph API (v2.5) User Photo Edge 表示，将照片发布到 Facebook 有两种不同的方式：

1：将照片附加为 multipart/form-data。对象的名称无关紧要，但历史上人们一直使用 source 作为照片的参数名称。它的工作原理取决于您碰巧用于发布帖子的 SDK。

2：使用已经在互联网上的照片，通过使用 url 参数发布：

我需要使用第一种方法（多部分），因为我从画布中获得了 base64 图像数据。

这似乎令人困惑，因为我发现文档信息量不大。我知道图像的 urlData 将与其他参数一起在多部分数据中以某种格式编码。我找不到任何有关如何使用 Javascript SDK 和图形 API v2.5 执行此操作的示例代码/正确解释；即使在对stackoverflow进行了详尽的搜索之后。我在stackoverflow上看到了各种部分回答/未回答的问题......但我仍然无法让它工作。

请帮忙。谢谢 ！

类似的问题
Facebook Javascript 表单数据照片上传：需要上传文件错误Javascript：通过 Graph API Upload Base64 Image Facebook Graph API
从 Canvas 上传图像到 FB - 不清楚 Javascript Api 是否已经在这里

[编辑] - 我已经尝试过的代码。

响应 -“发生错误：(#324) 图像文件丢失或无效”