广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue实现复制文字复制图片实例详解
  • 210
分享到

vue实现复制文字复制图片实例详解

vue复制文字图片vue 复制 2023-02-23 11:02:25 210人浏览 泡泡鱼
摘要

目录正文方法复制文本复制图片正文 复制文字和图片是我们经常会使用到的需求,我们这篇文章主要介绍使用navigator.clipboard.write()来实现复制文字和图片。不过这

正文

复制文字和图片是我们经常会使用到的需求,我们这篇文章主要介绍使用navigator.clipboard.write()来实现复制文字和图片。不过这个属性是需要考虑浏览器的兼容性的,可以参考MDN

document.execCommand('copy')

在很久之前我们是使用document.execCommand('copy')来实现复制文本的,但是现在mdn上已经将这个命令废弃了。

当一个 html 文档切换到设计模式时,document暴露 execCommand 方法,该方法允许运行命令来操纵可编辑内容区域的元素。如果传入copy命令,那么就能实现复制的功能。

比如像下面这样

  // 复制文字
  copyText(link, cb) {
    let input = document.createElement('textarea');
    input.style.CSSText = 'position: absolute; top: 0; left: 0; opacity: 0; z-index: -10;';
    input.value = link;
    document.body.appendChild(input);
    input.select();
    document.execCommand('copy');
    document.body.removeChild(input);
    if (typeof cb === 'function') {
      cb();
    }
  }

Clipboard

Clipboard 接口实现了 Clipboard api,如果用户授予了相应的权限,其就能提供系统剪贴板的读写访问能力。在 WEB 应用程序中,Clipboard API 可用于实现剪切、复制和粘贴功能。

方法

Clipboard提供了以下方法,方便我们读取剪切板的内容。

  • read():从剪贴板读取数据(比如图片),返回一个 Promise对象。在检索到数据后,promise 将兑现一个 ClipboardItem对象的数组来提供剪切板数据。
  • readText():从操作系统读取文本;返回一个 Promise,在从剪切板中检索到文本后,promise 将兑现一个包含剪切板文本数据的 DOMString
  • write(): 写入任意数据至操作系统剪贴板。这是一个异步操作,在操作完成后,返回的 promise 的将被兑现。
  • writeText(): 写入文本至操作系统剪贴板。返回一个 Promise,在文本被完全写入剪切板后,返回的 promise 将被兑现。

复制文本

复制文本的方法很简单,就是使用navigator.clipboard.writeText()方法。

具体代码实现如下:

copyTextToClipboard(text) {
  return new Promise((resolve, reject) => {
    navigator.clipboard.writeText(text).then(
      () => {
        resolve(true)
      },
      () => {
        reject(new Error('复制失败'))
      }
    )
  })
}

复制图片

复制图片主要用到navigator.clipboard.write()方法。 因为我们在页面中通常是要根据一个img元素复制图片,主要实现思路如下:

  • 先将img元素转成base64
  • 再将base64转成blob对象
  • 根据blob对象new一个ClipboardItem对象
  • 最后再根据navigator.clipboard.writeText()将内容写入剪贴板中

具体代码实现如下:

  // 图片元素转base64
  getBase64Image(img) {
    let canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    let ctx = canvas.getContext('2d');
    ctx?.drawImage(img, 0, 0, img.width, img.height);
    let dataURL = canvas.toDataURL('image/png');
    return dataURL;
  },
  // base64图片转为blob
  getBlobImage(dataurl) {
    let arr = dataurl.split(',');
    let mime = arr[0].match(/:(.*?);/)[1];
    let bstr = atob(arr[1]);
    let n = bstr.length;
    let u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
  },
  // 复制图片
  copyImage(dom, cb) {
    let dataurl = this.getBase64Image(dom);
    let blob = this.getBlobImage(dataurl);
    navigator.clipboard.write([
      new window.ClipboardItem({
        [blob.type]: blob
      })
    ]).then(function() {
      if (typeof cb === 'function') {
        cb();
      }
    }, function() {
      console.log('图片复制失败!');
    });
  }

以上就是Vue实现复制文字复制图片实例详解的详细内容,更多关于vue复制文字图片的资料请关注编程网其它相关文章!

--结束END--

本文标题: vue实现复制文字复制图片实例详解

本文链接: https://www.lsjlt.com/news/197231.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue实现复制文字复制图片实例详解
    目录正文方法复制文本复制图片正文 复制文字和图片是我们经常会使用到的需求,我们这篇文章主要介绍使用navigator.clipboard.write()来实现复制文字和图片。不过这...
    99+
    2023-02-23
    vue复制文字图片 vue 复制
  • vue怎么实现复制文字和图片
    本篇内容主要讲解“vue怎么实现复制文字和图片”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue怎么实现复制文字和图片”吧!document.execCommand('copy'...
    99+
    2023-07-05
  • Java 浅复制和深复制的实例详解
    Java 浅复制和深复制的实例详解1 浅复制和深复制区别浅复制:浅复制只是复制本对象的原始数据类型,如int、float、String,对于数组和对象引用等是不会复制的。因此浅复制是有风险的。深复制:不但对原始数据类型进行复制,对于对象中的...
    99+
    2023-05-31
    java 浅复制 深复制
  • Python复制文件操作实例详解
    本文实例讲述了Python复制文件操作用法。分享给大家供大家参考,具体如下: 这里用python实现了一个小型的自动发版本的工具。这个“自动发版本”有点虚, 只是简单地把debug 目录下的配置文件复制到指...
    99+
    2022-06-04
    详解 实例 操作
  • Android中复制图片的实例代码
    activity_main.xml中的配置<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://sc...
    99+
    2023-05-30
    android 复制图片 roi
  • Python实现强制复制粘贴的示例详解
    目录前因后果流程思路代码展示效果展示前因后果 公司有人阳了,今天在家上班,突然小姨子就问我有没有baidu文库会员,想下载点东西,我心想这还要会员?用Python不是分分钟的事情! ...
    99+
    2022-12-19
    Python强制复制粘贴 Python 复制粘贴
  • Java使用字节流实现图片音频的复制
    Java字节流复制图片音频 java中的字节流可以实现文本的读入写入,当然也可以实现字节流对于图片的读入写入,就只需要写一个复制文本的字节输入输出流,然后在源文件和目标文件更换后缀图...
    99+
    2022-11-12
  • java 中复合机制的实例详解
    java 中复合机制的实例详解继承的缺陷继承的缺陷是由它过于强大的功能所导致的。继承使得子类依赖于超类的实现,从这一点来说,就不符合封装的原则。一旦超类随着版本的发布而有所变化,子类就有可能遭到破坏,即使它的代码完全没有改变。为了说明的更加...
    99+
    2023-05-31
    java 复合 ava
  • C语言复杂链表的复制实例详解
    目录一、题目描述示例1:示例2:示例3:示例4:二、思路分析三、整体代码总结一、题目描述 请实现 copyRandomList 函数,复制一个复杂链表。在复杂链表中,每个节点除了有一...
    99+
    2022-11-13
  • 基于C#实现在图片上绘制文字
    目录实践过程效果代码实践过程 效果 代码 public partial class Form1 : Form { public Form1() { ...
    99+
    2022-12-19
    C#图片绘制文字 C#图片 文字
  • 汇编语言功能实现数据复制实例详解
    目录问题1:将内存ffff:0~ffff:b单元中的数据复制到0:200~0:20b单元中问题2:将“mov ax,4c00h“之前的指令复制到内存0:200处问题3:将程序中定义的...
    99+
    2022-11-12
  • 微信小程序实现文字长按复制、一键复制功能
    一、不引入外部组件的实现方式 ...
    99+
    2023-09-09
    微信小程序 小程序 前端
  • 怎么在Java中使用字节流实现图片音频的复制
    怎么在Java中使用字节流实现图片音频的复制?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。Java字节流复制图片音频java中的字节流可以实现文本的读入写入,当然也可以实现...
    99+
    2023-06-15
  • Mongo复制集同步验证的实例详解
    mongo复制集同步验证的实例详解 第一步:在主节点上插入一条数据 Sql代码  rs0:PRIMARY> use imooc switched to db imooc rs0...
    99+
    2022-10-18
  • vue中如何实现复制内容到剪切板详解
    目录1. element-ui的el-table实现双击复制单元格的内容到剪切板1. 在el-table中添加双击响应事件2. 在methods中添加双击绑定的copyText方法2...
    99+
    2022-11-13
    vue 复制到剪切板 vue实现复制功能 vue复制指定内容到剪切板
  • 基于C#如何实现在图片上绘制文字
    本篇内容介绍了“基于C#如何实现在图片上绘制文字”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!效果代码public partial...
    99+
    2023-07-04
  • Pythonpyecharts实现绘制中国地图的实例详解
    目录实例演示1.pyecharts 1.9.1 版本安装与数据准备2.添加数据项,默认中国地图显示常用配置项及参数解析1.设置是否默认选中2.设置地图颜色类型是否分段显示3.缩放平移...
    99+
    2022-11-12
  • vue实现图片路径转二进制文件流(binary)
    目录图片路径转二进制文件流(binary)图片路径转换为Base64Base64转换为二进制文件流(binary)下载二进制流文件Blob、ajax(axios)图片路径转二进制文件...
    99+
    2022-11-13
  • 在Node.js中实现文件复制的方法和实例
    Node.js 本身并没有提供直接复制文件的 API,如果想用 Node.js 复制文件或目录,需要借助其他的 API 来实现。复制单个的文件可以直接用 readFile、writeFile,这样比较简便。...
    99+
    2022-06-04
    实例 文件 方法
  • 微信小程序如何实现文字长按复制与一键复制功能
    本篇内容介绍了“微信小程序如何实现文字长按复制与一键复制功能”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一、不引入外部组件的实现方式&nb...
    99+
    2023-07-05
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作