vue复制图片到剪切板

最开始使用clipboard2，本地和测试环境都能运行，到了生产环境就无法粘贴到微信。

后来搜索到可以将图片转换成blod直接复制到剪切板，代码如下

<img :src="codeUrl" width="200px" id="img_body">

<el-button v-if="copyLink" type="text" @click="copyImg">复制二维码</el-button>

async copyImg(e) {var _this = thisconst img = document.querySelector('#img_body')const setToClipboard =  blob => {const data = [new ClipboardItem({ [blob.type]: blob })]return navigator.clipboard.write(data)}try {const response = await fetch(img.src)const blob =  await response.blob()setToClipboard(blob)_this.$message({message: '复制成功',type: 'success'})} catch (error) {_this.$message({message: '复制失败',type: 'error'})}
}

注：需要https或者本地环境才可以获得剪切板权限

vue复制图片到剪切板相关推荐

html5图片剪切板,JavaScript 网页端复制图片到剪切板
前端页面可能需要复制图片到剪切板的功能,这里使用JavaScript来实现这一功能,兼容大部分浏览器全部代码复制图片到剪切板复制图片 var SelectText = function (ele ...
js 复制图片到剪切板和 js复制文本到剪切板
js 复制图片到剪切板 <a href="javascript:;" id="copyQrcode" data-base=""> ...
JS复制图片到剪切板读取剪切板
JS复制图片到剪切板读取剪切板 navigator.clipboard实现复制图片图片写入剪切板 function handleCopyImg() { const canvas = documen ...
html5图片剪切板,原生js实现基于base64数据复制图片到剪切板，可以粘贴出图片，模拟浏览器复制功能。...
原生js实现基于base64数据复制图片到剪切板,可以粘贴出图片,模拟浏览器复制功能.前言: 初次发帖排版略丑,见谅.之前我们这边有个需求就是说,前端通过canvas截图然后, 点击一个按钮实现复制截 ...
java 复制图片到剪切板
Java 如何复制图片到剪切板呢? 下面是我做的一个软件: 项目源代码见附件这里面就有"复制图片到剪切板"功能.核心方法如下: Java代码 /*** * 复制图片到剪切板 ...
JS复制图片到剪切板
业务场景系统中展示多张图片叠加展示,客户要求单击图片实现,将叠加的效果图复制到PC的剪切板,可以在社交等其他软件中粘贴. 网上复制文字的案例很多,这里分享一个复制图片到剪切板的代码,亲测有效. wi ...
VUE 点击按钮复制图片到剪切板
非常感谢这位大佬文章 vue中使用 clipboard.js 一键复制dom里的图片_Var的博客-CSDN博客刚开始没有复制成功,发现是我在本地展示图片的时候img src可以正常加载, ...
html图片如何复制到剪贴板,js 如何实现复制图片到剪切板
首先复制到剪切板,复制的是数据.图片看到的只是一种表现形式,图片可以用 js 对象 File.Blob.DataURL(base64) 体现出来. 又看到 document.execCommand(' ...
js实现复制图片到剪切板下载图片
完整需求是这样的:生成一个二维码,然后提供复制和下载按钮.如果你是页面上已有一个图片,可以直接跳过前面的部分. 经后来测试,发现这种方法并不通用,我在qq和微信中不能粘贴,但是在钉钉中可以粘贴.具体原 ...

vue复制图片到剪切板

vue复制图片到剪切板相关推荐

最新文章

热门文章