给 memos 加个自动压缩图片为 Webp 的功能

memos对于图片附件默认是直接原样上传的，如果直接给自己当笔记用，倒是个优点，因为可以保留最原始的图片状态。但是我是放到博客首页当说说用的，首页基本是排在流量前3的页面，我算了下，就算图片只有2MB大，发个带图的说说，一个月为这张图都要额外支出5GB的流量了，要知道正常博客整站一个月流量也就60GB不到。虽说距离机器的流量上限还远着呢，但这可不是啥好消息。于是写了个简单的JS脚本，实现：拖拽，Ctrl+V，使用+号添加图片的时候，自动把图片转码为 webp 格式，并按 0.90 压缩率做压缩。

// A1. 压缩图片为webp，0.90 兼顾画质与体积
(function() {
    const WEBP_QUALITY = 0.90;
    // 异步转码为 WebP
    function convertToWebP(file, quality) {
        return new Promise((resolve, reject) => {
            const img = new Image();
            const url = URL.createObjectURL(file);

            img.onload = () => {
                URL.revokeObjectURL(url);
                const canvas = document.createElement('canvas');
                canvas.width = img.naturalWidth;
                canvas.height = img.naturalHeight;

                const ctx = canvas.getContext('2d');
                ctx.drawImage(img, 0, 0);

                canvas.toBlob((blob) => {
                    if (blob) {
                        const newName = file.name.replace(/\.[^/.]+$/, "") + ".webp";
                        const webpFile = new File([blob], newName, { type: "image/webp" });
                        resolve(webpFile);
                    } else {
                        reject(new Error("Canvas toBlob failed"));
                    }
                }, "image/webp", quality);
            };

            img.onerror = (err) => {
                URL.revokeObjectURL(url);
                reject(err);
            };

            img.src = url;
        });
    }

    // 辅助函数：批量转换文件列表
    async function processFiles(files) {
        const dataTransfer = new DataTransfer();
        for (const file of files) {
            if (file.type.startsWith('image/') && file.type !== 'image/webp') {
                try {
                    const converted = await convertToWebP(file, WEBP_QUALITY);
                    dataTransfer.items.add(converted);
                } catch (err) {
                    console.error('[Memos WebP] 转码失败，保留原图:', err);
                    dataTransfer.items.add(file);
                }
            } else {
                dataTransfer.items.add(file);
            }
        }
        return dataTransfer;
    }

    // 1. 拦截剪贴板粘贴 (Ctrl + V)
    window.addEventListener('paste', async (e) => {
        if (e.__memosWebpHandled) return;

        const clipboardData = e.clipboardData;
        if (!clipboardData || !clipboardData.files || clipboardData.files.length === 0) return;

        const files = Array.from(clipboardData.files);
        if (!files.some(f => f.type.startsWith('image/') && f.type !== 'image/webp')) return;

        e.preventDefault();
        e.stopImmediatePropagation();

        const dataTransfer = await processFiles(files);
        const newPasteEvent = new ClipboardEvent('paste', {
            bubbles: true,
            cancelable: true,
            clipboardData: dataTransfer
        });
        newPasteEvent.__memosWebpHandled = true;
        e.target.dispatchEvent(newPasteEvent);
    }, true);

    // 2. 拦截文件拖拽
    window.addEventListener('drop', async (e) => {
        if (e.__memosWebpHandled) return;

        const dataTransfer = e.dataTransfer;
        if (!dataTransfer || !dataTransfer.files || dataTransfer.files.length === 0) return;

        const files = Array.from(dataTransfer.files);
        if (!files.some(f => f.type.startsWith('image/') && f.type !== 'image/webp')) return;

        e.preventDefault();
        e.stopImmediatePropagation();

        const newDataTransfer = await processFiles(files);
        const newDropEvent = new DragEvent('drop', {
            bubbles: true,
            cancelable: true,
            dataTransfer: newDataTransfer
        });
        newDropEvent.__memosWebpHandled = true;
        e.target.dispatchEvent(newDropEvent);
    }, true);

    // 3. 拦截点击「+」号 / 附件按钮的文件选择框
    window.addEventListener('change', async (e) => {
        const target = e.target;
        if (!target || target.tagName !== 'INPUT' || target.type !== 'file') return;
        if (e.__memosWebpHandled) return;

        const files = Array.from(target.files || []);
        if (!files.some(f => f.type.startsWith('image/') && f.type !== 'image/webp')) return;

        e.preventDefault();
        e.stopImmediatePropagation();

        const dataTransfer = await processFiles(files);
        target.files = dataTransfer.files;

        const newChangeEvent = new Event('change', {
            bubbles: true,
            cancelable: true
        });
        newChangeEvent.__memosWebpHandled = true;
        target.dispatchEvent(newChangeEvent);
    }, true);
})();

进入memos、设置、系统、自定义脚本、把上边的代码粘进去，保存。
搞定了，以后无论是使用 Ctrl+V粘贴进来的图片，还是直接拖进来的图片，亦或者使用「+」号 / 附件按钮添加图片时，图片会在你的浏览器里先压缩为0.90压缩率的webp文件再上传到memos了。