根据图片远程地址复制图片内容,可以在富文本、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("复制失败");
      }
    },
相关推荐
合作小小程序员小小店9 分钟前
桌面开发,在线%超市销售管理%系统,基于vs2022,c#,winform,sql server数据
开发语言·数据库·microsoft·c#
D***t13115 分钟前
前端微服务案例
前端
哀木28 分钟前
诶,这么好用的 mock 你怎么不早说
前端
Lear43 分钟前
UniApp PDF文件下载与预览功能完整实现指南
前端
Heo1 小时前
关于XSS和CSRF,面试官更喜欢这样的回答!
前端·javascript·面试
Q***l6871 小时前
C++在计算机图形学中的渲染
开发语言·c++
0和1的舞者1 小时前
《网络编程核心概念与 UDP Socket 组件深度解析》
java·开发语言·网络·计算机网络·udp·socket
惜棠1 小时前
visual code + rust入门指南
开发语言·后端·rust
n***i951 小时前
Rust在嵌入式系统中的内存管理
开发语言·后端·rust
q***06291 小时前
ThinkPHP和PHP的区别
开发语言·php