根据图片远程地址复制图片内容,可以在富文本、word等文本里粘贴



1.调用方法

javascript 复制代码
<span
    @click="copyHandleImg('https://gxxxxyun.com/181bdef14fa.jpg')"
     v-if="!!company_info_sub.sub_company_name"
     class="copyText"
     >复制
</span>

2.封装方法

javascript 复制代码
//传输图片的url
copyHandleImg(url) {
      var canvas = document.createElement("canvas"); // 创建一个画板
      let image = new Image();
      image.setAttribute("crossOrigin", "Anonymous"); //可能会有跨越问题
      image.src = url;
      image.onload = () => {
        // img加载完成事件
        canvas.width = image.width; //设置画板宽度
        canvas.height = image.height; //设置画板高度
        canvas.getContext("2d").drawImage(image, 0, 0); //加载img到画板
        let url = canvas.toDataURL("image/png"); // 转换图片为dataURL,格式为png
        this.clipboardImg(url); // 调用复制方法
      };
    },

    // 从url下载并复制图片,如果是png格式的图片直接调用此方法就能复制成功
    async clipboardImg(url) {
      try {
        const data = await fetch(url);
        const blob = await data.blob();
        await navigator.clipboard.write([
          new window.ClipboardItem({
            [blob.type]: blob,
          }),
        ]);
        alert("复制成功");
      } catch (err) {
        alert("复制失败");
      }
    },
相关推荐
counting money8 小时前
Java IO流详解:从InputStream到文件操作实战
java·开发语言·python
90后的晨仔8 小时前
uni-app项目 Vue3 状态管理 Pinia 完全指南:从概念到实战的深度解析
前端
wuyk5558 小时前
98.C语言易混难点:字符数组与字符串指针的底层差异
c语言·开发语言·c++·stm32·嵌入式硬件·算法
90后的晨仔8 小时前
uni-app 在 iOS 平台跳转页面时移除底部安全区域的完整技术指南
前端
峥无8 小时前
从0到1手撕红黑树:封装实现 my_map 与 my_set(SGI-STL 源码级深度解析)
开发语言·c++·笔记·算法·stl
用户938515635078 小时前
React + JWT 登录鉴权底层原理与工程化实践
前端·react.js
波特率1152009 小时前
C++新特性---属性说明符与标准属性
开发语言·c++
zww89491119 小时前
家政派单系统开发实战:架构设计与派单算法指南
前端·系统架构
程序员小八7779 小时前
上海百度B端java后端日常实习一面
java·开发语言
wp123_19 小时前
IPX8 防水 Type‑C连接器:安费诺 124018792112A 与 TONEVEE TY48087‑24A 技术梳理
c语言·开发语言