当前位置: 首页 > news >正文

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

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.调用方法

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

2.封装方法

//传输图片的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,格式为pngthis.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("复制失败");}},
http://www.dtcms.com/a/330794.html

相关文章:

  • word——删除最后一页空白页
  • Exif.js获取手机拍摄照片的经纬度
  • 【网络】TCP/UDP总结复盘
  • Unity人形角色IK优化指南
  • AI搜索优化专家孟庆涛:以技术温度重构“人机信息对话”新范式
  • 手机实时提取SIM卡打电话的信令声音-当前现状与思考
  • CICD-DevOps进阶-2
  • 提升工作效率的利器:GitHub Actions Checkout V5
  • 多种适用于 MCU 固件的 OTA 升级方案
  • Qt基本控件
  • 飞算JavaAI金融风控场景实践:从实时监测到智能决策的全链路安全防护
  • 西门子TIA-FOR循环多路PID控制器(PID_Compact)
  • VirtualBox虚拟机Ubuntu18.04安装hdl_localization保姆级教程
  • 【自动化运维神器Ansible】template模块深度解析:动态配置文件生成的艺术
  • RxJava Android 创建操作符实战:从数据源到Observable
  • 十一,算法-快速排序
  • 大带宽服务器具体是指什么?
  • 十分钟学会一个算法 —— 快速排序
  • 【03】VMware安装麒麟操作系统kylin10sp3
  • Docker运行python项目:使用Docker成功启动FastAPI应用
  • vue3+leaflet案例:告警系统GIS一张图(附源码下载)
  • Mybatis实现页面增删改查
  • 服务器的定义-哈尔滨云前沿
  • [机器学习]07-基于多层感知机的鸢尾花数据集分类
  • Effective Java笔记:要在公有类而非公有域中使用访问方法
  • 解决Maven编译时JAVA_HOME配置错误问题:从报错到根治的完整方案
  • 自动驾驶与人形机器人的技术分水岭
  • springboot博客实战笔记02
  • React.memo、useMemo 和 React.PureComponent的区别
  • 智慧城市SaaS平台/专项管理系统