V2EX发帖快速上传图片

在V2EX上发布新帖时,可自动上传本地图片到免费图床,自动生成图片嵌入代码并写入系统粘贴板,直接在帖子中粘贴即可快速插入本地图片或在线图片。

// ==UserScript==
// @name         V2EX发帖快速上传图片
// @description  在V2EX上发布新帖时,可自动上传本地图片到免费图床,自动生成图片嵌入代码并写入系统粘贴板,直接在帖子中粘贴即可快速插入本地图片或在线图片。
// @namespace    https://greasyfork.org/zh-CN/users/393603-tsing
// @version      1.1
// @author       Tsing
// @match        https://www.v2ex.com/new
// @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        none
// @note         2019.11.15 V1.0 在V站的创作新主题页面新增一个【插入图片】的按钮,点击即可上传本地图片和嵌入在线图片,后续将考虑加入的功能包括但不限于:文中图片链接自动转图片、替换默认的站内搜索引擎、去除右边栏的推广信息、超链接默认在新标签页打开、修改感谢为红心。
// ==/UserScript==

(function() {
    'use strict';
    $("#compose .cell:eq(3)").append('<div style="float:right;"><span style="display:inline-block;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");
    }

})();