/** * Minified by jsDelivr using Terser v5.15.1. * Original file: /npm/@yyznm/img-view@1.0.4/dist/yyz-img.umd.js * * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files */ !function (t, i) { "object" == typeof exports && typeof module < "u" ? i(exports) : "function" == typeof define && define.amd ? define(["exports"], i) : i((t = typeof globalThis < "u" ? globalThis : t || self).YYZIMG = {}) }(this, (function (t) { "use strict"; var i = Object.defineProperty, s = (t, s, o) => (((t, s, o) => { s in t ? i(t, s, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[s] = o })(t, "symbol" != typeof s ? s + "" : s, o), o); class o { constructor(t = "", i) { s(this, "t"), s(this, "l"), s(this, "w"), s(this, "h"), s(this, "rotate"), s(this, "zoom"), s(this, "box"), s(this, "box_w"), s(this, "box_h"), s(this, "img_w"), s(this, "img_h"), s(this, "url"), s(this, "op"), s(this, "canvasImg"), s(this, "ctx"), s(this, "isShow"), s(this, "tipDom"), s(this, "tipTime"), this.t = 0, this.l = 0, this.w = 0, this.h = 0, this.rotate = 0, this.zoom = 1, this.img_w = 0, this.img_h = 0, this.box_w = 0, this.box_h = 0, this.url = t, this.isShow = !1, this.op = {}; const o = { zIndex: 1211, maskColor: "rgba(255,255,255,1)", body: document.body, startZoom: 1, minZoom: .1, maxZoom: 20, isImgClose: !1, isMaskClose: !0, isOperation: !0, isCloseBtn: !0, isMaskWheel: !1, isMaskMove: !1, tipTime: 300, showCall: void 0, backCall: void 0 }; i || (i = {}); for (const t in o) this.op[t] = typeof i[t] > "u" ? o[t] : i[t]; this.op.body ? document.body != this.op.body && (console.log(this.op.body), "string" == typeof this.op.body && (this.op.body = document.querySelector(this.op.body)), (!this.op.body.style.position || "static" == this.op.body.style.position) && (this.op.body.style.position = "relative"), this.op.body.style.overflow = "hidden") : console.error("传入的dom为空！") } show() { if (this.isShow) return; this.isShow = !0, document.documentElement.classList.add("yyz-iv-public-body-hidden"), this.box = document.createElement("div"), this.box.style.setProperty("--time", "0.3s"), this.box.className = "yyz-iv", this.box.style.zIndex = this.op.zIndex, this.box.style.background = "transparent", this.box.style.opacity = 0, this.box_h = this.op.body.offsetHeight, this.box_w = this.op.body.offsetWidth, document.body == this.op.body && (this.box_w = document.documentElement.clientWidth || document.body.clientWidth, this.box_h = document.documentElement.clientHeight || document.body.clientHeight, this.box.style.position = "fixed"); let t = document.createElement("div"); return t.className = "yyz-iv_img-box", this.box.appendChild(t), this.canvasImg = document.createElement("img"), this.canvasImg.className = "yyz-iv_img", this.canvasImg.draggable = !1, t.appendChild(this.canvasImg), this.canvasImg.onload = () => { this.zoom = this.op.startZoom, this.rotate = 0, this.img_h = this.canvasImg.height, this.img_w = this.canvasImg.width, this.img_w / this.img_h > this.box_w / this.box_h ? (this.w = this.zoom * this.box_w, this.h = this.w * (this.img_h / this.img_w), this.l = (this.box_w - this.box_w * this.zoom) / 2, this.t = (this.box_h - this.zoom * this.box_w * (this.img_h / this.img_w)) / 2) : (this.h = this.zoom * this.box_h, this.w = this.h * (this.img_w / this.img_h), this.t = (this.box_h - this.box_h * this.zoom) / 2, this.l = (this.box_w - this.box_h * this.zoom * (this.img_w / this.img_h)) / 2), this.upImgPosition() }, this.op.body.appendChild(this.box), this.canvasImg.src = this.url, this.canvasEventsInit(), setTimeout((() => { this.box.style.background = this.op.maskColor, this.box.style.opacity = 1 }), 1), this.op.isOperation && this.addOperationButton(), this.op.isCloseBtn && this.addCloseButton(), this.op.showCall && this.op.showCall(), this } close() { this.box.style.setProperty("--time", "0.1s"), this.box.style.opacity = 0, setTimeout((() => { this.op.body.removeChild(this.box), document.documentElement.classList.remove("yyz-iv-public-body-hidden"), this.isShow = !1, this.op.backCall && this.op.backCall() }), 200) } upImgPosition(t) { this.img_w / this.img_h > this.box_w / this.box_h ? (this.w = this.zoom * this.box_w, this.h = this.w * (this.img_h / this.img_w)) : (this.h = this.zoom * this.box_h, this.w = this.h * (this.img_w / this.img_h)), t && this.canvasImg.style.setProperty("--img-time", "0.2s"), this.canvasImg.style.transform = `rotate(${this.rotate}deg)`, this.canvasImg.style.width = this.w + "px", this.canvasImg.style.height = this.h + "px", this.canvasImg.style.top = this.t + "px", this.canvasImg.style.left = this.l + "px", t && setTimeout((() => { this.canvasImg.style.setProperty("--img-time", "0s") }), 200) } canvasEventsInit() { this.box.onclick = () => { this.op.isMaskClose && this.close() }, this.canvasImg.addEventListener("click", (function (t) { t.stopPropagation() })); let t = !1, i = !1, s = { x: 0, y: 0 }, o = this.op.isMaskMove ? this.box : this.canvasImg, h = this.op.isMaskWheel ? this.box : this.canvasImg; o.onmousedown = function (o) { t = !1, i = !0, s = { x: o.clientX, y: o.clientY } }, o.onmousemove = o => { if (t = !0, i) { const t = { x: o.clientX, y: o.clientY }; this.l += t.x - s.x, this.t += t.y - s.y, s = { x: o.clientX, y: o.clientY }, this.upImgPosition() } }, o.onmouseup = s => { i = !1, t || this.op.isImgClose && this.close() }, h.onmousewheel = h.onwheel = t => { var i = t.clientX, s = t.clientY; let o = t.wheelDelta ? t.wheelDelta : -40 * t.deltalY; var h = (i - this.l) / this.zoom, e = (s - this.t) / this.zoom; o > 0 ? (this.zoom += .1, this.zoom > this.op.maxZoom && (this.zoom = this.op.maxZoom), this.l = (1 - this.zoom) * h + (i - h), this.t = (1 - this.zoom) * e + (s - e)) : (this.zoom -= .1, this.zoom < this.op.minZoom && (this.zoom = this.op.minZoom), this.l = (1 - this.zoom) * h + (i - h), this.t = (1 - this.zoom) * e + (s - e)), this.tip(), this.upImgPosition() } } addOperationButton() { const t = this.createNode('
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
'); t.style.zIndex = this.op.zIndex + 1, t.addEventListener("click", (function (t) { t.stopPropagation() })), t.querySelector(".yyz-iv_operation-btn.zoom-add").onclick = () => this.zoomAdd(), t.querySelector(".yyz-iv_operation-btn.zoom-sub").onclick = () => this.zoomSub(), t.querySelector(".yyz-iv_operation-btn.rotate-right").onclick = () => this.rotateRight(), t.querySelector(".yyz-iv_operation-btn.rotate-left").onclick = () => this.rotateLeft(), this.box.appendChild(t) } addCloseButton() { const t = this.createNode('
\n
\n \n
\n
'); t.style.zIndex = this.op.zIndex + 1, t.addEventListener("click", (function (t) { t.stopPropagation() })), t.querySelector(".yyz-iv_operation-btn.close").onclick = () => this.close(), this.box.appendChild(t) } tip() { !this.op.tipTime || (this.tipDom || (this.tipDom = document.createElement("div"), this.tipDom.className = "yyz-iv_tip"), this.tipTime ? clearTimeout(this.tipTime) : this.box.appendChild(this.tipDom), this.tipDom.innerText = Math.round(100 * this.zoom) + "%", this.tipTime = setTimeout((() => { this.box.removeChild(this.tipDom), this.tipTime = null }), this.op.tipTime)) } rotateLeft() { this.rotate -= 90, this.upImgPosition(!0) } rotateRight() { this.rotate += 90, this.upImgPosition(!0) } zoomAdd() { this.zoom += .3, this.l -= .3 * this.img_w / 4, this.t -= .3 * this.img_h / 4, this.upImgPosition(!0), this.tip() } zoomSub() { this.zoom -= .3, this.l += .3 * this.img_w / 4, this.t += .3 * this.img_h / 4, this.upImgPosition(!0), this.tip() } reset() { this.canvasImg.onload() } setUrl(t) { this.url = t, this.close(), this.show() } createNode(t) { var i = document.createElement("div"); return i.innerHTML = t.trim(), i.firstChild } } t.default = o, t.show = function (t, i) { return new o(t, i).show() }, Object.defineProperties(t, { __esModule: { value: !0 }, [Symbol.toStringTag]: { value: "Module" } }) })); //# sourceMappingURL=/sm/917a608ed5f295ce6d2d14a42a1669c1cb689fe082d5dba9ec5a694e72b02641.map