html - 为什么不能将 datauri img 复制到剪贴板？-6ren

html - 为什么不能将 datauri img 复制到剪贴板？

转载作者：太空狗更新时间：2023-10-29 14:19:05

26

4

我遇到了一个奇怪的问题。我在页面上有一些从数据 URI 呈现的图像，我想让我的用户能够将它们复制到剪贴板。

但是，出于某种原因，Firefox 和 Chrome 似乎都不允许我这样做。

以这个页面为例:

<!doctype html>
<html>
   <head>
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta charset="utf-8" />
   <title>Clipboard Test</title>
</head>
    <body>

    <img id="target" src="data:image/png;base64,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"/>

    </body>
</html>

可用here如果你想尝试一下。

右键单击图像并选择“复制图像”似乎不适用于 Chrome、Firefox 或 IE11。但是，右键单击并“将图像另存为...”确实有效。

因为它在所有浏览器中看起来都是一致的，我假设一定有一个深思熟虑的决定不允许复制这些图像。它是否与 CORS 有关 - 因为数据 URI 具有不同的来源？

我能做些什么来允许复制这些图像吗？

背景是我试图让我的网络应用程序的用户能够将 SVG 图像复制到剪贴板上。我能够将 SVG 图像转换为 PNG 数据 URI，我什至可以将其保存在用户的计算机上，但我似乎无法将它们放到剪贴板上。如果有其他/更好的方法可以做到这一点，请随时指出它们!

更新看来这可能与接收应用程序而不是浏览器有关。在看到@Mi-Creativity 的评论后，我使用其他应用程序重新进行了测试。将此类图像粘贴到 MS Paint 中似乎确实有效，而将它们粘贴到 MS Office 应用程序中则无效。不幸的是，这是我用户的主要用例。

最佳答案

我安装了 inside clipboard工具，并使用它来比较图像使用数据 URI 与普通 HTTP URI 时剪贴板上的数据。使用 Chrome，在这两种情况下，剪贴板上都有四种格式:

CF_BITMAP
CF_DIB
CF_DIBV5
HTML

前三个内容相同。 HTML 版本不同 - 它们包含 HTML 文档的片段，一个带有数据 URI，另一个带有 HTTP URI。

有了这些附加信息，我又进行了一些谷歌搜索，找到了 this类似以前报告的问题。

似乎可能的原因是 MS Office 应用程序试图粘贴 HTML 版本，但失败了，因为 Office 不理解数据 URI，并且忽略了剪贴板上可用的更有用的位图版本。

用户可以通过使用“特殊粘贴”选项来解决这个问题，尽管它比我想要的要复杂得多。

关于html - 为什么不能将 datauri img 复制到剪贴板？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33469357/

26

4

0

文章推荐： git - Git 新手 - 生产和暂存环境

文章推荐： git递归添加所有.tex文件

文章推荐： Git 的 "Bash.exe"与 "Git Bash.vbs"

文章推荐： javascript - 跳过单页站点的导航链接

javascript - Blob 的 DataUri 与 Base64 字符串 DataUri
如你所知&stated in w3可以使用 Blob 的 createObjectUrl 在 javascript 中为 Blob 对象创建 url。另一方面，如果我们有一个 Base64 编码字符串
javascript - 强制下载具有正确文件名的 dataURI？
有没有办法强制最新的 FireFox 打开下载对话框以使用正确的文件名保存一些本地镜像数据(dataURI、dataURL)？我想下载图片。 window.open('data:application
PHP 输出 DataURI base64_encode
我想拍一张本 map 片，调整它的大小并输出dataURI。为什么我的 base64_encode 代码不起作用？ '; $new_image = imagecreatetruecolor($
javascript - 从 dataURI 确定图像的尺寸
我允许用户根据这篇文章从文件系统加载自己的图像文件(最后一部分 - 来自本地文件系统的图像) https://stackoverflow.com/a/20285053 我的代码 handleFiles
css - Sass DataURIs 未闭合的引号
Sass 一直给我未闭合的引号错误: ExecJS::ProgramError - /application.css.scss:10760:41102: Unclosed quote 11:47:13
javascript - 合并两个 dataURI 以创建单个图像
我想生成由标签和图标组成的图像。标签部分会有很大差异(50-100)，而图标大约有 10 个。我想通过将最终图像分成两部分(标签图像和图标图像)以模块化方式制作最终图像。我将构建一个返回标签 data
c# - 将 datauri pdf 转换为文件以附加到电子邮件
我正在使用基本的 telerik 导出文档到 pdf 功能。这非常适合将页面直接导出给用户。然后我通过 datauri 将其作为字符串传递给 Controller 。如何将其转换回文件以便我可以
javascript - DataURI 而不是图像是否适用于 API 和网络服务？
我正在编写一个 javascript 应用程序，它从基于 PHP 的 API 中获取数据作为 JSON。当前图像 URL 是从 API 接收的，然后用于使用显示它们。标签。使用 dataURI
javascript - 如何将 OffscreenCanvas 转换为 DataURI
我需要在 OffscreenCanvas 上进行一些绘图，然后将其显示为 div 元素的背景图像。最简单的方法是什么？最佳答案对您来说最简单的方法是使用OffscreenCanvas.conve
javascript - 带有 XmlHttpRequest 的 DataURI
是否可以在 XmlHttpRequest (AJAX) 调用中使用 DataURI 而不是 URL，这样它就不会真正通过网络传输，而是使用客户端中已有的数据？我打算尝试一下，但我想看看是否有人做过类似
javascript - IE Canvas dataURI 安全错误
我从 DOM 中获取一些 SVG，将其转换为 dataURI，将其作为图像绘制到 Canvas 元素，然后读取图像数据的像素。这在 chrome 和 FF 中运行良好，但 IE 10 给我一个安全错误
html - 为什么不能将 datauri img 复制到剪贴板？
我遇到了一个奇怪的问题。我在页面上有一些从数据 URI 呈现的图像，我想让我的用户能够将它们复制到剪贴板。但是，出于某种原因，Firefox 和 Chrome 似乎都不允许我这样做。以这个页面为例
javascript - 在 Chrome 中下载 datauri 背景图像的快速方法是什么？
很多时候图像会内联在网站上，要么是img标签的src属性有数据url字符串而不是链接，要么css背景属性值是url(..)，其中包含数据url而不是url。如何下载该图片，尤其是背景图片。现在
javascript - 如何将 datauri 元素转换为可以通过 React 上传的文件？
我正在通过 React webapp 将文件发送到 api 端点，目前作为模型一直在使用文件上传。此后我添加了相机功能，因为我计划让用户能够拍照并上传该照片。我正在使用 react-html5-cam
javascript - onload 处理程序无法针对 dataURI 触发
当 src 时，我无法触发 onLoad 处理程序的属性加载了 dataURI。 Here is the jsFiddle . 这似乎是浏览器兼容性问题。处理程序在 Firefox 中按预期触发。
javascript - 从 ajax 提供的 dataURI 创建视频文件
好吧，我已经阅读了至少一百篇关于此的文章，但我找不到明确的例子来准确地做我想做的事情。我正在使用 RecordRTC 来获取我的视频。我可以以 blob:http://www.example.com/
javascript - fswebcam : getting a dataURI via Node. js
我在 Raspberry Pi 上运行了 fswebcam。使用命令行，这将保存 JPG 图像。我现在想在 Node.js 应用程序中接收这些图像，并通过 dataURI 将它们发送到浏览器中使用。
javascript - chrome.tabs.executeScript 到 dataURI 选项卡
问题很简单(问) 有什么方法可以将脚本注入(inject)仅包含图像的选项卡并具有以下形式的 URL: data:image/png;base64,iVBORw0K.... 控制台给我错误: 无法访
javascript - 将 dataURI 图像从 JavaScript 解析为 PHP
我在 JavaScript 中创建了一个函数，将用户选择的“图像”文件转换为 dataURI。然后我通过 POST 方法将其传递给 php 脚本。问题是当我尝试将这些信息保存到 MySQL 中时，如下
javascript - 将 div 或 svg 转换为 datauri
我基本上创建了一个FIDDLE并制作了一个示例图表。这是图表的代码 var chart = c3.generate({ data: { json: [{

首页

博学

6Ren·AI

商城

html - 为什么不能将 datauri img 复制到剪贴板？