Greasy Fork

Greasy Fork is available in English.

快速上传图片至图床

点击内置按钮,可自动上传本地图片到免费图床,自动生成图片嵌入代码并写入系统粘贴板,直接在帖子中粘贴即可快速插入本地图片或在线图片。

当前为 2019-12-11 提交的版本,查看 最新版本

您需要先安装一个扩展,例如 篡改猴Greasemonkey暴力猴,之后才能安装此脚本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴Userscripts ,之后才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。

您需要先安装用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         快速上传图片至图床
// @namespace   Violentmonkey Scripts
// @version      1.1
// @match        *://*/*
// @require      https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js
// @require      https://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js
// @require      https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js
// @grant       GM_registerMenuCommand
// @author       yaohunzhanyue
// @description  点击内置按钮,可自动上传本地图片到免费图床,自动生成图片嵌入代码并写入系统粘贴板,直接在帖子中粘贴即可快速插入本地图片或在线图片。
// ==/UserScript==

GM_registerMenuCommand("上传图层", function(){document.getElementById("xxzzyyxx123").click()});


    'use strict';
    $("body").append('<div style="float:right;"><span id="xxzzyyxx123" style="display:none;height:26px;line-height:26px;padding:0 8px;background-image:url(/static/img/bg_blended_light.png);border:1px solid rgba(80,80,90,.2);border-radius:3px;outline:none;color:#333333;text-shadow:0 1px 0 #ffffff;font-weight:700;cursor:pointer;" onclick="javascript:$(\'#popup\').fadeIn();"><li class="fa fa-picture-o" style="line-height:10px;"></li> &nbsp;插入图片</span></div>');
    var popupdiv = '\
        <div id="popup" style="width:400px; height: auto; padding-bottom: 10px; border-radius: 10px; background-color: #ffffff; box-shadow: 0 0 5px #444444; display: none; position: absolute; left: 50%; margin-left: -200px; top: 250px; z-index:1000;">\
			<div style="font-size:22px; font-weight: 600; padding: 10px 0; border-bottom: 1px solid #cccccc; border-radius: 10px 10px 0 0; background: #e2e2e2; text-align: center; cursor: move;">V2EX Image Uploader</div>\
			<span id="close" style="display: block; position: absolute; right: 10px; top: 10px; font-size: 12px; color: #ffffff; background-color: #444444; padding: 2px 6px; border-radius: 6px; cursor: pointer;" onMouseOver="this.style.color=\'#ff0000\';" onMouseOut="this.style.color=\'#ffffff\';">关闭</span>\
			<div style="margin: 10px 20px;">\
				<div style="font-size: 18px; font-weight: 600; margin-bottom: 10px;">嵌入本地图片</div>\
				<input type="file" accept="image/*" id="upfile" name="file" style="background: #ffffff; border: 1px solid #cccccc; width: 290px; height: 24px; outline: none;" >\
				<input type="button" class="btn" style="vertical-align:top; height: 26px; width: 60px; border: 1px solid #cccccc; margin-right: 0px; font-weight: 600; font-size: 14px;" value="嵌入" disabled="disabled"/>\
				<span id="tip1" style="font-size: 13px; color: red; margin-top: 10px; display: none;"></span>\
				<div style="font-size: 18px; font-weight: 600; margin: 20px 0 10px 0;">嵌入网络图片</div>\
				<div style="height: 26px;">\
					<input type="text" id="image_link" style="vertical-align:top; width: 280px; height: 24px; line-height: 26px; border: 1px solid #cccccc; background: #ffffff; outline: none; padding: 0 5px; font-size: 12px;" placeholder="请输入网络图片的链接"/>\
					<input type="button" class="btn" style="vertical-align:top; height: 26px; width: 60px; border: 1px solid #cccccc; margin-right: 0px; font-weight: 600; font-size: 14px;" value="嵌入"/>\
				</div>	\
				<span id="tip2" style="font-size: 13px; color: red; margin-top: 10px; display: none;"></span>\
				<div id="image_show" style="margin-top: 20px; display: none;"></div>\
			</div>\
		</div>\
    ';
    $("body").append(popupdiv);

    new ClipboardJS('.btn'); // 粘贴板js脚本初始化
    $("#popup").draggable(); // 弹出框可以拖拽

    $("#image_link").change(function(e){
        var image_link = $("#image_link").val();
        $(".btn:eq(1)").attr("data-clipboard-text", '<img style="max-width:100%;" src="' + image_link + '" alt="V2EX image uploaded by TsingScript" />');
    });

    $(".btn:eq(1)").click(function(){
        var image_link = $("#image_link").val();
        if(image_link == ""){
            alert("图片地址为空!");
        }else{
            $("#image_show").html('<img style="display:block; margin:0 auto; max-width:60%; max-height:200px; box-shadow:0 0 5px #444444;" src="' + image_link + '" alt="V2EX image thumb" onload="online_image_success();" onerror="online_image_fail();">');
        }
    });

    $("#close").click(function(){ // 关闭弹框
        $("#popup").fadeOut(); // 淡出效果
    });

    $("#upfile").change(function(e){
        $("#tip1").css("display","block");
        $("#tip1").html("图片正在上传中...");
        var image_form = new FormData();
        image_form.append('smfile',this.files[0]);
        $.ajax({
            url: 'https://sm.ms/api/upload',
            type: 'POST',
            data: image_form,
            mimeType: 'multipart/form-data',
            contentType: false,
            cache: false,
            processData: false,
            dataType: 'json',
            success: function(data) {
                console.log(data);
                $("#tip1").html("图片上传成功!请点击【嵌入】按钮生成图片嵌入代码。");
                $(".btn").removeAttr("disabled");
                $(".btn:first").click(function(){
                    $("#tip1").html("图片嵌入代码已写入剪贴板,直接到文中粘贴即可。");
                });
                var status = data['code'];
                if(status == 'success'){
                    var image_url = data['data']['url'];
                }
                if(status == 'exception'){ // 重复上传
                    var image_url = data['message'].slice(51);
                }
                $(".btn:first").attr("data-clipboard-text", '<img style="max-width:100%;" src="' + image_url + '" alt="V2EX image uploaded by TsingScript" />');
                $("#image_show").css("display","block");
                $("#image_show").html('<img style="display:block; margin:0 auto; max-width:60%; max-height:200px; box-shadow:0 0 5px #444444;" src="' + image_url + '" alt="V2EX image thumb">');
                // $(".btn:first").click();
            },
            error: function(XMLResponse) {
                alert("error:" + XMLResponse.responseText)
            }
        });
    });

    window.online_image_success = function (){ // 由于存在防盗链,因此远程图片可能显示不了。外部要是调用函数,需要挂靠到window上。
        $("#tip2").css("display","block");
        $("#tip2").html("图片嵌入代码已写入剪贴板,直接到文中粘贴即可。");
        $("#image_show").css("display","block");
    }
    window.online_image_fail = function (){ // 防盗链,远程图片显示异常。
        $("#tip2").html("由于该网站的图片存在防盗链设置,不可直接嵌入本文,可以下载原图到本地,再上传嵌入。");
        $("#image_show").css("display","none");
    }