问题标签 [todataurl]

这是文档toDataURL：

If this argument is anything else, the default value for image quality is used. Other arguments are ignored.. 图像质量的默认值是多少？

我正在尝试生成由角度图表生成的画布图像，但我不断收到此错误。我的代码有问题吗？

这是画布：

这是功能：

我正在使用 JS 裁剪库。裁剪完成后，裁剪器会为我提供一个画布，以便我可以获取数据并将裁剪后的图片上传到我的服务器。

目前它工作正常，但是当将画布转换为 PNG 数据 url 时，因为我希望我的输出图片非常大（它是一个横幅），上传实际上需要很多时间，所以我更喜欢使用似乎压缩的 JPEG更好的大图。但是 JPEG 没有 alpha 通道，所以看来我必须用背景替换它（我选择我的颜色：白色）。

那么，当原始图像如下时，有人可以告诉我如何将该画布转换为 JPEG 中的数据 url：

它是PNG中警告图标的裁剪图片。背景是阿尔法，它有一些黑色的图画。

我已经做了一些尝试，但似乎当我在画布上绘制一个矩形时，它会在我的初始图片之上绘制。在添加图片之前我无法绘制矩形，因为裁剪器库为我提供了已经构建的画布。

当我这样做时，我最后只会得到一张白色的照片。

如果我不绘制矩形而只是尝试转换为 JPEG，那么我会得到一张黑色图片。

我的 Fabric 画布有一个图像作为背景，另一个图像来自画布内的 url。

现在我需要将此画布制作为要在 facebook 上分享的图像。

我尝试通过单击按钮从fabricJS 的toDataUrl() 函数，但它给出了一个空白图像。

即使您在 Chrome 中右键单击画布时获得的另存为图像功能也会提供空白图像。

我尝试将其序列化为 JSON 和 SVG，但它们也提供了一个空白画布。我还尝试通过 ajax 将图像数据上传到服务器并将其保存为服务器上的图像。我还在服务器上得到一个空白图像。

但是，如果我将 FabricJS 画布更改为静态画布，如下所示，一切正常。当您在 chrome 上另存为图像时，它会以图像的形式出现。

那么我应该怎么做才能使它在常规画布上工作，因为我需要 FabricJS 的交互功能。

所以我正在尝试为我正在构建的 OpenLayers 3 应用程序创建打印地图功能。我知道他们的例子，但每当我尝试使用它时，我都会遇到可怕的受污染的画布问题。我已经阅读了整个互联网，遇到人们说首先要正确设置 CORS（完成并完成），但也要这样做：

上面的描述在这里。

我的问题是，我以前从未真正使用过 toDataURL() 并且我不确定如何确保正在创建的图像在猛烈撞击之前正确设置了 crossOrigin 属性：

有什么想法吗？

我见过这个。我的问题是他们如何将其整合到一个有效的功能中。就像是：

我正在尝试从我的流星驱动网站创建一个页面的 pdf。该页面包含相当多的样式和一些 d3 图表。我已经添加chipcastledotcom:jspdf并new3rs:html2canvas完成了我的目标。

我的计划是使用 html2canvas 和 jsPDF 的.addImage()功能将图表添加到 pdf 中。作为实现目标的第一步，我尝试在网页（徽标）中获取现有图像，将其绘制到新创建的画布元素上，然后在 html2canvas 内部调用canvas.toDataURL('image/jpg')，然后将其用作 jsPDF.addImage()函数的参数。

最终，徽标图像将被我通过将 d3 图表转换为img元素创建的图像替换。我的问题是生成了pdf，但图像是空白的。

我认为这不是图像上的负载问题，因为在我以网站用户的身份调用 pdf 生成之前，图像在网页上清晰可见。

我得到的数据网址如下。我要返回的数据 URL的=末尾对我toDataURL()来说看起来不太正确（尽管我真的不知道会发生什么）：

是否有解决方案/解决方法或我不理解的东西toDataURL()？

这是一个 jsfiddle（完美运行），它展示了我想要完成的工作：https ://jsfiddle.net/jdcast/tqfdkusp/ 。

请注意，我偶然发现了这个关于类似/相同问题的先前 SO 问题，但它似乎没有解决方案：canvas.toDataURL() 无法正常工作

谢谢！

好吧，上面是满口的。所以我正在抓取一个画布并使用 toDataURL() 将其转换为数据 URI。目标是创建一个打印对话框来打印该图像。我遇到了将创建的图像推送到新窗口并在其上调用 print 的问题。见下文：

作为打印某些东西的一种解决方法，尤其是 lodash 模板，这是可行的。它不漂亮，但它有效。

无论如何，当我运行它时，我会回来：

我不知道为什么它给了我而不是显示图像。有没有人有尝试打印由 toDataURL() 方法构建的图像的经验？

好的，我知道 canvas.toDataUrl() 会生成 png 格式的图像。但是，当我尝试从http://threejs.org/examples/#webgl_lines_sphere获取图像时。我所看到的只是 chrome 上的黑色图像。要复制这些步骤 -

1）打开开发控制台并选择画布元素。2) canvas = $0 3) context = canvas.getContext('webgl', {preserveDrawingBuffer: true}) 4) img = canvas.toDataUrl() 5)document.write('<img src="'+img+'"/>')

图像是空白的。但是，我在链接http://threejs.org/examples/#canvas_geometry_cube尝试使用不同的画布。请按照以下步骤进行复制。

1）打开开发控制台并选择画布元素。2) canvas = $0 3) context = canvas.getContext('2d', {preserveDrawingBuffer: true}) 4) img = canvas.toDataUrl() 5)document.write('<img src="'+img+'"/>')

这给出了预期的结果。为什么有区别，如何避免这种情况也检索第一张图像？

我想在模态引导程序的 src 中打开内容toDataURL以预览图像 png

https://jsfiddle.net/gislef/k320kL4f/1/

我尝试：

我知道这很天真，但我在这件事上是新手

编辑

标签 img

javascript

这将返回空白图像。

在控制台返回：

https://jsfiddle.net/gislef/k320kL4f/2/

解决方案

在本地主机中它工作。小提琴不起作用

谢谢你的帮助

后台设置

我有一个 Web 应用程序，它处理从一组其他图像创建图像。我选择这样做的方法是读取一组图像并将它们放置在 HTML 画布上。然后，我将每个画布作为 jpeg 导出到第三方 API，并使用toDataURL并将其转换为 Blob。我面临的问题是我有许多这样的画布都将数据导出为 jpg 并且它消耗了大量资源。当每个画布尝试调用toDataURL.

问题

我发现调用画布的toDataUrl()ortoBlob()可能会非常慢，尤其是对于大画布尺寸。我想利用网络工作者的多线程特性。

首先，我尝试传入画布对象，但抛出了一个错误。事实证明，对象是一个问题，而且似乎它们要么被转换为字符串，要么在无法克隆时失败。无论哪种方式，我发现传递上下文的图像数据确实有效。数据以原始 RGB 值的形式作为Uint8ClampedArray画布上下文的方法传递getImageData()。

主.js

myWorker.js

我认为归结为知道如何将Uint8ClampedArray保存 RGB 信息的 a 转换为 jpg/png 数据。

我认为这可能有用的原因是我相信getImageData只是从画布上下文中复制现有数据结构，因此不像toDataUrl. 我在调用类似于以下代码块的内容时捕获了 cpu 配置文件：

并得到：

所以，考虑到这一点，我想把这个过程的重担转移到一个网络工作者身上。我什至不介意网络工作者内部是否需要更长的时间，只要它发生在另一个进程中。

关于它的一些额外想法：

• 添加一个额外的库来进行转换是可以的，但是提供如何将外部库添加为 web worker 文件的依赖项的奖励积分。现在我正在为应用程序使用 browserify。也许为网络工作者创建另一个浏览器化包？
• 我最终需要一个 jpeg（对于第三方 API），因此将其转换为 png 只是作为转换为 jpeg 的一个步骤。
• 我尝试降低 中encoderOptions的第二个选项toDataURL，作为加快进程的一种方式，但我没有看到太大的变化