返回顶部
首页 > 资讯 > 前端开发 > 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://lsjlt.com/news/197231.html(转载时请注明来源链接)

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

猜你喜欢
  • 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 浅复制 深复制
  • 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复制文件操作实例详解
    本文实例讲述了Python复制文件操作用法。分享给大家供大家参考,具体如下: 这里用python实现了一个小型的自动发版本的工具。这个“自动发版本”有点虚, 只是简单地把debug 目录下的配置文件复制到指...
    99+
    2022-06-04
    详解 实例 操作
  • Python实现强制复制粘贴的示例详解
    目录前因后果流程思路代码展示效果展示前因后果 公司有人阳了,今天在家上班,突然小姨子就问我有没有baidu文库会员,想下载点东西,我心想这还要会员?用Python不是分分钟的事情! ...
    99+
    2022-12-19
    Python强制复制粘贴 Python 复制粘贴
  • Java使用字节流实现图片音频的复制
    Java字节流复制图片音频 java中的字节流可以实现文本的读入写入,当然也可以实现字节流对于图片的读入写入,就只需要写一个复制文本的字节输入输出流,然后在源文件和目标文件更换后缀图...
    99+
    2024-04-02
  • Java 实现文件复制及文件夹复制
    在Java中,有多种方法可以实现文件的复制。以下是几种常用的方式: 使用字节流进行复制: 通过FileInputStream和FileOutputStream分别创建源文件和目标文件的输入输出流,然后通过循环读取源文件内容,并将数据写入目标...
    99+
    2023-09-26
    java 开发语言
  • MySQL主主复制(图文详解)
    一、实现原理主主复制即在两台MySQL主机内都可以变更数据,而且另外一台主机也会做出相应的变更。聪明的你也许已经想到该怎么实现了。对,就是将两个主从复制有机合并起来就好了。只不过在配置的时候我们需要注意一些...
    99+
    2024-04-02
  • python 复制文件实现
    使用python实现对文件夹的复制操作file类中没有提供专门的文件复制函数,因此只能通过使用文件的读写函数来实现文件的复制。这里仅仅给出范例:...
    99+
    2023-06-02
  • 基于C#实现在图片上绘制文字
    目录实践过程效果代码实践过程 效果 代码 public partial class Form1 : Form { public Form1() { ...
    99+
    2022-12-19
    C#图片绘制文字 C#图片 文字
  • 怎么实现复制图像
    这篇文章主要讲解了“怎么实现复制图像”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么实现复制图像”吧!在写了 这个 29.7 K 的剪贴板 JS 库有点东...
    99+
    2024-04-02
  • java 中复合机制的实例详解
    java 中复合机制的实例详解继承的缺陷继承的缺陷是由它过于强大的功能所导致的。继承使得子类依赖于超类的实现,从这一点来说,就不符合封装的原则。一旦超类随着版本的发布而有所变化,子类就有可能遭到破坏,即使它的代码完全没有改变。为了说明的更加...
    99+
    2023-05-31
    java 复合 ava
  • C语言复杂链表的复制实例详解
    目录一、题目描述示例1:示例2:示例3:示例4:二、思路分析三、整体代码总结一、题目描述 请实现 copyRandomList 函数,复制一个复杂链表。在复杂链表中,每个节点除了有一...
    99+
    2024-04-02
  • 汇编语言功能实现数据复制实例详解
    目录问题1:将内存ffff:0~ffff:b单元中的数据复制到0:200~0:20b单元中问题2:将“mov ax,4c00h“之前的指令复制到内存0:200处问题3:将程序中定义的...
    99+
    2024-04-02
  • 微信小程序实现文字长按复制、一键复制功能
    一、不引入外部组件的实现方式 ...
    99+
    2023-09-09
    微信小程序 小程序 前端
  • Go语言copy()实现切片复制
    Go语言的内置函数 copy() 可以将一个数组切片复制到另一个数组切片中,如果加入的两个数组切片不一样大,就会按照其中较小的那个数组切片的元素个数进行复制。 copy() 函数的使...
    99+
    2023-05-14
    Go 切片复制 Go copy()
  • vue实现图片路径转二进制文件流(binary)
    目录图片路径转二进制文件流(binary)图片路径转换为Base64Base64转换为二进制文件流(binary)下载二进制流文件Blob、ajax(axios)图片路径转二进制文件...
    99+
    2024-04-02
  • vue中如何实现复制内容到剪切板详解
    目录1. element-ui的el-table实现双击复制单元格的内容到剪切板1. 在el-table中添加双击响应事件2. 在methods中添加双击绑定的copyText方法2...
    99+
    2022-11-13
    vue 复制到剪切板 vue实现复制功能 vue复制指定内容到剪切板
  • 怎么在Java中使用字节流实现图片音频的复制
    怎么在Java中使用字节流实现图片音频的复制?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。Java字节流复制图片音频java中的字节流可以实现文本的读入写入,当然也可以实现...
    99+
    2023-06-15
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作