// 查看大图参数 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("
") } $("#u-loading").show() }) } // 停用加载中 function u_stop_loading() { layui.use("jquery", function() { var $ = layui.$ if (!$("#u-loading").length) { layui.$("body").append("
") } $("#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("
"+params.text+"
") }) }) } 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("
"+params.text+"
") }) } // 添加水印 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 = $("
"+text+"
") 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;}); }) }