html图片如何复制到剪贴板,js 如何实现复制图片到剪切板

首先复制到剪切板，复制的是数据。图片看到的只是一种表现形式，图片可以用 js 对象 File、Blob、DataURL(base64) 体现出来。

又看到 document.execCommand('copy') api 拷贝的是可编辑区域的选中内容，所以可以通过拷贝 base64 的形式来完成图片的拷贝

$('#btn').addEventListener('click', async (e) => {

// 首先要拿到图片的 file 对象

let file = inputFile.files[0]

let base64 = await fileToDataURL(file)

let isSuccess = createInputAndCopy(base64)

})

function createInputAndCopy (strValue) {

let inputEle = document.createElement('input')

inputEle.setAttribute('readonly', true)

inputEle.setAttribute('value', strValue)

document.body.appendChild(inputEle)

// 选中

inputEle.select()

let isCopyed = document.execCommand('copy')

// document.body.removeChild(inputEle)

return isCopyed

}

function fileToDataURL (file) {

let reader = new FileReader()

return new Promise((resolve, reject) => {

reader.onload = (e) => {

let base64 = e.target.result

resolve(base64)

}

reader.readAsDataURL(file)

})

}

html图片如何复制到剪贴板,js 如何实现复制图片到剪切板相关推荐

js如何将内容添加到剪切板？
话不多说,直接上代码方式1: 使用: document.execCommand 注意:即将被弃用了 copyToClip(content,tips) {console.log("复制的内容 ...
html图片轮播代码渐隐,js淡入淡出的图片轮播效果代码分享
本文实例讲述了淡入淡出的js图片轮播效果代码.分享给大家供大家参考.具体如下: 运行效果图:----------------------查看效果----------------------- 小提示: ...
html如何清理缓存图片,H5案例分享：js、css和图片等静态文件更新时如何避免浏览器缓存...
在做web项目的中,我们不可避免的会引入一些css.js和图片等文件,但是更新文件后,却经常出现因浏览器缓存问题,导致即使更改了代码或者图片,但是在浏览器上访问的时候却没有发生变化,这是因为现在大多数 ...
Android将内容复制到剪切板
近期,项目里需要用到将部分内容复制到剪切板,以前用到都是随用随找,挺麻烦的,最近整理一下,在这里记录一下其实Android提供的剪贴板框架,Android提供ClipboardManager.Cli ...
js实现一键复制到剪切板上_js实现各种复制到剪贴板的方法
一.实现点击按钮,复制文本框中的的内容 function copyUrl2() { var Url2=document.getElementById("biao1"); Url2. ...
点击按钮自动复制到剪贴板的实现
应用场景:你可以在网页上放置文字,在点击文字后你就可以将文字所带的url复制到剪贴板,然后就可以复制到你想到的任何地方. 购票链接:<a href="javascript:void(0 ...
如何在Vim中复制到剪贴板？
是否可以直接从Vim复制到剪贴板? yy只复制东西给Vim的内部缓冲区. 我想复制到操作系统的剪贴板. 在Vim中有没有这样的命令,或者你只能在Vim中猛拉东西? #1楼在vimrc文件中,您可以指 ...
html鼠标点击切换图片,js鼠标点击图片切换效果代码分享
本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不 ...
js大屏导出图片_超大图片全屏动态展示js插件
intense-images是一款非常实用的超大图片全屏动态展示js插件.该图片查看插件可以全屏显示超大图片,可以使用鼠标来和图片进行交互,上下左右移动鼠标会相应的移动图片,对于超大图片的展示是非常好 ...

html图片如何复制到剪贴板,js 如何实现复制图片到剪切板

html图片如何复制到剪贴板,js 如何实现复制图片到剪切板相关推荐

最新文章

热门文章