html图片如何复制到剪贴板,记js复制图片到剪贴板的坑
故事背景,需要直接在页面上点击一键粘贴按钮,自动复制服务生成的图片到剪贴板方便业务一些粘贴发送给客户。
1、开始做法,使用原生的document.execCommand('copy')进行复制,代码如下。虽然也能实现了图片的复制,但粘贴的结果不是很理想,有些只能在微信上粘贴,钉钉、浏览器富文本上不能;有些是微信可以钉钉、富文本不行。总之就会出现有些黏贴不到的情况。
#原生js写法
const targetPic = new Image()
targetPic.onload = e => {
targetPic.setAttribute('contenteditable', true)
document.body.appendChild(targetPic)
const selection = window.getSelection()
const range = document.createRange()
range.selectNode(targetPic)
selection.removeAllRanges()
selection.addRange(range)
document.execCommand('copy')
targetPic.setAttribute('contenteditable', false)
document.body.removeChild(targetPic)
this.isuTip.success('复制成功')
this._recordUserBehavior(32)
this.dispatchEvent(new CustomEvent('has-send-quote', {bubbles: true, composed: true}))
this.cancel()
}
targetPic.src = targetUrl
2、然而需求就是要实现这样一个功能,无奈只能另外寻找法子。
回过头看看,浏览器是如何获取剪切板中的图片?
ocument.addEventListener('paste', function (event) {
var items = event.clipboardData && event.clipboardData.items;
var file = null;
if (items && items.length) {
// 检索剪切板items
for (var i = 0; i < items.length; i++) {
if (items[i].type.indexOf('image') !== -1) {
file = items[i].getAsFile();
break;
}
}
}
// 此时file就是剪切板中的图片文件
});
直接上代码如上所示,就是直接从clipboardData.items 中获取图片文件进行处理的(经过调试发现,原先的方法复制出来的图片,浏览器识别为html格式不是文件格式)。那么直接往clipboardData.items写入图片文件不就可以了?查询了一下,果然有对应的api。使用如下,果然行的通。
const data = await fetch(`/img.img1.png`)
// const data = await fetch('/management/attachments/63848472471ea1095093874a498d25dba07d478a.do')
const blob = await data.blob()
await navigator.clipboard.write([
// eslint-disable-next-line no-undef
new ClipboardItem({
[blob.type]: blob
})
])
console.log('Fetched image copied.')
} catch (err) {
console.error(err.name, err.message)
注: 浏览器为了安全,navigator.clipboard必须在https下才能使用
html图片如何复制到剪贴板,记js复制图片到剪贴板的坑相关推荐
- html图片自动循环轮播图,js实现图片无缝循环轮播
本文实例为大家分享了js实现图片无缝循环轮播的具体代码,供大家参考,具体内容如下 代码如下 Document #container{ overflow:hidden; width:400px; hei ...
- html图片自动左右轮播,原生JS实现图片左右轮播
本效果使用js实现,当图片移动到200像素后回到0像素再向右移动200像素一直左右移动,不需要marquee标签. 完整的HTML代码如下,保存到HTML文档打开可以查看效果: JS使图片左右移动_何 ...
- html原生js实现图片轮播,如何用原生JS实现图片轮播
图片轮播大多应用在商品展示中. 实现方法:主要通过原生javascript编写. 实现原理: 上图中看到中间的图片就是要展示的图片,只要将所有图片并排放到一个div中然后再放到展示固定大少的窗口当中, ...
- php中实现图片自动轮播,基于vue.js实现图片轮播效果
轮播图效果: html {{sd.title}} js export default { components: { }, ready: function() { var _this=this; va ...
- 前端JS获取图片文件的真实格式
目录 常见方式判断图片格式 图像数据简单说明 JS读取图片真实格式 svg格式的判断 总结 前面博文有提到,当前主流浏览器能支持的图片格式,是七种:jpg.png.gif.bmp.ico.webp.s ...
- js 复制文字和图片到剪贴板
js 复制文字和图片到剪贴板 最近有个需求,要同时复制多张图片和文字到剪贴板,网上找了好多方法,都不行,最后上个厕所,想到直接翻w3c文档,终于实现了.让大家不迷路,共享出来,不用谢,点赞就行. 不多 ...
- js 复制图片到剪切板 和 js复制文本到剪切板
js 复制图片到剪切板 <a href="javascript:;" id="copyQrcode" data-base=""> ...
- js复制图片文字图文分享到微信/QQ,插件clipboard.js的应用案例
js复制图片-文字,可用于商品复制文案进行分享的功能~ 1.此案例应用到clipboard.js,具体使用可查阅文档: 2.这个框架功能还是比较强大的,复制文本和图片,复制成功后的html的标签会被去 ...
- js 复制图片到微信
目录 需求:点击图片下的 复制二维码 实现复制图片功能 实现:基于浏览器 Navigator.clipboard API实现 注意:兼容性 需求:点击图片下的 复制二维码 实现复制图片功能 点击图 ...
最新文章
- L1-006 连续因子
- mysql memcache搭建_Memcached 搭建过程
- 苹果笔记本中为虚拟机扩充硬盘的方法
- c盘怎么扩容_给电脑减压,C盘清理全攻略!
- 【SignalR学习系列】4. SignalR广播程序
- 富文本编辑器Quill(二)上传图片与视频
- 网易云解码实时音视频社交 成就游戏产业发展新变量
- 项目实施管理之系统演示
- 二进制数表示形式:原码、反码与补码
- MFC线程自定义消息
- [转载] Python中的memoryview
- git version可以卸载吗_「玩转Git命令」作为代码奴,该安装Git啦
- 一起学libcef--一个应用libcef的简单例子(windows程序)
- 别学英语了!微软给PPT和Skype新加的这个功能,让你和老外从此交流无障碍
- tomcat+nginx配置htpps
- 交换机ftp将文件传到服务器,如何用FTP实现交换机间配置文件复制?
- 紫外线杀菌装置:过流式Photoscience紫外线杀菌器
- 第十一届蓝桥杯大赛软件类B组省赛题目(2020蓝桥杯)
- Win32编程---在窗体添加一个按钮
- 欧拉中的俯仰、横滚、偏航角
热门文章
- SpringBoot源码初学者(二):SpringBoot事件监听器
- Cloze Test Helps: Effective Video Anomaly Detection via Learning to Complete Video Events 速读整理
- 古代妻妾成群的大户西门庆是怎样过年的
- iOS bundle format unrecognized, invalid, or unsuitable
- 高德地图JS API制作专题图
- Centos服务器的端口映射
- 8通道250MSPS采样率16位AD采集FMC子卡-高速数据采集专家
- Python入门学习day05--龙腾数
- CAP(Cumulative Accuracy Profile)曲线/AR值释义
- 软件工程的四项基本原则