JS实现复制粘贴文字及图片功能

<template>
    <el-button type="primary" @click="handleCopy">复制文本</el-button>
    <div>{{ message }}</div>
</template>
<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
const message = ref('复制的内容')
const handleCopy = () => {
    navigator.clipboard
        .writeText(message.value)
        .then(() => {
            ElMessage({
                message: '复制成功',
                type: 'success',
            })
        })
        .catch((err) => {
            console.error('复制失败:', err)
            ElMessage({
                message: '复制失败',
                type: 'error',
            })
        })
}
</script>

<template>
    <el-button type="primary" @click="handleCopy2">复制文本2</el-button>
    <div>{{ message }}</div>
</template>
<script setup>
import {
    copyText,
    copyImage,
    imageUrlToBase64,
    parseBase64,
} from './common/copy'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
const message = ref('复制的内容')
const handleCopy2 = () => {
    // 动态创建 textarea 标签
    const textarea = document.createElement('textarea')
    // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textarea 移出可视区域
    textarea.readOnly = 'readonly'
    textarea.style.position = 'absolute'
    textarea.style.left = '-9999px'
    textarea.style.opacity = '0'
    // 将要 copy 的值赋给 textarea 标签的 value 属性
    textarea.value = message.value
    // 将 textarea 插入到 body 中
    document.body.appendChild(textarea)
    // 选中值并复制
    textarea.select()
    const result = document.execCommand('Copy')
    if (result) {
        ElMessage({
            message: '复制成功',
            type: 'success',
        })
    }
    document.body.removeChild(textarea)
}
</script>

function createFakeElement(value) {
  var isRTL = document.documentElement.getAttribute('dir') === 'rtl';
  var fakeElement = document.createElement('textarea'); // Prevent zooming on iOS
  fakeElement.style.fontSize = '12pt'; // Reset box model
  fakeElement.style.border = '0';
  fakeElement.style.padding = '0';
  fakeElement.style.margin = '0'; // Move element out of screen horizontally
  fakeElement.style.position = 'absolute';
  fakeElement.style[isRTL ? 'right' : 'left'] = '-9999px'; // Move element to the same position vertically
  var yPosition = window.pageYOffset || document.documentElement.scrollTop;
  fakeElement.style.top = "".concat(yPosition, "px");
  fakeElement.setAttribute('readonly', '');
  fakeElement.value = value;
  return fakeElement;
}
var fakeCopyAction = function fakeCopyAction(value, options) {
  var fakeElement = createFakeElement(value);
  options.container.appendChild(fakeElement);
  var selectedText = select_default()(fakeElement);
  command('copy');
  fakeElement.remove();
  return selectedText;
};

<template>
    <el-button type="primary" @click="handleCopyImage">复制图片</el-button>
    <div>{{ message }}</div>
</template>
<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
const message = ref('复制的内容')
const handleCopyImage = async () => {
    //具体看下面的封装
    await copyImage('https://cn.vitejs.dev/logo-with-shadow.png')
    ElMessage({
        message: '复制成功',
        type: 'success',
    })
}
</script>

/**
 * 图片转base64
 * @param {string} 图片地址
 * @returns
 */
export const imageUrlToBase64 = (imageUrl) => {
    return new Promise((resolve, reject) => {
        let image = new Image()
        image.setAttribute('crossOrigin', 'Anonymous')
        image.src = imageUrl
        image.onload = function () {
            const canvas = document.createElement('canvas')
            canvas.width = image.width
            canvas.height = image.height
            const context = canvas.getContext('2d')
            context.drawImage(image, 0, 0, image.width, image.height)
            const base64Str = canvas.toDataURL('image/png')
            resolve(base64Str)
        }
        image.onerror = function (e) {
            reject(e)
        }
    })
}
/**
 * 转换base64
 * @param {string} base64
 * @returns
 */
export function parseBase64(base64) {
    let re = new RegExp('data:(?<type>.*?);base64,(?<data>.*)')
    let res = re.exec(base64)
    if (res) {
        return {
            type: res.groups.type,
            ext: res.groups.type.split('/').slice(-1)[0],
            data: res.groups.data,
        }
    }
}
/**
 * 复制文字
 * @param {string} text  要复制的文本
 * @returns {boolean} true/false
 */
export const copyText = async (text) => {
    if (navigator && navigator.clipboard) {
        await navigator.clipboard.writeText(text)
        return true
    }
    // 动态创建 textarea 标签
    const textarea = document.createElement('textarea')
    // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textarea 移出可视区域
    textarea.readOnly = 'readonly'
    textarea.style.position = 'absolute'
    textarea.style.left = '-9999px'
    textarea.style.opacity = '0'
    // 将要 copy 的值赋给 textarea 标签的 value 属性
    textarea.value = text
    // 将 textarea 插入到 body 中
    document.body.appendChild(textarea)
    // 选中值并复制
    textarea.select()
    const result = document.execCommand('Copy')
    document.body.removeChild(textarea)
    return result
}
/**
 * 复制图片
 * @param {string} imageUrl 图片地址
 * @param {boolean} isBase64 是否是base64
 */
export const copyImage = async (imageUrl, isBase64 = false) => {
    let base64Url = ''
    if (!isBase64) {
        base64Url = await imageUrlToBase64(imageUrl)
    } else base64Url = imageUrl
    const parsedBase64 = parseBase64(base64Url)
    let type = parsedBase64.type
    //将base64转为Blob类型
    let bytes = atob(parsedBase64.data)
    let ab = new ArrayBuffer(bytes.length)
    let ua = new Uint8Array(ab)
    for (let i = 0; i < bytes.length; i++) {
        ua[i] = bytes.charCodeAt(i)
    }
    let blob = new Blob([ab], { type })
    navigator.clipboard.write([new ClipboardItem({ [type]: blob })])
}