以图搜图

长按图片后出现选择框,点击后可选择搜图方式,点击空白处或退出则消失
Wrap lines
// ==UserScript==
// @name         以图搜图
// @namespace   https://github.com/Daidai0912/x-via
// @version      0.2
// @description  长按图片后出现选择框,点击后可选择搜图方式,点击空白处或退出则消失
// @author       You
// @match        *://*/*
// @grant        GM_openInTab
// @icon https://cdn.jsdelivr.net/gh/Daidai0912/Dai_dai@master/picture/搜图.png
// ==/UserScript==

(function() {
    'use strict';

    function addElement({
        tag,
        attrs = {},
        to = document.body || document.documentElement,
    }) {
        const el = document.createElement(tag);
        Object.assign(el, attrs);
        to.appendChild(el);
        return el;
    }
    
    function addStyle(css) {
        return addElement({
            tag: 'style',
            attrs: {
                textContent: css,
            },
            to: document.head,
        });
    }
    
    var config = {
        "toast": 0.1,
        "out": 1
    };
    
    function toast(text, time = 3, callback, transition = 0.2) {
        let isObj = (o) => typeof o == 'object' && typeof o.toString == 'function' && o.toString() === '[object Object]', timeout, toastTransCount = 0;
        if (typeof text != 'string') text = String(text);
        if (typeof time != 'number' || time <= 0) time = 3;
        if (typeof transition != 'number' || transition < 0) transition = 0.2;
        if (callback && !isObj(callback)) callback = undefined;
        if (callback) {
            if (callback.text && typeof callback.text != 'string') callback.text = String(callback.text);
            if (
            callback.color && (typeof callback.color != 'string' || callback.color === '')) delete callback.color;
            if (callback.onclick && typeof callback.onclick != 'function') callback.onclick = () => null;
            if (callback.onclose && typeof callback.onclose != 'function') delete callback.onclose;
        }
    
        let toastStyle = addStyle(`
      #bextToast {
        all: initial;
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 10vh;
        width: max-content;
        max-width: 80vw;
        max-height: 80vh;
        margin: 0 auto;
        border-radius: 20px;
        padding: .5em 1em;
        font-size: 16px;
        background-color: rgba(0,0,0,0.5);
        color: white;
        z-index: 1000002;
        opacity: 0%;
        transition: opacity ${transition}s;
      }
      #bextToast > * {
        display: -webkit-box;
        height: max-content;
        margin: auto .25em;
        width: max-content;
        max-width: calc(40vw - .5em);
        max-height: 80vh;
        overflow: hidden;
        -webkit-line-clamp: 22;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        overflow-wrap: anywhere;
      }
      #bextToastBtn {
        color: ${callback && callback.color ? callback.color : 'turquoise'}
      }
      #bextToast.bextToastShow {
        opacity: 1;
      }
        `),
        toastDiv = addElement({
            tag: 'div',
            attrs: {
                id: 'bextToast',
            },
        }),
        toastShow = () => {
            toastDiv.classList.toggle('bextToastShow');
            toastTransCount++;
            if (toastTransCount >= 2) {
                setTimeout(function() {
                    toastDiv.remove();
                    toastStyle.remove();
                    if (callback && callback.onclose) callback.onclose.call(this);
                }, transition * 1000 + 1);
            }
        };
        addElement({
            tag: 'div',
            attrs: {
                id: 'bextToastText',
                innerText: text,
            },
            to: toastDiv,
        });
        if (callback && callback.text) {
            addElement({
                tag: 'div',
                attrs: {
                    id: 'bextToastBtn',
                    innerText: callback.text,
                    onclick: callback && callback.onclick ? () => {
                        callback.onclick.call(this);
                        clearTimeout(timeout);
                        toastShow();
                    } : null,
                },
                to: toastDiv,
            });
        }
        setTimeout(toastShow, 1);
        timeout = setTimeout(toastShow, (time + transition * 2) * 1000);
    }

    let imageLink = '';
    let selectBox = null;

    var longPressTimer;

    let searchEngines = [
        { name: "以图搜图", url: "exit" },
        { name: "谷歌", url: "https://www.google.com/searchbyimage?safe=off&sbisrc=tg&image_url=" },
        { name: "必应", url: "https://www.bing.com/images/search?view=detailv2&iss=sbi&form=SBIVSP&sbisrc=UrlPaste&q=imgurl:" },
        { name: "Yandex", url: "https://yandex.com/images/touch/search?family=yes&rpt=imageview&url=" },
        { name: "TinEye", url: "https://tineye.com/search/?url=" },
        { name: "查找动漫", url: "https://trace.moe/?url=" },
        { name: "iqdb", url: "https://iqdb.org/?url=" },
        { name: "3d.iqdb", url: "https://3d.iqdb.org/?url=" },
        { name: "360", url: "https://st.so.com/r?img_url=" },
        { name: "Pixiv", url: "https://saucenao.com/search.php?db=999&url=" },
        { name: "ascii2d", url: "https://ascii2d.net/search/url/" },
        { name: "退出", url: "exit" },
        { name: "打开全部", url: "openall" }
    ];

    document.addEventListener('touchstart', function(event) {
        var target = event.target;
        if (target.tagName === 'IMG') {
            longPressTimer = setTimeout(function() {
                imageLink = target.src;
                if (imageLink.startsWith("http")) {
                    if (selectBox !== null) {
                        selectBox.remove();
                        selectBox = null;
                    }
                    showMenu(event.touches[0].clientX, event.touches[0].clientY);
                } else if (imageLink.startsWith("data:")) {
                    toast('图片base64编码,不可搜图');
                }
            }, 300);
        }
    });
    
    document.addEventListener('touchend', function(event) {
        clearTimeout(longPressTimer);
    });

    document.addEventListener('click', function(e) {
        if (selectBox !== null && e.target !== selectBox) {
            selectBox.remove();
            selectBox = null;
        }
    });

    function showMenu(clientX, clientY) {
        selectBox = document.createElement('select');
        selectBox.style.position = 'fixed';
        selectBox.style.top = clientY + 'px';
        selectBox.style.left = clientX + 'px';
        selectBox.style.background = '#87CEFF';
        selectBox.style.color = '#90EE90';
        selectBox.style.border = '1px solid #ffffff';
        selectBox.style.padding = '10px';
        selectBox.style.zIndex = '10000';
        selectBox.style.textAlign = 'center';
        selectBox.style.borderRadius = '8px';

        searchEngines.forEach(engine => {
            let option = document.createElement('option');
            option.text = engine.name;
            option.value = engine.url;
            selectBox.appendChild(option);
        });

        selectBox.onchange = function() {
            let selectedValue = selectBox.value;
            if (selectedValue === 'openall') {
                searchEngines.forEach(engine => {
                    if (engine.url !== 'exit' && engine.url !== 'openall') {
                        GM_openInTab(engine.url + imageLink, { active: false, insert: true, setParent: false });
                    }
                });
            } else if (selectedValue === 'exit') {
                selectBox.remove();
                selectBox = null;
            } else {
                GM_openInTab(selectedValue + imageLink, { active: true, insert: true, setParent: false });
            }
        };

        document.body.appendChild(selectBox);
    }
})();
欢迎访问Greasy Fork镜像
