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

 更新时间:2023年02月23日 09:38:53   作者:元子不圆呀  
这篇文章主要为大家介绍了vue实现复制文字复制图片实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

正文

复制文字和图片是我们经常会使用到的需求,我们这篇文章主要介绍使用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复制文字图片的资料请关注脚本之家其它相关文章!

相关文章

  • 关于Vue项目跨平台运行问题的解决方法

    关于Vue项目跨平台运行问题的解决方法

    这篇文章主要介绍了关于Vue项目跨平台运行问题的解决方法,特别记录一下踩的坑,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-09-09
  • vue3+element-plus Dialog对话框的使用与setup 写法的用法

    vue3+element-plus Dialog对话框的使用与setup 写法的用法

    这篇文章主要介绍了vue3+element-plus Dialog对话框的使用 与 setup 写法的使用,本文通过两种方式结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • vue3 + ts + pnpm:nprogress / 页面顶部进度条效果实现

    vue3 + ts + pnpm:nprogress / 页

    NProgress是一款轻量级的进度条库,主要用于网页顶部显示页面加载或运行进度,它易于安装和使用,并提供良好的视觉效果,NProgress也可以与VueRouter结合使用,通过导航守卫在路由跳转时自动显示和隐藏进度条,该库的使用提高了用户对网页加载状态的感知,优化了用户体验
    2024-09-09
  • vue keep-alive多层级路由支持问题分析

    vue keep-alive多层级路由支持问题分析

    这篇文章主要介绍了vue keep-alive多层级路由支持,在文章开头给大家介绍了keep-alive使用问题,解决使用keep-alive include属性问题,本文给大家介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • vue.js开发环境安装教程

    vue.js开发环境安装教程

    这篇文章主要为大家详细介绍了vue.js开发环境的安装教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • vue跳转页面常用的4种方法与区别小结

    vue跳转页面常用的4种方法与区别小结

    这篇文章主要给大家介绍了关于vue跳转页面常用的4种方法与区别,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-03-03
  • Vue3使用v-if指令进行条件渲染的实例代码

    Vue3使用v-if指令进行条件渲染的实例代码

    条件渲染是根据条件的真假来有条件地渲染元素,在Vue.js 3.x中,常见的条件渲染包括使用v-if指令和v-show指令,本文讲解使用v-if指令进行条件渲染,需要的朋友可以参考下
    2024-03-03
  • vue使用iview的modal弹窗嵌套modal出现格式错误的解决

    vue使用iview的modal弹窗嵌套modal出现格式错误的解决

    这篇文章主要介绍了vue使用iview的modal弹窗嵌套modal出现格式错误的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue.js实现动画与过渡效果的示例代码

    Vue.js实现动画与过渡效果的示例代码

    在现代前端开发中,用户体验至关重要,一个精美的动画过渡不仅能提升界面的美观性,还能让用户在使用时感受到流畅的交互体验,在本文中,我们将深入探讨如何在 Vue.js 中实现动画与过渡效果,并提供示例代码,需要的朋友可以参考下
    2024-10-10
  • Vue组件间数据传递的方式(3种)

    Vue组件间数据传递的方式(3种)

    这篇文章主要介绍了Vue组件间数据传递的方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07

最新评论