electron 从剪贴板读取图片并显示

柔光的暖阳◎ 2023-01-07 14:25 314阅读 0赞

以下示例代码基于vue

首先，我们在data中定义几个变量

data() {
        return {
            showclipboardImage: false, // 是否显示图片
            pasteImageData: '', // 图片base64资源
            imageQuality: 1 // 图片质量，用于压缩
        }
    }

然后，我们需要定义template

<input ref="input" id="editorInputBox" @paste="handlePaste"/>
    
    
    <im-image v-if="showclipboardImage" :src="pasteImageData" />

最后，在methods中添加一下函数

handlePaste(e) {
        if (!(e.clipboardData && e.clipboardData.items && e.clipboardData.items.length)) {
            return;
        }
    
        const items = e.clipboardData.items;
    
        for (let i = 0, len = items.length; i < len; i++) {
            let item = items[i];
    
            if (!item.kind === "file") return;
    
            // pasteFile就是获取到的文件 (blob 对象)           
            let pasteFile = item.getAsFile();
    
            if (!pasteFile) return;
    
            if (pasteFile.size > 0 && pasteFile.type.match('^image/')) {
                this.blobToBase64(pasteFile).then(data => {
                    this.pasteImageData = data;
                    this.showclipboardImage = true;
    
                    // 压缩图片的 base64 长度 ,这里暂时不压缩了             
                    // this.compressBase64Length(data).then(newBase64 => {
                    //     this.pasteImageData = newBase64;
                    //     this.showclipboardImage = true;
                    // });
                });
            }
        }
    },
    
    // blob 对象转为 base64 编码
    blobToBase64(blob) {
        return new Promise((resolve, reject) => {
            let reader = new FileReader();
    
            reader.onload = function (e) {
                resolve(e.target.result);
            }
    
            reader.readAsDataURL(blob);
        });
    },
    
    // 压缩图片的 base64 长度
    compressBase64Length(base64) {
        return new Promise((resolve, reject) => {
            let image = new Image(), 
                MAX_HEIGHT = 160;
    
            // 回调函数赋值给 onload
            image.onload = () => {
                let canvas = document.createElement('canvas'),
                    ctx = canvas.getContext("2d");
    
                if (image.height > MAX_HEIGHT) {
                    image.width *= MAX_HEIGHT / image.height;
                    image.height = MAX_HEIGHT;
                }
    
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                canvas.width = image.width;
                canvas.height = image.height;
                ctx.drawImage(image, 0, 0, image.width, image.height);
    
                // 调用 canvas 的 api，第二个参数是图片质量
                resolve(canvas.toDataURL('image/jpeg', this.imageQuality));
            };
    
            // 图片加载完后调用 onload 回调
            image.src = base64;
        });
    },