首页 > 其他分享 >js 复制内容及图片

js 复制内容及图片

时间:2024-05-11 16:21:14浏览次数:14  
标签:剪贴板 await share js content 复制 blob 图片

//复制纯文本

 async copyText(str) {
      try {
        // 将链接复制到剪贴板 注意访问id环境下不可用
        await navigator.clipboard.writeText(str);
        this.$Message.success("复制成功");
      } catch (err) {
        // 如果复制失败,处理错误
        // console.error('无法复制链接到剪贴板', err);
      }
    }
//将弹窗内容复制为图片
   <div class="share_content" ref="share_content">
     弹窗内容
    </div>

  let share_content = this.$refs.share_content;
        if (share_content) {
          let canvas = await html2canvas(share_content);
          // 将 Canvas 转换为图片
          var img = canvas.toDataURL("image/png");
            try {
        // 创建一个Blob对象
        const blob = await fetch(img).then((response) => response.blob());
        // 创建一个包含Blob对象的ClipboardItem
        const item = new ClipboardItem({ [blob.type]: blob });
        // 将ClipboardItem写入剪贴板
        await navigator.clipboard.write([item]);
        this.$Message.success("复制成功");
      } catch (err) {
        // console.error('无法复制图片到剪贴板', err);
      }
        }

 

标签:剪贴板,await,share,js,content,复制,blob,图片
From: https://www.cnblogs.com/guozhongbo/p/18186702

相关文章

  • js 录制视频及拍照
    <style>span{cursor:pointer;}.playvideo{position:relative;height:500px;}video{width:800px;height:500px;border:1pxsolid#000;object-fit:fill;}canvas{......
  • Fastjson反序列化漏洞2:BasicDataSource利用链-用于内网
    之前说的Fastjson的利用链,补充来了,没有偷懒(狗头)前情提要:BCEL:加载恶意类、Fastjson反序列化漏洞1:吹吹水Fastjson干了啥Fastjson就是处理json用的,可以将json转换成对象(自定义的一套序列化和反序列化)举个例子:下面这个json字符串经过JSON.parse(jsonString)处理可以得到com.test......
  • js 遍历数组取出字符串用逗号拼接
    var arr=[{"name":"hhh"},{"name":"dddd"}] //用jsfunction getTextByJs(){    var str= "";    for (var i=0;i<arr.length;i++){        str+=arr[i].name+ ",";    }    //去掉最后一个逗号(如......
  • js之模块导入与导出:export、export default、module.exports、exports
    前两者export、exportdefault可为一组,是es6的规范,和import匹配,import是es6中的语法标准;后两者module.exports、exports可为一组,是commonjs的规范,和require匹配,require是amd规范下的引入方式。当组合不适配时,当然就会报错了。module.exports、exports1,从使用方式来看,exports是mo......
  • 如何批量复制多个文件到多个目录中(批量复制文件,多对多文件高效操作的方法)
    首先,需要用到的这个工具:度娘网盘提取码:qwu2蓝奏云提取码:2r1z现在开始说具体操作1、首先,我准备了3个文件夹和两个可爱的图片:当然,在实际使用的时候肯定不止这些,我这里只是演示一下下。2、然后打开这个工具,按下CTRL+5,切换到文件批量复制的功能模块。把两种图片选中后,拖......
  • 使用js有效括号匹配封装函数
    点击查看代码functionisValidParentheses(str){//定义一个栈,用于存储待匹配的左括号letstack=[];//定义一个对象,用于快速判断括号是否成对constpairs={')':'(','}':'{',']':'['};//遍历输入字符串for(let......
  • Error: Cannot find module 'C:\Program Files\nodejs\node_modules\npm\bin\no
     #参考:https://stackoverflow.com/questions/69541725/error-cannot-find-module-c-program-files-nodejs-node-modules-npm-bin-node-mod --- #问题描述在一直倒腾重新安装nodejs时报的一个这样的错,记录一下 在执行npm-v时报了如标题的错,见下图 --- #原因......
  • [idea]mvn install没有问题,idea build报错程序包com.alibaba.fastjson不存在
    现象:1、mvninstall没有问题2、ideabuild报错程序包com.alibaba.fastjson不存在3、File->Settings->Build,Execution,Deployment->Compiler自动编译选项也是勾选的解决:1、委托maven构建和运行,确实能执行;但是运行都要执行maveninstall,速度慢 -- 不推荐 2、在......
  • Mapbox GL JS access token 问题
    使用MapboxGLJS时出现如下错误Error:AvalidMapboxaccesstokenisrequiredtouseMapboxGLJS.Tocreateanaccountoranewaccesstoken,visithttps://account.mapbox.com/解决方法:(1)MapBox在内网使用时,accesstoken不能使用,导致局域网内地图服务不能使用,只需修......
  • c# 图片格式转换
    ImageConvert(@"E:\素材\xx.png",@"E:\素材\xx.ico");publicstaticvoidImageConvert(stringimagePath,stringoutPath){Imageimg=Image.FromFile(imagePath);varwidth=32;varheight=32;Sizesize;if((w......