EasyScreenOCR Add Clipboard Upload Feature

Allow direct image upload from the clipboard.

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

// ==UserScript==
// @name               EasyScreenOCR Add Clipboard Upload Feature
// @name:zh-tw         EasyScreenOCR 增加從剪貼簿上傳的功能
// @version            1.2
// @description        Allow direct image upload from the clipboard.
// @description:zh-tw  允許從剪貼簿直接上傳圖片
// @match              https://online.easyscreenocr.com/*
// @grant              none
// @author             ani20168
// @icon               https://online.easyscreenocr.com/favicon.ico
// @namespace          https://greasyfork.org/users/1044014
// ==/UserScript==

(function() {
    'use strict';

    // Define the new dropzone element
    var dropzone = document.querySelector('.el-upload');

    dropzone.addEventListener('paste', function(event) {
        // Get the clipboard data as an image file
        var items = (event.clipboardData || event.originalEvent.clipboardData).items;
        for (var i = 0; i < items.length; i++) {
            if (items[i].type.indexOf("image") !== -1) {
                var blob = items[i].getAsFile();

                // Create a new file object from the clipboard image data
                var file = new File([blob], "pasted-image.png", {type: "image/png"});

                // "el-upload__input" seems to be the actual file input, so we will use it to trigger the upload
                var fileInput = dropzone.querySelector('.el-upload__input');
                if (fileInput) {
                    fileInput.files = new FileListItems([file]);

                    // Manually dispatch a change event
                    var changeEvent = new Event('change', { 'bubbles': true });
                    fileInput.dispatchEvent(changeEvent);
                }
            }
        }
    });

    // This is a helper function to allow us to assign to the files property of an input
    function FileListItems(files) {
        var b = new ClipboardEvent("").clipboardData || new DataTransfer(); // ClipboardEvent's clipboardData or fallback
        for (var i = 0, len = files.length; i<len; i++) b.items.add(files[i]);
        return b.files;
    }

})();