问题标签 [todataurl]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
15582 浏览

javascript - 画布 toDataURL() 返回空白图像

我正在使用glfx.js来编辑我的图像,但是当我尝试使用该toDataURL()函数获取该图像的数据时,我得到一个空白图像(宽度与原始图像相同)。

奇怪的是,在 Chrome 中,脚本运行完美。

我想提的是,图像是canvas使用 onload 事件加载的:

我的图像路径也在同一个域上;

问题(在 Firefox 中)是当我点击保存按钮时。Chrome 返回预期结果,但 Firefox 返回:

什么可能导致此结果,我该如何解决?

0 投票
1 回答
1044 浏览

canvas - toDataUrl() 在画布元素上失败

我在角度使用monospaced.qrcode来生成二维码

这有效并生成一个二维码

在此处输入图像描述

我正在尝试通过 toDataUrl() 获取生成的图像来打印此 QR 码,但这会使我的应用程序崩溃(我无法收到特定错误,角度只是说当我添加 toDataUrl 时我的控制器功能未定义)

不知道哪里出了问题,有什么想法吗?

0 投票
1 回答
1000 浏览

php - PHP dataURL 到 png 图像

我从画布上捕获了一张图像,并通过 ajax post 方法将其发送到我的 php 文件。

在这里,我需要将其放回具有文件类型和扩展名的 png 中。因为我将使用 fpdf 将此新图像添加到 pdf 中。

这是我的代码。我只剩下一个损坏的图像链接图标。

0 投票
1 回答
4747 浏览

three.js - 在 WebGLrenderer 中同时使用 autoclear 和 preserveDrawingBuffer

我有一个 Three.js 场景,我在其中设置了渲染器的 preserveDrawingBuffer:true 因为我想使用 renderer.toDataURL 来拍摄画布上的内容,我还使用 renderer.autoClear = false 因为我使用了 2 个场景每个都有一台相机(当然是一个渲染器)。

问题是,当我使用 orbitControls 移动相机时,对象不会按应有的动画效果,它们以前的状态保留在画布上,并且由于 preserveDrawingBuffer:true 设置,它们正在创建丑陋的绘画(它们没有被擦除)。

我该怎么做才能同时拥有 2 个场景/摄像机和轨道控制的快照功能?

谢谢你。

0 投票
1 回答
190 浏览

javascript - Paperjs 光栅化 activeLayer 与视图边界

我有这个小提琴,我想在其中实现某种画布视图的光栅化缩略图。一切正常,直到某些路径溢出视图边界并且那些溢出的部分也被导出到缩略图中,这是不希望的。只有在画布上可见的部分才能在拇指中可见。我已经尝试过 clipMask,不幸的是没有成功。

html代码

纸质代码

你们知道如何解决这个问题吗?

非常感谢您提供的任何帮助。

0 投票
0 回答
206 浏览

html - 将舞台另存为图像,包括背景图像

我正在开发一个拖放应用程序,用户必须能够将苹果拖到树上并将此组合保存为图像。如果我只输入可拖动苹果的代码,一切正常,但是当我添加包含背景图像的图层时,“另存为图像”按钮不会打开带有图像的新选项卡。有人能帮助我吗?这是代码:

这是jsfiddle:http: //jsfiddle.net/ruben_on/cqezv9t0/

谢谢!

0 投票
1 回答
5387 浏览

javascript - 将画布另存为图像 Internet Explorer

我已经构建了几个 Web 资源,以将签名功能添加到 Microsoft Dynamics CRM 2011 表单中,其中一个内置于 silverlight 作为文件上传器等,另一个内置于 javascript 和 HTML 中,用于在屏幕上进行签名并保存为图像但该代码仅适用于谷歌浏览器。

我已经阅读了无数的stackoverflow线程,但找不到任何答案。

无论如何我可以以某种方式

  • 将画布图像保存在 IE 中,当前解决方案已经在 chrome 中工作的方式
  • 打开一个新窗口,以便出现画布图像并且可以右键单击并保存

我已经尝试过上述两种方法,但没有运气。

它也必须在javascript中

0 投票
1 回答
1022 浏览

image - 如何在不调用 canvas toDataURL 的情况下获取 base64 图像数据?

我正在进行一个需要支持 ie9 或 ie10 的项目。
我正在使用 d3.js 进行数据可视化。
现在我需要提供一个函数来将图表导出为 pdf。
我一直在调查可能的解决方案。似乎canvas + jsPdf是要走的路,下面是我写的一些代码。
但问题是当调用toDataURL 时,会导致IE9 和IE10 出现安全错误。所以我想知道是否有一些工作可以在不使用画布的情况下获取base64图像数据,因为jsPdf只需要base64图像数据???

  1. createObjectURL 到根 svg 元素

    /li>
  2. 使用画布绘制图像

    /li>
0 投票
1 回答
376 浏览

javascript - 画布:drawImage进度

我用 JavaScript 编写了一个大文件上传插件,它允许用户在使用 canvas API 上传图像之前裁剪和调整图像大小。我想知道是否有一个要检查何时运行drawImagetoDataURL已完成。这在处理几 MB 的原始图像时很有用。

0 投票
1 回答
3013 浏览

javascript - 没有 alpha 通道的画布 toDataURL

我想在浏览器中调整上传图片的大小。我正在使用画布将上传的图像绘制到画布上,然后调整它的大小,并使用 toDataURL 方法的结果。

简化的代码(没有上传部分)看起来像这样:

问题是 dataUrl 包含 alpha 通道,尽管上下文是在 alpha 设置为 false 的情况下创建的。

是否可以在没有 alpha 通道的情况下获取数据 url?

如果没有,我考虑使用 Javascript 图像库之一,但它们中的大多数都依赖于画布。

另外,我可以使用画布中的数据对图像进行编码,但我宁愿不这样做:)