问题标签 [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 回答
1502 浏览

html - 在画布中附加 div 并创建 DataURL 不起作用

我需要显示一个图像,在这个图像上方我需要放置 2 个 div,一个 div 包含图像,另一个 div 包含文本,并且需要将所有这三个组合起来以创建最终图像并将最终图像存储在数据库/服务器中,我正在使用画布来实现这一点,而我的项目是在 Ionic/AngularJS 中,我无法在没有 div 的情况下直接使用 img 和 text,因为我还需要拖放并调整这个 img 和文本的大小,而且这个不使用 div 是无法实现的。

这是我的html代码。

我最后将画布元素定义为

在保存按钮单击的控制器中,我正在调用一个具有以下内容的函数。

我得到了一个我想要的精确画布控制台,如下所示

我还得到了一个非常长的编码字母的 datURL,最后我得到一个只有起始图像的图像和其他需要在此图像上方显示的图像未显示

请告诉我..我在哪里做错了

提前致谢..

0 投票
2 回答
6137 浏览

javascript - 如何将png图像数据数组转换为视频文件

我从canvasthrough获取帧canvas.getDataURL()

但是,现在我有一组 png 图像,但我想要一个视频文件。

我该怎么做呢?

0 投票
1 回答
199 浏览

javascript - 为什么 2 个相同的图像具有不同的 dataUrls?

我有 2 张图片都是通过 javascript 画布生成的。我想检查两个图像是否相同。为此,我生成了一组图像并将它们保存为 png 文件。然后我尝试比较之前生成的图像和新生成的图像的 dataUrls。但是 dataUrls 是不同的。为什么呢?

我用compareimagemagick 来仔细检查,这些图像真的是一样的。唯一的区别是,第一个可作为文件使用,而另一个可通过画布元素使用。

我以这种方式生成了 dataUrls:

请注意,这只是某些图片的问题 - 并非全部。上面显示的简单示例完全有效。

0 投票
1 回答
1103 浏览

javascript - 带有 Base64 字符串的 Json 请求 URL

我有一个reader.readAsDataURL(file)已编码为 base64 字符串的图像。我也曾经 var imageBlob = ImageDataUrl.substring(ImageDataUrl.indexOf(",") + 1); 去掉data:image/png;base64, 部分。

现在我必须使用 .json 通过 json 请求发送 base64 字符串 var link = "http://localhost:9002/AppAPI/rest/app/uploadImage?image="+imageBlob;

但是邮递员没有收到任何响应,我的猜测是 base64 字符串中的某些字符会影响 Http 请求 URL。

请问有什么办法可以解决这个问题吗?

0 投票
1 回答
1440 浏览

javascript - 如何在 node.js 服务器中实现 -toDataURL() 函数?

我是一个新手,使用 webgl 实现作为我项目的依赖模块。我正在尝试在服务器端使用 node-webgl 包装器来使用 .toDataURL() 函数。但我得到一个错误站 .toDataURL() 未定义。有关更多详细信息,请查看此链接:canvas.toDataURL() is not a function - error node-webGL wrapper

那么当前的帖子绝对不是重复的。在帖子(早期链接共享)中,我试图找到一种访问画布数据的替代方法。当前这篇文章的目标是实现 .toDataURL() 函数。我是这些 webgl 的新手。您能否分享一些有关如何实现这个小功能的链接或程序。或者我可以访问浏览器实现的相同功能(在此处复制),我在哪里可以得到?

任何建议肯定会有所帮助。

谢谢你。

0 投票
1 回答
608 浏览

android - canvas.toDataURL 不适用于 Android >4 设备(但在 Android 2 上)

我正在用 Cordova/Ionic 构建一个应用程序。用户可以操纵他的画廊照片,然后将其显示在应用程序上。

我现在面临的问题是,操作后,图像不会显示在 Android > 4 设备(Android 4、Android 5、Android 6 等)上。只有一个“找不到图像”的图像可见。但在 Android 2.x 设备上一切正常。

这些版本之间是否有任何重大变化?

操作是通过这个插件完成的。

我的代码如下所示(index.html

应用程序.js

0 投票
1 回答
1163 浏览

javascript - 使用 CanvasRenderingContext2D 过滤器保存画布

我在使用 CanvasRenderingContext2D.filter 保存照片时遇到问题。当我连接到视频并尝试在没有任何滤镜的情况下拍摄时,它会正常保存。但是,在画布上添加了一些过滤器后,它会保存为 HTM 文件或返回以前没有过滤器的照片(如果已制作)。奇怪的是,当通过单击手动下载该屏幕截图时,它确实有自己的 toDataUrl,正常下载并包含过滤器,但在使用 toDataUrl 保存时,它仍然看不到该图片。我应该怎么做才能使用这些滤镜保存照片?

这是我的一段代码:

0 投票
2 回答
147 浏览

php - 保存 base 64 图像会在 PHP 中创建一个空白图像

首先这是我的客户端代码:

这是我的php代码:

我在客户端调整图像大小,然后将其作为数据 url 发送到 php,然后保存为图像。

当我保存图像时,它会在我的服务器上创建一个空白图像。但是,当我在不刷新页面的情况下保存另一个图像时,它会将前一个图像保存在它的位置,这次是正确的。这超出了我的范围,有人可以解释一下吗?

0 投票
1 回答
284 浏览

firefox - Firefox - 操作不安全 [toDataURL]

我在 Wamp 下运行一个本地网站,我想在画布中打开一个本地文件,通过过滤器对其进行编辑,然后再次将其保存回本地。

但是,当我尝试在编辑的画布上使用 .toDataURL() 时,Firefox 会抛出“操作不安全”。

我可以完全控制计算机,并且我想“绕过”这个安全检查,因为 Firefox 正在全屏模式下运行。任何帮助将不胜感激!

0 投票
1 回答
323 浏览

javascript - 在 FabricJS 中导入画布图像时如何缩放文本阴影偏移?

我正在使用 FabricJS 和文本阴影偏移,因为它在将图像渲染为画布上的显示时不适用。

画布上的文字显示如下

在此处输入图像描述

但是在保存画布图像后,它显示如下。

在此处输入图像描述

阴影偏移减少了。

我的阴影偏移功能如下

我认为这与保存功能有关。因为我在保存时使用了乘数并缩放图像。我的保存功能如下?

我认为乘数不受阴影偏移的影响。我如何解决这个问题?

样品小提琴