Files

19 lines
22 KiB
JavaScript

/*!
* Cropper.js v1.6.1
* https://fengyuanchen.github.io/cropperjs
*
* Copyright 2015-present Chen Fengyuan
* Released under the MIT license
*
* Date: 2023-09-17T03:40:53.332Z
*/
!function (t, e) { "object" == typeof exports && "undefined" != typeof module ? module.exports = e() : "function" == typeof define && define.amd ? define(e) : (t = "undefined" != typeof globalThis ? globalThis : t || self).Cropper = e() }(this, (function () {
"use strict"; function t(t, e) { var i = Object.keys(t); if (Object.getOwnPropertySymbols) { var a = Object.getOwnPropertySymbols(t); e && (a = a.filter((function (e) { return Object.getOwnPropertyDescriptor(t, e).enumerable }))), i.push.apply(i, a) } return i } function e(e) { for (var i = 1; i < arguments.length; i++) { var a = null != arguments[i] ? arguments[i] : {}; i % 2 ? t(Object(a), !0).forEach((function (t) { r(e, t, a[t]) })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(a)) : t(Object(a)).forEach((function (t) { Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(a, t)) })) } return e } function i(t) { return i = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (t) { return typeof t } : function (t) { return t && "function" == typeof Symbol && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t }, i(t) } function a(t, e) { if (!(t instanceof e)) throw new TypeError("Cannot call a class as a function") } function n(t, e) { for (var i = 0; i < e.length; i++) { var a = e[i]; a.enumerable = a.enumerable || !1, a.configurable = !0, "value" in a && (a.writable = !0), Object.defineProperty(t, o(a.key), a) } } function o(t) { var e = function (t, e) { if ("object" != i(t) || !t) return t; var a = t[Symbol.toPrimitive]; if (void 0 !== a) { var n = a.call(t, e || "default"); if ("object" != i(n)) return n; throw new TypeError("@@toPrimitive must return a primitive value.") } return ("string" === e ? String : Number)(t) }(t, "string"); return "symbol" == i(e) ? e : String(e) } function r(t, e, i) { return (e = o(e)) in t ? Object.defineProperty(t, e, { value: i, enumerable: !0, configurable: !0, writable: !0 }) : t[e] = i, t } function s(t) { return c(t) || h(t) || l(t) || d() } function c(t) { if (Array.isArray(t)) return u(t) } function h(t) { if ("undefined" != typeof Symbol && null != t[Symbol.iterator] || null != t["@@iterator"]) return Array.from(t) } function l(t, e) { if (t) { if ("string" == typeof t) return u(t, e); var i = Object.prototype.toString.call(t).slice(8, -1); return "Object" === i && t.constructor && (i = t.constructor.name), "Map" === i || "Set" === i ? Array.from(t) : "Arguments" === i || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i) ? u(t, e) : void 0 } } function u(t, e) { (null == e || e > t.length) && (e = t.length); for (var i = 0, a = new Array(e); i < e; i++)a[i] = t[i]; return a } function d() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.") } var p = "undefined" != typeof window && void 0 !== window.document, f = p ? window : ({}), m = !!p && "ontouchstart" in f.document.documentElement, g = !!p && "PointerEvent" in f, v = "cropper", w = "all", b = "crop", y = "move", x = "zoom", M = "e", $ = "w", C = "s", D = "n", k = "ne", B = "nw", E = "se", O = "sw", T = "".concat(v, "-crop"), W = "".concat(v, "-disabled"), H = "".concat(v, "-hidden"), z = "".concat(v, "-hide"), L = "".concat(v, "-invisible"), Y = "".concat(v, "-modal"), X = "".concat(v, "-move"), R = "".concat(v, "-action"), S = "".concat(v, "-preview"), A = "".concat(v, "-bg"), I = "".concat(v, "-wrap"), j = "".concat(v, "-mask"), U = "".concat(v, "-canvas"), N = "".concat(v, "-drag-box"), P = "".concat(v, "-crop-box"), q = "".concat(v, "-dashed"), K = "".concat(v, "-line"), Z = "".concat(v, "-point"), F = "".concat(v, "-face"), G = "".concat(v, "-view-box"), Q = "low", V = "medium", J = "high", _ = "cropstart", tt = "cropmove", et = "cropend", it = "crop", at = "zoom", nt = "ready", ot = "error", rt = "dblclick", st = "pointerdown", ct = "pointermove", ht = "pointerup l", lt = "pointercancel", ut = "touchstart", dt = "touchmove", pt = "touchend touchcancel", ft = "mousedown", mt = "mousemove", gt = "mouseup", vt = "wheel", wt = "resize", bt = "image", yt = "canvas", xt = "timeline", Mt = "contain", $t = "cover", Ct = "none", Dt = "n", kt = "w", Bt = "s", Et = "e", Ot = "nw", Tt = "sw", Wt = "ne", Ht = "se", zt = { translate: 1, rotate: 1, scaleX: 1, scaleY: 1, skewX: 1, skewY: 1 }, Lt = { aspectRatio: NaN, autoCrop: !0, autoCropArea: .8, autoCropUtilityClass: null, background: !0, checkCrossOrigin: !0, checkOrientation: !0, cropBoxMovable: !0, cropBoxResizable: !0, data: null, dragMode: b, guides: !0, highlight: !0, initialAspectRatio: NaN, minCanvasHeight: 0, minCanvasWidth: 0, minContainerHeight: 200, minContainerWidth: 100, minCropBoxHeight: 0, minCropBoxWidth: 0, modal: !0, movable: !0, preview: "", responsive: !0, restore: !0, rotatable: !0, scalable: !0, toggleDragModeOnDblclick: !0, viewMode: 0, wheelZoomRatio: .1, zoomOnTouch: !0, zoomOnWheel: !0, zoomable: !0, crop: null, cropend: null, cropmove: null, cropstart: null, ready: null, zoom: null }, Yt = Number.isNaN || f.isNaN; function Xt(t) { return "number" == typeof t && !Yt(t) } function Rt(t) { return void 0 === t } function St(t) { return "object" === i(t) && null !== t } var At = Object.prototype.hasOwnProperty; function It(t) { if (!St(t)) return !1; try { var e = t.constructor, i = e.prototype; return e && i && At.call(i, "isPrototypeOf") } catch (t) { return !1 } } function jt(t) { return "function" == typeof t } function Ut(t) { return Array.isArray(t) } function Nt(t) { return "string" == typeof t } function Pt(t) { return "boolean" == typeof t } function qt(t) { return t.getElementsByTagName } function Kt(t) { return t.getContext } function Zt(t) { return t instanceof HTMLImageElement } function Ft(t) { return t instanceof HTMLCanvasElement } function Gt(t) { return t instanceof HTMLVideoElement } function Qt(t) { var e = t.trim(), i = e.replace(/\s+/g, " "); if (i !== e) { for (var a = i.length, n = e.length, o = 0; o < n; o++) { var r = e.charCodeAt(o); if (32 === r) { if (32 !== e.charCodeAt(o - 1) && 32 !== e.charCodeAt(o + 1)) { var s = e.indexOf(i); s > 0 && o > s && (a += o - s - 1) } } else 32 !== r && (a -= 1) } i = e.length > a ? e.substr(0, a) : e } return i } function Vt(t) { return t.length > 0 && t[t.length - 1].trim().length > 0 } function Jt(t) { return void 0 !== t } function _t(t) { var e = new Error(t); return e.code = "JS_ERROR", e } function te(t) { return t.replace(/[-_]+(.)?/g, (function (t, e) { return e ? e.toUpperCase() : "" })) } function ee(t, e) { return t.style[e] || t.currentStyle && t.currentStyle[e] } function ie(t, e) { if (t.style) { var i = t.style[e]; if (Jt(i)) return i; var a = te(e); return a !== e ? ie(t, a) : void 0 } return ee(t, e) } function ae(t, e) { if (t.style) { var i = t.style[e]; if (Jt(i)) return i } return ee(t, e) } function ne(t, e, i) { i = Jt(i) ? i : 1; (t = Math.abs(t)) >= 100 ? i = 2 : t >= 10 && (i = 1); return e = e || "0", ((t = String(t)).length < i ? e.repeat(i - t.length) : "") + t } function oe(t, e, i) { var a = "Event" === e.substr(-5), n = new CustomEvent(e, { detail: i, bubbles: !0, cancelable: !0 }); return t.dispatchEvent(n) } function re(t) { var e = t.target; return e || (e = t.srcElement || document), 3 === e.nodeType && (e = e.parentNode), e } function se(t) { var e = t.originalEvent || t; if (e.touches && e.touches.length) { var i = e.touches[0]; return { pageX: i.pageX, pageY: i.pageY, clientX: i.clientX, clientY: i.clientY } } return { pageX: e.pageX, pageY: e.pageY, clientX: e.clientX, clientY: e.clientY } } function ce(t, e, i) { var a = t.getBoundingClientRect(), n = se(e); return { x: n.clientX - a.left - (i ? 0 : window.pageXOffset), y: n.clientY - a.top - (i ? 0 : window.pageYOffset) } } function he(t) { return /^(?:img|canvas|video)$/i.test(t.tagName) } function le(t) { return "img" === t.tagName.toLowerCase() } function ue(t) { return "canvas" === t.tagName.toLowerCase() } function de(t) { return "video" === t.tagName.toLowerCase() } function pe(t) { return t.naturalWidth || t.width } function fe(t) { return t.naturalHeight || t.height } function me(t, e) { if (t.style) { var i = t.style[e]; if (void 0 !== i) return i } return t.currentStyle && t.currentStyle[e] } function ge(t, e) { var i = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : null; return (t = t || new Image).onload = function () { e.call(i, this) }, t.src = "string" == typeof t ? t : URL.createObjectURL(t), t } function ve(t, e) { return t.toDataURL(e) } function we(t, e) { return t.toBlob ? new Promise((function (i) { t.toBlob(i, e) })) : Promise.resolve(ve(t, e)) } function be(t) { var e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : 1, i = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : 1, a = document.createElement("canvas"), n = a.getContext("2d"); if (a.width = t.naturalWidth, a.height = t.naturalHeight, n.save(), e === Mt) if (a.width > i) a.width = i, a.height = a.width / t.naturalWidth * t.naturalHeight; else if (a.height > i) a.height = i, a.width = a.height / t.naturalHeight * t.naturalWidth; else { if (!(e === $t)) return; if (a.width < i) a.width = i, a.height = a.width / t.naturalWidth * t.naturalHeight; else if (a.height < i) a.height = i, a.width = a.height / t.naturalHeight * t.naturalWidth } return n.drawImage(t, 0, 0, a.width, a.height), n.restore(), a } function ye(t) { var e = t.split(","), i = e[0].match(/:(.*?);/)[1], a = atob(e[1]), n = a.length, o = new Uint8Array(n); for (; n--;)o[n] = a.charCodeAt(n); return new Blob([o], { type: i }) } function xe(t, e, i) { var a = document.createElement("a"); a.href = t, a.download = e, i && (a.target = "_blank"), document.body.appendChild(a), a.click(), document.body.removeChild(a) } function Me(t, e) { return e ? Math.round(t / e) * e : t } function $e(t, e, i, a) { var n = Math.abs(t), o = Math.abs(e), r = Math.abs(i), s = Math.abs(a); return n >= r && t > 0 && e > 0 || n >= s && t < 0 && e > 0 || o >= r && e > 0 && t > 0 || o >= s && e < 0 && t > 0 ? Math.atan2(Math.abs(t - i), Math.abs(e - a)) * (180 / Math.PI) : 0 } function Ce(t) { var e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : 0, i = document.createElement("span"), a = document.createElement("span"); i.style.cssText = "height:0;width:0;outline:0;border:0;padding:0;margin:0;box-sizing:content-box;", a.style.cssText = i.style.cssText, i.textContent = t, a.textContent = "s", document.body.appendChild(i), document.body.appendChild(a); var n = i.offsetWidth, o = a.offsetWidth; return document.body.removeChild(i), document.body.removeChild(a), n > o ? n : 0 } return function () {
function t(e) { var i = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {}; a(this, t), this.element = e, this.options = Object.assign({}, Lt, St(i) && i), this.isLoaded = !1, this.isImg = !1, this.isCanvas = !1, this.completed = !1, this.image = null, this.canvas = null, this.dragBox = null, this.cropBox = null, this.viewBox = null, this.pointers = {}, this.init() } return n(t, [{ key: "init", value: function () { var t = this.element, e = t.tagName.toLowerCase(), i = this.options; if (!t || !he(t)) throw new Error("The first argument is required and must be an <img> or <canvas> element."); this.isImg = le(t), this.isCanvas = ue(t), this.isImg ? t.src ? this.load() : this.isLoaded = !1 : this.isCanvas && t.width && t.height ? this.load() : this.isLoaded = !1, this.initContainer(), this.initCanvas(), this.initCropBox(), this.render(), this.isLoaded && this.bind() } }, { key: "load", value: function (t) { var e = this; if (t && (this.element.src = t), this.isImg) { if (!this.element.complete) { var i = function () { e.element.removeEventListener("load", i), e.load() }; this.element.addEventListener("load", i), setTimeout((function () { e.element.complete && (e.element.removeEventListener("load", i), e.load()) }), 0) } else this.start() } else this.isCanvas && this.start() } }, { key: "start", value: function () { var t = this; if (this.isLoaded = !0, this.options.checkOrientation) { var e = new Image; e.onload = function () { var i = e.width, a = e.height, n = 1; i > a ? n = i / a : a > i && (n = a / i), t.start2(n) }, e.src = this.element.src } else this.start2() } }, { key: "start2", value: function (t) { var e = this, i = this.element, a = this.options, n = document.createElement("div"); n.className = I, this.container = n, i.parentNode.insertBefore(n, i), n.appendChild(i), this.initPreview(); var o = function () { e.bind(), e.trigger(nt) }; t ? this.render(o) : this.image.onload = function () { e.render(o) } } }, { key: "initContainer", value: function () { var t = this.options, e = this.element, i = this.container, a = this.image; i.style.width = ne(e.offsetWidth) + "px", i.style.height = ne(e.offsetHeight) + "px", a && (a.style.width = ne(e.offsetWidth) + "px", a.style.height = ne(e.offsetHeight) + "px") } }, { key: "initCanvas", value: function () { var t = this.options.viewMode, e = this.container.offsetWidth, i = this.container.offsetHeight, a = this.image.naturalWidth, n = this.image.naturalHeight, o = a / n, r = e / i; t ? o > r ? i = e / o : e = i * o : o > r ? e = i * o : i = e / o, this.canvas = { left: (this.container.offsetWidth - e) / 2, top: (this.container.offsetHeight - i) / 2, width: e, height: i, oldLeft: 0, oldTop: 0, oldWidth: e, oldHeight: i }, this.renderCanvas(!0) } }, { key: "initCropBox", value: function () { var t = this.options, e = this.canvas, i = t.aspectRatio, a = Number(t.autoCropArea) || .8, n = e.width, o = e.height, r = n, s = o; i && (n / o > i ? n = o * i : o = n / i), this.cropBox = { left: e.left + (e.width - n) / 2, top: e.top + (e.height - o) / 2, width: n, height: o, oldLeft: 0, oldTop: 0, oldWidth: n, oldHeight: o }, this.limitCropBox(!0, (!0)), this.initDragger() } }, { key: "render", value: function (t) { this.renderCanvas(), this.renderCropBox(), t && t() } }, { key: "renderCanvas", value: function (t) { var e = this.canvas, i = this.image; if (i) { var a = e.width, n = e.height, o = e.left, r = e.top; i.style.width = ne(a) + "px", i.style.height = ne(n) + "px", i.style.marginLeft = ne(o) + "px", i.style.marginTop = ne(r) + "px", this.transformCanvas(t) } } }, { key: "renderCropBox", value: function () { var t = this.options, e = this.cropBox; if (e.width > e.height * t.aspectRatio ? (e.left = e.left + (e.width - e.height * t.aspectRatio) / 2, e.width = e.height * t.aspectRatio) : (e.top = e.top + (e.height - e.width / t.aspectRatio) / 2, e.height = e.width / t.aspectRatio), this.dragBox) { var i = this.dragBox; i.style.width = ne(e.width) + "px", i.style.height = ne(e.height) + "px", i.style.left = ne(e.left) + "px", i.style.top = ne(e.top) + "px" } this.renderFace() } }, { key: "renderFace", value: function () { if (this.cropBox) { var t = this.cropBox, e = t.width, i = t.height, a = this.dragBox; if (a) { var n = a.getElementsByClassName(F)[0]; n && (n.style.width = ne(e) + "px", n.style.height = ne(i) + "px", n.style.left = ne(t.left) + "px", n.style.top = ne(t.top) + "px") } } } }, { key: "initDragger", value: function () { var t = this.dragBox; t || (t = document.createElement("div"), t.className = P, this.container.appendChild(t), this.dragBox = t), this.bindDragger() } }, { key: "bind", value: function () { var t = this, e = this.options, i = this.container; i.addEventListener(ft, this.cropStart.bind(this)), i.addEventListener(ut, this.cropStart.bind(this)), e.zoomable && i.addEventListener(vt, this.wheel.bind(this)); var a = function (e) { t.cropMove(e) }, n = function (e) { t.cropEnd(e) }; document.addEventListener(mt, a), document.addEventListener(dt, a), document.addEventListener(gt, n), document.addEventListener(pt, n) } }, { key: "unbind", value: function () { var t = this.container; t.removeEventListener(ft, this.cropStart), t.removeEventListener(ut, this.cropStart), t.removeEventListener(vt, this.wheel), document.removeEventListener(mt, this.cropMove), document.removeEventListener(dt, this.cropMove), document.removeEventListener(gt, this.cropEnd), document.removeEventListener(pt, this.cropEnd) } }, { key: "bindDragger", value: function () { } }, { key: "reset", value: function () { this.initCanvas(), this.initCropBox(), this.renderCanvas(), this.renderCropBox() } }, { key: "clear", value: function () { this.cropBox = { left: 0, top: 0, width: 0, height: 0 }, this.renderCropBox(), this.disable() } }, { key: "replace", value: function (t, e) { this.load(t), e && (this.options = Object.assign({}, this.options, e), this.init()) } }, { key: "enable", value: function () { this.completed = !1, this.bind(), this.trigger(nt) } }, { key: "disable", value: function () { this.completed = !0, this.unbind(), this.trigger(ot) } }, { key: "destroy", value: function () { var t = this.container; t && (this.unbind(), t.parentNode.removeChild(t)) } }, { key: "move", value: function (t, e) { var i = this.canvas; i.left += t, i.top += e, this.renderCanvas(!0) } }, { key: "zoom", value: function (t, e) { var i = this.canvas; t = Number(t), t < 0 ? t = 1 / (1 - t) : t += 1; var a = i.width * t, n = i.height * t, o = i.left - (a - i.width) / 2, r = i.top - (n - i.height) / 2; e && (e = se(e), o = e.pageX - this.container.getBoundingClientRect().left - (e.pageX - this.container.getBoundingClientRect().left - i.left) * t, r = e.pageY - this.container.getBoundingClientRect().top - (e.pageY - this.container.getBoundingClientRect().top - i.top) * t), i.width = a, i.height = n, i.left = o, i.top = r, this.renderCanvas(!0) } }, { key: "rotate", value: function (t) { var e = this.image, i = e.style.transform; e.style.transform = i ? i + " rotate(" + t + "deg)" : "rotate(" + t + "deg)" } }, {
key: "scaleX", value: function (t) {
var e = this.image, i = e.style.transform; e.style.transform = i ? i + " scaleX(" + t + ")" : "scaleX(" + t +
")"
}
}, { key: "scaleY", value: function (t) { var e = this.image, i = e.style.transform; e.style.transform = i ? i + " scaleY(" + t + ")" : "scaleY(" + t + ")" } }, { key: "getData", value: function (t) { var e = this.options, i = this.image, a = this.canvas, n = this.cropBox, o = i.naturalWidth, r = i.naturalHeight, s = a.width, c = a.height, h = n.width, l = n.height, u = n.left - a.left, d = n.top - a.top, p = u / s, f = d / c, m = h / s, g = l / c, v = o * p, w = r * f, b = o * m, y = r * g; return t && (v = Math.round(v), w = Math.round(w), b = Math.round(b), y = Math.round(y)), { x: v, y: w, width: b, height: y, rotate: 0, scaleX: 1, scaleY: 1 } } }, { key: "setData", value: function (t) { var e = this.options, i = this.image, a = this.canvas, n = t.x, o = t.y, r = t.width, s = t.height, c = i.naturalWidth, h = i.naturalHeight, l = a.width, u = a.height, d = n / c, p = o / h, f = r / c, m = s / h, g = l * d + a.left, v = u * p + a.top, w = l * f, b = u * m; this.cropBox = { left: g, top: v, width: w, height: b }, this.renderCropBox() } }, { key: "getContainerData", value: function () { return { width: this.container.offsetWidth, height: this.container.offsetHeight } } }, { key: "getImageData", value: function () { return { left: this.canvas.left, top: this.canvas.top, width: this.canvas.width, height: this.canvas.height, naturalWidth: this.image.naturalWidth, naturalHeight: this.image.naturalHeight, aspectRatio: this.image.naturalWidth / this.image.naturalHeight } } }, { key: "getCanvasData", value: function () { var t = this.canvas, e = t.left, i = t.top, a = t.width, n = t.height; return { left: e, top: i, width: a, height: n, naturalWidth: this.image.naturalWidth, naturalHeight: this.image.naturalHeight } } }, { key: "setCanvasData", value: function (t) { var e = this.canvas, i = t.left, a = t.top, n = t.width, o = t.height; Jt(i) && (e.left = i), Jt(a) && (e.top = a), Jt(n) && (e.width = n), Jt(o) && (e.height = o), this.renderCanvas(!0) } }, { key: "getCropBoxData", value: function () { var t = this.cropBox, e = t.left, i = t.top, a = t.width, n = t.height; return { left: e, top: i, width: a, height: n } } }, { key: "setCropBoxData", value: function (t) { var e = this.cropBox, i = t.left, a = t.top, n = t.width, o = t.height; Jt(i) && (e.left = i), Jt(a) && (e.top = a), Jt(n) && (e.width = n), Jt(o) && (e.height = o), this.renderCropBox() } }, { key: "getCroppedCanvas", value: function (t) { var e = this.getData(), i = this.image, a = i.naturalWidth, n = i.naturalHeight, o = e.width, r = e.height, s = document.createElement("canvas"); s.width = o, s.height = r; var c = s.getContext("2d"); return c.drawImage(i, e.x, e.y, o, r, 0, 0, o, r), s } }, { key: "setAspectRatio", value: function (t) { this.options.aspectRatio = t, this.renderCropBox() } }, { key: "setDragMode", value: function (t) { this.options.dragMode = t } }, { key: "trigger", value: function (t, e) { var i; this.options[t] && this.options[t].apply(this, e || []), (i = oe(this.element, v + t, e)) } }, { key: "cropStart", value: function (t) { if (!this.completed) { var e = t.originalEvent || t, i = e.touches && e.touches.length ? e.touches[0] : e; if (this.dragBox.contains(i.target)) { this.trigger(_); var a = i.pageX, n = i.pageY; this.pointers = { startX: a, startY: n }, this.dragMode = this.options.dragMode } } } }, { key: "cropMove", value: function (t) { if (!this.completed) { var e = t.originalEvent || t, i = e.touches && e.touches.length ? e.touches[0] : e; if (this.pointers) { var a = i.pageX, n = i.pageY, o = a - this.pointers.startX, r = n - this.pointers.startY; this.pointers = { startX: a, startY: n }, this.trigger(tt), this.move(o, r) } } } }, { key: "cropEnd", value: function (t) { this.pointers && (this.trigger(et), this.pointers = null) } }, { key: "wheel", value: function (t) { var e = t.originalEvent || t, i = e.deltaY, a = this.options.wheelZoomRatio; i > 0 ? this.zoom(-a, e) : this.zoom(a, e), t.preventDefault() } }]), t
}();
}));