Image Uploader to Markdown to CloudFlare-ImgBed

Upload pasted images to image hosting service and insert as markdown, CloudFlare-ImgBed : https://github.com/MarSeventh/CloudFlare-ImgBed
当前为 2025-03-14 提交的版本，查看最新版本。
安装此脚本？
提问、发表评价或者举报此脚本。
换行
// ==UserScript==
// @name         Image Uploader to Markdown to CloudFlare-ImgBed
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Upload pasted images to image hosting service and insert as markdown, CloudFlare-ImgBed : https://github.com/MarSeventh/CloudFlare-ImgBed
// @author       calg
// @match        *://*/*
// @grant        GM_xmlhttpRequest
// @grant        GM_addStyle
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    // 配置信息
    const CONFIG = {
        AUTH_CODE: 'AUTH_CODE', // 替换为你的认证码
        SERVER_URL: 'SERVER_URL', // 替换为实际的服务器地址
        UPLOAD_PARAMS: {
            serverCompress: true,
            uploadChannel: 'telegram', // 可选 telegram 和 cfr2
            autoRetry: true,
            uploadNameType: 'index', // 可选值为[default, index, origin, short]，分别代表默认前缀_原名命名、仅前缀命名、仅原名命名和短链接命名法，默认为default
            returnFormat: 'full',
            uploadFolder: 'apiupload' // 指定上传目录，用相对路径表示，例如上传到img/test目录需填img/test
        }
    };

    // 添加通知样式
    GM_addStyle(`
        .img-upload-notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 15px 20px;
            border-radius: 5px;
            z-index: 9999;
            max-width: 300px;
            font-size: 14px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: opacity 0.3s ease;
        }
        .img-upload-success {
            background-color: #4caf50;
            color: white;
        }
        .img-upload-error {
            background-color: #f44336;
            color: white;
        }
        .img-upload-info {
            background-color: #2196F3;
            color: white;
        }
    `);

    // 显示通知的函数
    function showNotification(message, type = 'info') {
        const notification = document.createElement('div');
        notification.className = `img-upload-notification img-upload-${type}`;
        notification.textContent = message;
        document.body.appendChild(notification);

        // 3秒后自动消失
        setTimeout(() => {
            notification.style.opacity = '0';
            setTimeout(() => {
                document.body.removeChild(notification);
            }, 300);
        }, 3000);
    }

    // 监听所有文本输入区域的粘贴事件
    function addPasteListener() {
        document.addEventListener('paste', async function(event) {
            // 检查当前焦点是否在文本输入区域
            const activeElement = document.activeElement;
            if (!activeElement || !['INPUT', 'TEXTAREA'].includes(activeElement.tagName)) {
                return;
            }

            // 获取剪贴板中的图片
            const items = event.clipboardData.items;
            let hasImage = false;
            
            for (let item of items) {
                if (item.type.startsWith('image/')) {
                    hasImage = true;
                    event.preventDefault();
                    const blob = item.getAsFile();
                    showNotification('正在上传图片，请稍候...', 'info');
                    await uploadImage(blob, activeElement);
                    break;
                }
            }

            if (!hasImage) {
                // 如果粘贴的内容不包含图片，不做任何处理
                return;
            }
        });
    }

    // 上传图片
    async function uploadImage(blob, targetElement) {
        const formData = new FormData();
        formData.append('file', blob, 'pasted-image.png');

        // 构建查询参数
        const queryParams = new URLSearchParams({
            authCode: CONFIG.AUTH_CODE,
            ...CONFIG.UPLOAD_PARAMS
        }).toString();

        try {
            GM_xmlhttpRequest({
                method: 'POST',
                url: `${CONFIG.SERVER_URL}/upload?${queryParams}`,
                data: formData,
                onload: function(response) {
                    if (response.status === 200) {
                        try {
                            const result = JSON.parse(response.responseText);
                            if (result && result.length > 0) {
                                const imageUrl = result[0].src;
                                insertMarkdownImage(imageUrl, targetElement);
                                showNotification('图片上传成功！', 'success');
                            } else {
                                showNotification('上传成功但未获取到图片链接，请检查服务器响应', 'error');
                            }
                        } catch (e) {
                            showNotification('解析服务器响应失败：' + e.message, 'error');
                        }
                    } else {
                        let errorMsg = '上传失败';
                        try {
                            const errorResponse = JSON.parse(response.responseText);
                            errorMsg += '：' + (errorResponse.message || response.statusText);
                        } catch (e) {
                            errorMsg += `（状态码：${response.status}）`;
                        }
                        showNotification(errorMsg, 'error');
                    }
                },
                onerror: function(error) {
                    showNotification('网络错误：无法连接到图床服务器', 'error');
                }
            });
        } catch (error) {
            showNotification('上传过程发生错误：' + error.message, 'error');
        }
    }

    // 在输入框中插入 Markdown 格式的图片链接
    function insertMarkdownImage(imageUrl, element) {
        const markdownImage = `![image](${imageUrl})`;
        const start = element.selectionStart;
        const end = element.selectionEnd;
        const text = element.value;

        element.value = text.substring(0, start) + markdownImage + text.substring(end);
        element.selectionStart = element.selectionEnd = start + markdownImage.length;
        element.focus();
    }

    // 初始化
    addPasteListener();
})();