JS复制图片base64信息到剪切板实例页面

效果：

测试区

可以试试在这里粘贴（富文本输入框），需要对base64信息进行处理：

代码：

HTML代码：

<button id="button" type="primary">复制图片base64信息</button>
<img id="image" width="150" src="./mybook.jpg">

JS代码：

const doCopyImgBase64Clipboard = (image, success = () => {}, failure = () => {}) => {
    if (!image || !image.src) {
        return;    
    }
    
    // 需要复制的图片的地址
    const src = image.src;
    // 请求该地址，返回图片的blob数据
    fetch(src).then(response => response.blob()).then(blob => {
        // blob数据转base64
        const reader = new FileReader();
        reader.onload = function() {
            navigator.clipboard.writeText(this.result).then(success, failure);
        };
        reader.readAsDataURL(blob) ;
    });
}

// 点击按钮进行复制
button.addEventListener('click', () => {
    doCopyImgBase64Clipboard(image, function () {
        new LightTip('复制成功', 'success');
    }, function (err) {
        new LightTip('复制失败：' + err, 'error');
    });
});

// 粘贴对base64内容的监控处理
input.addEventListener('paste', event => {
    var clipboardData = event.clipboardData;

    var paste = clipboardData?.getData('text') || '';

    if (!/^data:image\/[a-z]+;base64,/.test(paste)) {
        return;
    }
    
    event.preventDefault();
    
    // 光标处插入图片
    // 我是范围
    const selection = document.getSelection();
    // 我是选区
    const range = selection.getRangeAt(0);
    // 删除选区内容，
    range.deleteContents();
    // 并替换成图片
    const imgNode = document.createElement('img');
    imgNode.src = paste;
    range.insertNode(imgNode);
    // 光标定位在图片后面
    range.setStartAfter(imgNode);
});