EDT/ipad/js/universal/universal.js

// 查看大图参数
var U_VIEWER_PARM = {
    url: 'data-original'
    ,toolbar: false
    ,title: false
    ,rotatable: false
    ,backdrop: false    // 点击非图片层关闭
}

// 关闭层
function u_close_this_div(){
	layui.use('layer', function(){
		var index = parent.layer.getFrameIndex(window.name)
        parent.layer.close(index)
	})
}
// 启用加载中
function u_start_loading() {
    layui.use("jquery", function() {
        var $ = layui.$
        if (!$("#u-loading").length) {
            layui.$("body").append("<div id='u-loading' style='width: 100%; height: 100%; top: 0; left: 0; z-index: 1000; line-height: 667px; position: fixed;'><img src='js/universal/images/loading@64px.png' class='layui-anim-rotate layui-anim-loop'></div>")
        }
        $("#u-loading").show()
    })
}
// 停用加载中
function u_stop_loading() {
    layui.use("jquery", function() {
        var $ = layui.$
        if (!$("#u-loading").length) {
            layui.$("body").append("<div id='u-loading' style='width: 100%; height: 100%; top: 0; left: 0; z-index: 1000; line-height: 667px; position: fixed;'><img src='js/universal/images/loading@64px.png' class='layui-anim-rotate layui-anim-loop'></div>")
        }
        $("#u-loading").hide()
    })
}

function u_add_watermark(params) {
    layui.use("jquery", function() {
        var $ = layui.$
        // 图片加水印
        $("[watermark]").each(function(index) {
            if ($(this).css("position") != "absolute" && $(this).css("position") != "fixed") $(this).css("position", "relative")
            $(this).append("<div class='watermark' style='line-height: "+$(this).height()+"px;'><span>"+params.text+"</span></div>")
        })
    })
}
function u_once_add_watermark(params, elem) {
    layui.use("jquery", function() {
        var $ = layui.$
        // 图片加水印
        if (elem.css("position") != "absolute" && elem.css("position") != "fixed") elem.css("position", "relative")
        elem.append("<div class='watermark' style='line-height: "+elem.height()+"px;'><span>"+params.text+"</span></div>")
    })
}

// 添加水印
function USetWatermark(params) {
    layui.use("jquery", function() {
        const $ = layui.jquery

        const img_elems = params.el ? (params.el.find("img").length > 0 ? params.el.find("img[watermark]") : params.el) : $("img[watermark]")
            ,is_sy = params.is_sy ? params.is_sy : "y"
            ,font_size = params.font_size ? params.font_size : 20
            ,text = params.text ? params.text : "请勿外传"
            ,mode = params.mode ? params.mode : "inner"

        if (is_sy === "y" && img_elems.length > 0) {
            img_elems.each(function() {
                prohibitDragAndSavePicture(this)
                if (mode === "inner")
                    u_pic_add_inner_watermark($(this), font_size, text)
                else if (mode === "outer")
                    u_pic_add_outer_watermark($(this), font_size, text)
            })
        } else {
            img_elems.each(function() {
                if ($(this).attr('data-src'))
                    $(this).attr('src', $(this).attr('data-src'))
            })
        }
    })
}
// 内嵌模式：将水印内嵌到图片上
function u_pic_add_inner_watermark(elem, font_size, text) {
    layui.use("jquery", function() {

        const img = new Image()
        img.src = elem.attr("data-src") ? elem.attr("data-src") : elem.attr("src")
        if (!elem.attr("src")) elem.attr("src", "js/universal/images/img_loading.gif")
        img.crossOrigin = 'anonymous';
        img.onload = function(e) {
            setTimeout(function() {  // 似乎 onload 后并不能立即获得图片，一旦渲染低概率空白，所以这里设置一个短间隔定时器，50毫秒后再进行渲染
                var canvas = document.getElementById("watermark-canvas")
                if (!canvas) {
                    canvas = document.createElement('canvas')
                    canvas.id = "watermark-canvas"
                }
                canvas.width = img.width;
                canvas.height = img.height;
                const ctx = canvas.getContext('2d');
    
                ctx.drawImage(img, 0, 0);
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.font = Math.floor(Math.min(font_size * img.width / elem.width(), 100)) + "px Microsoft Yahei";
                //  Math.floor(Math.min(watermark_font_size * img.width / params.el.width(), 100)): 依比例放大，达到看起来与 watermark_font_size 一样大的效果
                ctx.fillStyle = 'rgba(183, 183, 183, 0.3)';
                ctx.fillText(text, img.width / 2, img.height / 2)
    
                const base64Url = canvas.toDataURL();
                elem.attr("src", base64Url)
            }, 50)
        }
    })
}
// 外覆模式：将水印作为层覆盖在图片上
function u_pic_add_outer_watermark(elem, font_size, text) {
    layui.use("jquery", function() { 
        const $ = layui.jquery

        const el_parent = elem.parent()
            ,elp_position = el_parent.css("position")
        if (elp_position != "absolute" && elp_position != "fixed") el_parent.css("position", "relative")
        var watermark_el = $("<div style='position: absolute; z-index: 9; font-size: "+font_size+"px; color: rgba(183,183,183,0.5); pointer-events: none; line-height: normal; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap;'>"+text+"</div>")
        el_parent.append(watermark_el)
    })
}
// 禁止图片被拖动、保存
function prohibitDragAndSavePicture(node) {
    layui.use("jquery", function() { 
        const $ = layui.jquery

        node.setAttribute("oncontextmenu", "return false;")
        node.setAttribute("ondragstart", "return false;")
        $(node).on("contextmenu",function(){return false;});
        $(node).on("dragstart",function(){return false;});
    })
}