vue3-image-editor
Version:
An Image Editor component library
904 lines (903 loc) • 33.9 kB
JavaScript
import { defineComponent as Ae, onMounted as We, watch as He, ref as I, openBlock as je, createElementBlock as ze, createElementVNode as F, normalizeStyle as J, withDirectives as Xe, vShow as Ye, pushScopeId as Ve, popScopeId as $e } from "vue";
/*!
* Compressor.js v1.2.1
* https://fengyuanchen.github.io/compressorjs
*
* Copyright 2018-present Chen Fengyuan
* Released under the MIT license
*
* Date: 2023-02-28T14:09:41.732Z
*/
function De(r, e) {
var i = Object.keys(r);
if (Object.getOwnPropertySymbols) {
var t = Object.getOwnPropertySymbols(r);
e && (t = t.filter(function(o) {
return Object.getOwnPropertyDescriptor(r, o).enumerable;
})), i.push.apply(i, t);
}
return i;
}
function ye(r) {
for (var e = 1; e < arguments.length; e++) {
var i = arguments[e] != null ? arguments[e] : {};
e % 2 ? De(Object(i), !0).forEach(function(t) {
Ke(r, t, i[t]);
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(r, Object.getOwnPropertyDescriptors(i)) : De(Object(i)).forEach(function(t) {
Object.defineProperty(r, t, Object.getOwnPropertyDescriptor(i, t));
});
}
return r;
}
function Ge(r, e) {
if (!(r instanceof e))
throw new TypeError("Cannot call a class as a function");
}
function Pe(r, e) {
for (var i = 0; i < e.length; i++) {
var t = e[i];
t.enumerable = t.enumerable || !1, t.configurable = !0, "value" in t && (t.writable = !0), Object.defineProperty(r, Le(t.key), t);
}
}
function Ne(r, e, i) {
return e && Pe(r.prototype, e), i && Pe(r, i), Object.defineProperty(r, "prototype", {
writable: !1
}), r;
}
function Ke(r, e, i) {
return e = Le(e), e in r ? Object.defineProperty(r, e, {
value: i,
enumerable: !0,
configurable: !0,
writable: !0
}) : r[e] = i, r;
}
function be() {
return be = Object.assign ? Object.assign.bind() : function(r) {
for (var e = 1; e < arguments.length; e++) {
var i = arguments[e];
for (var t in i)
Object.prototype.hasOwnProperty.call(i, t) && (r[t] = i[t]);
}
return r;
}, be.apply(this, arguments);
}
function _e(r, e) {
if (typeof r != "object" || r === null)
return r;
var i = r[Symbol.toPrimitive];
if (i !== void 0) {
var t = i.call(r, e || "default");
if (typeof t != "object")
return t;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return (e === "string" ? String : Number)(r);
}
function Le(r) {
var e = _e(r, "string");
return typeof e == "symbol" ? e : String(e);
}
var Oe = { exports: {} };
(function(r) {
typeof window > "u" || function(e) {
var i = e.HTMLCanvasElement && e.HTMLCanvasElement.prototype, t = e.Blob && function() {
try {
return !!new Blob();
} catch {
return !1;
}
}(), o = t && e.Uint8Array && function() {
try {
return new Blob([new Uint8Array(100)]).size === 100;
} catch {
return !1;
}
}(), u = e.BlobBuilder || e.WebKitBlobBuilder || e.MozBlobBuilder || e.MSBlobBuilder, b = /^data:((.*?)(;charset=.*?)?)(;base64)?,/, f = (t || u) && e.atob && e.ArrayBuffer && e.Uint8Array && function(d) {
var v, p, C, B, y, c, x, h, E;
if (v = d.match(b), !v)
throw new Error("invalid data URI");
for (p = v[2] ? v[1] : "text/plain" + (v[3] || ";charset=US-ASCII"), C = !!v[4], B = d.slice(v[0].length), C ? y = atob(B) : y = decodeURIComponent(B), c = new ArrayBuffer(y.length), x = new Uint8Array(c), h = 0; h < y.length; h += 1)
x[h] = y.charCodeAt(h);
return t ? new Blob([o ? x : c], {
type: p
}) : (E = new u(), E.append(c), E.getBlob(p));
};
e.HTMLCanvasElement && !i.toBlob && (i.mozGetAsFile ? i.toBlob = function(d, v, p) {
var C = this;
setTimeout(function() {
p && i.toDataURL && f ? d(f(C.toDataURL(v, p))) : d(C.mozGetAsFile("blob", v));
});
} : i.toDataURL && f && (i.msToBlob ? i.toBlob = function(d, v, p) {
var C = this;
setTimeout(function() {
(v && v !== "image/png" || p) && i.toDataURL && f ? d(f(C.toDataURL(v, p))) : d(C.msToBlob(v));
});
} : i.toBlob = function(d, v, p) {
var C = this;
setTimeout(function() {
d(f(C.toDataURL(v, p)));
});
})), r.exports ? r.exports = f : e.dataURLtoBlob = f;
}(window);
})(Oe);
var Fe = Oe.exports, qe = function(e) {
return typeof Blob > "u" ? !1 : e instanceof Blob || Object.prototype.toString.call(e) === "[object Blob]";
}, Te = {
/**
* Indicates if output the original image instead of the compressed one
* when the size of the compressed image is greater than the original one's
* @type {boolean}
*/
strict: !0,
/**
* Indicates if read the image's Exif Orientation information,
* and then rotate or flip the image automatically.
* @type {boolean}
*/
checkOrientation: !0,
/**
* Indicates if retain the image's Exif information after compressed.
* @type {boolean}
*/
retainExif: !1,
/**
* The max width of the output image.
* @type {number}
*/
maxWidth: 1 / 0,
/**
* The max height of the output image.
* @type {number}
*/
maxHeight: 1 / 0,
/**
* The min width of the output image.
* @type {number}
*/
minWidth: 0,
/**
* The min height of the output image.
* @type {number}
*/
minHeight: 0,
/**
* The width of the output image.
* If not specified, the natural width of the source image will be used.
* @type {number}
*/
width: void 0,
/**
* The height of the output image.
* If not specified, the natural height of the source image will be used.
* @type {number}
*/
height: void 0,
/**
* Sets how the size of the image should be resized to the container
* specified by the `width` and `height` options.
* @type {string}
*/
resize: "none",
/**
* The quality of the output image.
* It must be a number between `0` and `1`,
* and only available for `image/jpeg` and `image/webp` images.
* Check out {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob canvas.toBlob}.
* @type {number}
*/
quality: 0.8,
/**
* The mime type of the output image.
* By default, the original mime type of the source image file will be used.
* @type {string}
*/
mimeType: "auto",
/**
* Files whose file type is included in this list,
* and whose file size exceeds the `convertSize` value will be converted to JPEGs.
* @type {string｜Array}
*/
convertTypes: ["image/png"],
/**
* PNG files over this size (5 MB by default) will be converted to JPEGs.
* To disable this, just set the value to `Infinity`.
* @type {number}
*/
convertSize: 5e6,
/**
* The hook function to execute before draw the image into the canvas for compression.
* @type {Function}
* @param {CanvasRenderingContext2D} context - The 2d rendering context of the canvas.
* @param {HTMLCanvasElement} canvas - The canvas for compression.
* @example
* function (context, canvas) {
* context.fillStyle = '#fff';
* }
*/
beforeDraw: null,
/**
* The hook function to execute after drew the image into the canvas for compression.
* @type {Function}
* @param {CanvasRenderingContext2D} context - The 2d rendering context of the canvas.
* @param {HTMLCanvasElement} canvas - The canvas for compression.
* @example
* function (context, canvas) {
* context.filter = 'grayscale(100%)';
* }
*/
drew: null,
/**
* The hook function to execute when success to compress the image.
* @type {Function}
* @param {File} file - The compressed image File object.
* @example
* function (file) {
* console.log(file);
* }
*/
success: null,
/**
* The hook function to execute when fail to compress the image.
* @type {Function}
* @param {Error} err - An Error object.
* @example
* function (err) {
* console.log(err.message);
* }
*/
error: null
}, Je = typeof window < "u" && typeof window.document < "u", A = Je ? window : {}, Ce = function(e) {
return e > 0 && e < 1 / 0;
}, Qe = Array.prototype.slice;
function Re(r) {
return Array.from ? Array.from(r) : Qe.call(r);
}
var Ze = /^image\/.+$/;
function Be(r) {
return Ze.test(r);
}
function et(r) {
var e = Be(r) ? r.substr(6) : "";
return e === "jpeg" && (e = "jpg"), ".".concat(e);
}
var Me = String.fromCharCode;
function tt(r, e, i) {
var t = "", o;
for (i += e, o = e; o < i; o += 1)
t += Me(r.getUint8(o));
return t;
}
var at = A.btoa;
function Ue(r, e) {
for (var i = [], t = 8192, o = new Uint8Array(r); o.length > 0; )
i.push(Me.apply(null, Re(o.subarray(0, t)))), o = o.subarray(t);
return "data:".concat(e, ";base64,").concat(at(i.join("")));
}
function nt(r) {
var e = new DataView(r), i;
try {
var t, o, u;
if (e.getUint8(0) === 255 && e.getUint8(1) === 216)
for (var b = e.byteLength, f = 2; f + 1 < b; ) {
if (e.getUint8(f) === 255 && e.getUint8(f + 1) === 225) {
o = f;
break;
}
f += 1;
}
if (o) {
var d = o + 4, v = o + 10;
if (tt(e, d, 4) === "Exif") {
var p = e.getUint16(v);
if (t = p === 18761, (t || p === 19789) && e.getUint16(v + 2, t) === 42) {
var C = e.getUint32(v + 4, t);
C >= 8 && (u = v + C);
}
}
}
if (u) {
var B = e.getUint16(u, t), y, c;
for (c = 0; c < B; c += 1)
if (y = u + c * 12 + 2, e.getUint16(y, t) === 274) {
y += 8, i = e.getUint16(y, t), e.setUint16(y, 1, t);
break;
}
}
} catch {
i = 1;
}
return i;
}
function it(r) {
var e = 0, i = 1, t = 1;
switch (r) {
case 2:
i = -1;
break;
case 3:
e = -180;
break;
case 4:
t = -1;
break;
case 5:
e = 90, t = -1;
break;
case 6:
e = 90;
break;
case 7:
e = 90, i = -1;
break;
case 8:
e = -90;
break;
}
return {
rotate: e,
scaleX: i,
scaleY: t
};
}
var rt = /\.\d*(?:0|9){12}\d*$/;
function ke(r) {
var e = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 1e11;
return rt.test(r) ? Math.round(r * e) / e : r;
}
function re(r) {
var e = r.aspectRatio, i = r.height, t = r.width, o = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "none", u = Ce(t), b = Ce(i);
if (u && b) {
var f = i * e;
(o === "contain" || o === "none") && f > t || o === "cover" && f < t ? i = t / e : t = i * e;
} else
u ? i = t / e : b && (t = i * e);
return {
width: t,
height: i
};
}
function ot(r) {
for (var e = Re(new Uint8Array(r)), i = e.length, t = [], o = 0; o + 3 < i; ) {
var u = e[o], b = e[o + 1];
if (u === 255 && b === 218)
break;
if (u === 255 && b === 216)
o += 2;
else {
var f = e[o + 2] * 256 + e[o + 3], d = o + f + 2, v = e.slice(o, d);
t.push(v), o = d;
}
}
return t.reduce(function(p, C) {
return C[0] === 255 && C[1] === 225 ? p.concat(C) : p;
}, []);
}
function lt(r, e) {
var i = Re(new Uint8Array(r));
if (i[2] !== 255 || i[3] !== 224)
return r;
var t = i[4] * 256 + i[5], o = [255, 216].concat(e, i.slice(4 + t));
return new Uint8Array(o);
}
var ut = A.ArrayBuffer, Ie = A.FileReader, V = A.URL || A.webkitURL, st = /\.\w+$/, ct = A.Compressor, vt = /* @__PURE__ */ function() {
function r(e, i) {
Ge(this, r), this.file = e, this.exif = [], this.image = new Image(), this.options = ye(ye({}, Te), i), this.aborted = !1, this.result = null, this.init();
}
return Ne(r, [{
key: "init",
value: function() {
var i = this, t = this.file, o = this.options;
if (!qe(t)) {
this.fail(new Error("The first argument must be a File or Blob object."));
return;
}
var u = t.type;
if (!Be(u)) {
this.fail(new Error("The first argument must be an image File or Blob object."));
return;
}
if (!V || !Ie) {
this.fail(new Error("The current browser does not support image compression."));
return;
}
ut || (o.checkOrientation = !1, o.retainExif = !1);
var b = u === "image/jpeg", f = b && o.checkOrientation, d = b && o.retainExif;
if (V && !f && !d)
this.load({
url: V.createObjectURL(t)
});
else {
var v = new Ie();
this.reader = v, v.onload = function(p) {
var C = p.target, B = C.result, y = {}, c = 1;
f && (c = nt(B), c > 1 && be(y, it(c))), d && (i.exif = ot(B)), f || d ? !V || c > 1 ? y.url = Ue(B, u) : y.url = V.createObjectURL(t) : y.url = B, i.load(y);
}, v.onabort = function() {
i.fail(new Error("Aborted to read the image with FileReader."));
}, v.onerror = function() {
i.fail(new Error("Failed to read the image with FileReader."));
}, v.onloadend = function() {
i.reader = null;
}, f || d ? v.readAsArrayBuffer(t) : v.readAsDataURL(t);
}
}
}, {
key: "load",
value: function(i) {
var t = this, o = this.file, u = this.image;
u.onload = function() {
t.draw(ye(ye({}, i), {}, {
naturalWidth: u.naturalWidth,
naturalHeight: u.naturalHeight
}));
}, u.onabort = function() {
t.fail(new Error("Aborted to load the image."));
}, u.onerror = function() {
t.fail(new Error("Failed to load the image."));
}, A.navigator && /(?:iPad|iPhone|iPod).*?AppleWebKit/i.test(A.navigator.userAgent) && (u.crossOrigin = "anonymous"), u.alt = o.name, u.src = i.url;
}
}, {
key: "draw",
value: function(i) {
var t = this, o = i.naturalWidth, u = i.naturalHeight, b = i.rotate, f = b === void 0 ? 0 : b, d = i.scaleX, v = d === void 0 ? 1 : d, p = i.scaleY, C = p === void 0 ? 1 : p, B = this.file, y = this.image, c = this.options, x = document.createElement("canvas"), h = x.getContext("2d"), E = Math.abs(f) % 180 === 90, g = (c.resize === "contain" || c.resize === "cover") && Ce(c.width) && Ce(c.height), U = Math.max(c.maxWidth, 0) || 1 / 0, D = Math.max(c.maxHeight, 0) || 1 / 0, k = Math.max(c.minWidth, 0) || 0, L = Math.max(c.minHeight, 0) || 0, P = o / u, R = c.width, w = c.height;
if (E) {
var oe = [D, U];
U = oe[0], D = oe[1];
var le = [L, k];
k = le[0], L = le[1];
var $ = [w, R];
R = $[0], w = $[1];
}
g && (P = R / w);
var W = re({
aspectRatio: P,
width: U,
height: D
}, "contain");
U = W.width, D = W.height;
var H = re({
aspectRatio: P,
width: k,
height: L
}, "cover");
if (k = H.width, L = H.height, g) {
var ue = re({
aspectRatio: P,
width: R,
height: w
}, c.resize);
R = ue.width, w = ue.height;
} else {
var se = re({
aspectRatio: P,
width: R,
height: w
}), j = se.width;
R = j === void 0 ? o : j;
var z = se.height;
w = z === void 0 ? u : z;
}
R = Math.floor(ke(Math.min(Math.max(R, k), U))), w = Math.floor(ke(Math.min(Math.max(w, L), D)));
var G = -R / 2, ce = -w / 2, ve = R, de = w, N = [];
if (g) {
var X = 0, ge = 0, Q = o, Z = u, fe = re({
aspectRatio: P,
width: o,
height: u
}, {
contain: "cover",
cover: "contain"
}[c.resize]);
Q = fe.width, Z = fe.height, X = (o - Q) / 2, ge = (u - Z) / 2, N.push(X, ge, Q, Z);
}
if (N.push(G, ce, ve, de), E) {
var ee = [w, R];
R = ee[0], w = ee[1];
}
x.width = R, x.height = w, Be(c.mimeType) || (c.mimeType = B.type);
var K = "transparent";
B.size > c.convertSize && c.convertTypes.indexOf(c.mimeType) >= 0 && (c.mimeType = "image/jpeg");
var te = c.mimeType === "image/jpeg";
if (te && (K = "#fff"), h.fillStyle = K, h.fillRect(0, 0, R, w), c.beforeDraw && c.beforeDraw.call(this, h, x), !this.aborted && (h.save(), h.translate(R / 2, w / 2), h.rotate(f * Math.PI / 180), h.scale(v, C), h.drawImage.apply(h, [y].concat(N)), h.restore(), c.drew && c.drew.call(this, h, x), !this.aborted)) {
var ae = function(O) {
if (!t.aborted) {
var ne = function(Y) {
return t.done({
naturalWidth: o,
naturalHeight: u,
result: Y
});
};
if (O && te && c.retainExif && t.exif && t.exif.length > 0) {
var he = function(Y) {
return ne(Fe(Ue(lt(Y, t.exif), c.mimeType)));
};
if (O.arrayBuffer)
O.arrayBuffer().then(he).catch(function() {
t.fail(new Error("Failed to read the compressed image with Blob.arrayBuffer()."));
});
else {
var M = new Ie();
t.reader = M, M.onload = function(ie) {
var Y = ie.target;
he(Y.result);
}, M.onabort = function() {
t.fail(new Error("Aborted to read the compressed image with FileReader."));
}, M.onerror = function() {
t.fail(new Error("Failed to read the compressed image with FileReader."));
}, M.onloadend = function() {
t.reader = null;
}, M.readAsArrayBuffer(O);
}
} else
ne(O);
}
};
x.toBlob ? x.toBlob(ae, c.mimeType, c.quality) : ae(Fe(x.toDataURL(c.mimeType, c.quality)));
}
}
}, {
key: "done",
value: function(i) {
var t = i.naturalWidth, o = i.naturalHeight, u = i.result, b = this.file, f = this.image, d = this.options;
if (V && f.src.indexOf("blob:") === 0 && V.revokeObjectURL(f.src), u)
if (d.strict && !d.retainExif && u.size > b.size && d.mimeType === b.type && !(d.width > t || d.height > o || d.minWidth > t || d.minHeight > o || d.maxWidth < t || d.maxHeight < o))
u = b;
else {
var v = /* @__PURE__ */ new Date();
u.lastModified = v.getTime(), u.lastModifiedDate = v, u.name = b.name, u.name && u.type !== b.type && (u.name = u.name.replace(st, et(u.type)));
}
else
u = b;
this.result = u, d.success && d.success.call(this, u);
}
}, {
key: "fail",
value: function(i) {
var t = this.options;
if (t.error)
t.error.call(this, i);
else
throw i;
}
}, {
key: "abort",
value: function() {
this.aborted || (this.aborted = !0, this.reader ? this.reader.abort() : this.image.complete ? this.fail(new Error("The compression process has been aborted.")) : (this.image.onload = null, this.image.onabort()));
}
/**
* Get the no conflict compressor class.
* @returns {Compressor} The compressor class.
*/
}], [{
key: "noConflict",
value: function() {
return window.Compressor = ct, r;
}
/**
* Change the default options.
* @param {Object} options - The new default options.
*/
}, {
key: "setDefaults",
value: function(i) {
be(Te, i);
}
}]), r;
}();
const dt = (r) => (Ve("data-v-7c7d336a"), r = r(), $e(), r), gt = {
class: "main-editor-div",
id: "MainEditorId"
}, ft = { class: "blur-div" }, ht = {
class: "canvas-resize-div",
id: "CanvasImageCropRectangleIdDiv"
}, mt = {
id: "CropRectangleIdDiv",
class: "resizable"
}, pt = /* @__PURE__ */ dt(() => /* @__PURE__ */ F("div", { class: "show-pre-div" }, [
/* @__PURE__ */ F("canvas", {
width: "200",
height: "200",
id: "canvasShowPreviewCropId"
})
], -1)), yt = /* @__PURE__ */ Ae({
__name: "ImageEditor",
props: {
fileImage: {},
colorBrush: {},
borderCropDivColor: {},
backgroundCropDivColor: {},
maxHeight: {},
maxWidth: {}
},
emits: ["finishEditing"],
setup(r, { expose: e, emit: i }) {
const t = r;
We(async () => {
var a, n;
await ee(), g.value = document.getElementById("CropRectangleIdDiv"), h.value = (a = document.getElementById("CanvasImageCropRectangleIdDiv")) == null ? void 0 : a.getBoundingClientRect().top, E.value = (n = document.getElementById("CanvasImageCropRectangleIdDiv")) == null ? void 0 : n.getBoundingClientRect().left;
}), He(() => t.fileImage, async () => {
var a, n;
await ee(), g.value = document.getElementById("CropRectangleIdDiv"), h.value = (a = document.getElementById("CanvasImageCropRectangleIdDiv")) == null ? void 0 : a.getBoundingClientRect().top, E.value = (n = document.getElementById("CanvasImageCropRectangleIdDiv")) == null ? void 0 : n.getBoundingClientRect().left;
});
const o = I(), u = I(), b = I(!1), f = I(4), d = I(!1), v = I(50), p = I(0), C = I(0), B = I(0), y = I(0), c = I(0), x = I(0), h = I(0), E = I(0), g = I(document.createElement("div")), U = I(""), D = I(!1), k = I(0), L = I(0), P = I(0), R = I(0), w = I(), oe = I();
function le() {
t.fileImage && (D.value = !0);
}
function $(a) {
let n = 0;
if (a != null) {
do
n += a.offsetTop, a = a.offsetParent;
while (a);
n = n < 0 ? 0 : n;
}
return n;
}
function W(a, n) {
var s;
a.preventDefault(), p.value = parseFloat(getComputedStyle(g.value, null).getPropertyValue("width").replace("px", "")), C.value = parseFloat(getComputedStyle(g.value, null).getPropertyValue("height").replace("px", "")), B.value = a.pageX, y.value = a.pageY, E.value = (s = document.getElementById("CanvasImageCropRectangleIdDiv")) == null ? void 0 : s.getBoundingClientRect().left;
let l = document.getElementById("CanvasImageCropRectangleIdDiv");
h.value = $(l), c.value = y.value - h.value, x.value = B.value - E.value, U.value = n, window.addEventListener("mousemove", X), window.addEventListener("mouseup", ue);
}
function H(a, n) {
var s;
a.preventDefault(), p.value = parseFloat(getComputedStyle(g.value, null).getPropertyValue("width").replace("px", "")), C.value = parseFloat(getComputedStyle(g.value, null).getPropertyValue("height").replace("px", "")), B.value = a.touches[0].pageX, y.value = a.touches[0].pageY, E.value = (s = document.getElementById("CanvasImageCropRectangleIdDiv")) == null ? void 0 : s.getBoundingClientRect().left;
let l = document.getElementById("CanvasImageCropRectangleIdDiv");
h.value = $(l), c.value = y.value - h.value, x.value = B.value - E.value, U.value = n, window.addEventListener("touchmove", X), window.addEventListener("touchend", se);
}
function ue(a) {
window.removeEventListener("mousemove", X);
}
function se(a) {
window.removeEventListener("touchmove", X);
}
function j(a, n, l, s, m) {
var _, q;
let T = (_ = o.value) == null ? void 0 : _.getBoundingClientRect().width, S = (q = o.value) == null ? void 0 : q.getBoundingClientRect().height;
l > E.value + T && m.includes("right") && (g.value.style.width = T - g.value.offsetLeft + "px"), l < E.value && m.includes("left") && (g.value.style.left = "0px"), s > h.value + S && m.includes("bottom") && (g.value.style.height = S - g.value.offsetTop + "px"), s < h.value && m.includes("top") && (g.value.style.top = "0px"), s + n > h.value + S && m.includes("top") && (g.value.style.top = "", g.value.style.bottom = "0px");
}
function z(a, n) {
return n == "right" ? p.value + (a - B.value) : p.value - (a - B.value);
}
function G(a, n) {
return n == "top" ? C.value - (a - y.value) : C.value + (a - y.value);
}
function ce(a, n) {
var s;
let l = (s = o.value) == null ? void 0 : s.getBoundingClientRect().width;
n > v.value && a < E.value + l && (g.value.style.width = n + "px");
}
function ve(a, n) {
n > v.value && a > E.value && (g.value.style.left = x.value + (a - B.value) + "px", g.value.style.width = n + "px");
}
function de(a, n) {
var s;
let l = (s = o.value) == null ? void 0 : s.getBoundingClientRect().height;
n > v.value && a < h.value + l && (g.value.style.height = n + "px", g.value.style.top = $(g.value) - h.value + "px", g.value.style.bottom = "");
}
function N(a, n) {
var s;
let l = (s = o.value) == null ? void 0 : s.getBoundingClientRect().height;
n > v.value && a > h.value && (a + n > h.value + l ? (g.value.style.top = "", g.value.style.bottom = "0px") : g.value.style.top = c.value + a - y.value + "px", g.value.style.height = n + "px");
}
async function X(a) {
let n, l, s = Q(a), m = ge(a);
switch (U.value) {
case "bottom-right":
n = z(s, "right"), l = G(m, "bottom"), j(n, l, s, m, "bottom-right"), ce(s, n), de(m, l);
break;
case "bottom-left":
n = z(s, "left"), l = G(m, "bottom"), j(n, l, s, m, "bottom-left"), ve(s, n), de(m, l);
break;
case "top-right":
n = z(s, "right"), l = G(m, "top"), j(n, l, s, m, "top-right"), ce(s, n), N(m, l);
break;
case "top-left":
n = z(s, "left"), l = G(m, "top"), j(n, l, s, m, "top-left"), ve(s, n), N(m, l);
break;
}
}
function ge(a) {
var s;
let n = a.pageY ? a.pageY : a.touches[0].pageY, l = (s = document.getElementById("MainEditorId")) == null ? void 0 : s.scrollTop;
return n + l;
}
function Q(a) {
return a.pageX ? a.pageX : a.touches[0].pageX;
}
async function Z() {
let a = document.getElementById("canvasShowPreviewCropId");
if (a.getContext && a) {
let n = a.getContext("2d"), l = new Image();
return l.src = URL.createObjectURL(w.value), new Promise((s, m) => {
l.onload = () => {
var xe, Ee;
let T = parseFloat(getComputedStyle(g.value, null).getPropertyValue("left").replace("px", "")), S = parseFloat(getComputedStyle(g.value, null).getPropertyValue("top").replace("px", "")), _ = (xe = document.getElementById("CanvasImageCropRectangleIdDiv")) == null ? void 0 : xe.getBoundingClientRect().width, q = (Ee = document.getElementById("CanvasImageCropRectangleIdDiv")) == null ? void 0 : Ee.getBoundingClientRect().height, me = l.naturalWidth / _, pe = l.naturalHeight / q;
a.width = Math.ceil(g.value.getBoundingClientRect().width * me), a.height = Math.ceil(g.value.getBoundingClientRect().height * pe), n.drawImage(
l,
T * me,
S * pe,
g.value.getBoundingClientRect().width * me,
g.value.getBoundingClientRect().height * pe,
0,
0,
g.value.getBoundingClientRect().width * me,
g.value.getBoundingClientRect().height * pe
), s(l.naturalWidth);
}, l.onerror = m;
});
}
}
async function fe(a) {
return new Promise((n, l) => {
new vt(a, {
strict: !0,
convertTypes: "image/png",
convertSize: 5e6,
minHeight: 0,
minWidth: 0,
quality: 0.6,
success: n,
error: l
});
});
}
async function ee() {
if (t.fileImage) {
console.log(1), console.log(t.fileImage);
const a = t.fileImage, n = await fe(a);
console.log(3), w.value = n, K(n);
}
}
function K(a) {
if (console.log(4), o.value = document.getElementById("mainImageCanvasId"), o.value.getContext && o.value) {
u.value = o.value.getContext("2d");
let n = new Image();
console.log(5), n.src = URL.createObjectURL(a), n.onload = function() {
var m, T;
let l = n.naturalWidth, s = n.naturalHeight;
o.value.width = l, o.value.height = s, (m = u.value) == null || m.drawImage(n, 0, 0, n.naturalWidth, n.naturalHeight, 0, 0, l, s), oe.value = (T = u.value) == null ? void 0 : T.getImageData(0, 0, n.naturalWidth, n.naturalHeight);
}, g.value.style.left = "0px", g.value.style.top = "0px", g.value.style.width = v.value + "px", g.value.style.height = v.value + "px";
}
}
async function te(a) {
var s;
let n = (s = document.getElementById("CanvasImageCropRectangleIdDiv")) == null ? void 0 : s.getBoundingClientRect().top;
return a.offsetY ? a.offsetY : a.touches[0].clientY - n;
}
async function ae(a) {
var s;
let n = (s = document.getElementById("CanvasImageCropRectangleIdDiv")) == null ? void 0 : s.getBoundingClientRect().left;
return a.offsetX ? a.offsetX : a.touches[0].clientX - n;
}
async function we(a) {
var n, l, s, m, T, S;
if (a.preventDefault(), d.value) {
b.value = !0, k.value = (n = document.getElementById("CanvasImageCropRectangleIdDiv")) == null ? void 0 : n.getBoundingClientRect().width, L.value = (l = document.getElementById("CanvasImageCropRectangleIdDiv")) == null ? void 0 : l.getBoundingClientRect().height, P.value = ((s = o.value) == null ? void 0 : s.width) / k.value, R.value = ((m = o.value) == null ? void 0 : m.height) / L.value;
let _ = await ae(a) * P.value, q = await te(a) * R.value;
u.value.lineWidth = f.value * P.value, u.value.lineCap = "round", u.value.strokeStyle = t.colorBrush == "" ? "#000000" : t.colorBrush, (T = u.value) == null || T.beginPath(), (S = u.value) == null || S.moveTo(_, q);
}
}
function O(a) {
a.preventDefault(), b.value = !1;
}
async function ne(a) {
var s, m;
if (a.preventDefault(), !b.value)
return;
let n = Math.ceil(await ae(a) * P.value), l = Math.ceil(await te(a) * R.value);
(s = u.value) == null || s.lineTo(n, l), (m = u.value) == null || m.stroke();
}
function he() {
t.fileImage && (d.value = !0);
}
function M() {
var a;
t.fileImage && ((a = o.value) == null || a.toBlob((n) => {
const l = URL.createObjectURL(n), s = document.createElement("a");
s.href = l, s.setAttribute("download", "test"), document.body.appendChild(s), s.click(), s.remove();
}));
}
async function ie() {
var a;
D.value ? (await Z(), document.getElementById("canvasShowPreviewCropId").toBlob((l) => {
w.value = l, K(w.value), D.value = !1;
})) : d.value && ((a = o.value) == null || a.toBlob((n) => {
w.value = n, K(w.value), d.value = !1;
}));
}
async function Y() {
d.value = !1, D.value = !1;
}
function Se() {
var n;
const a = new File([w.value], ((n = t.fileImage) == null ? void 0 : n.name.split(".")[0]) + ".png", { type: "image/png" });
i("finishEditing", a);
}
return e({ enablePainting: he, enableCroping: le, finishEditing: Se, download: M, saveChanges: ie, cancelChanges: Y }), (a, n) => (je(), ze("div", gt, [
F("div", ft, [
F("div", ht, [
F("canvas", {
style: J({
maxWidth: a.maxWidth ? a.maxWidth + "px" : "unset",
maxHeight: a.maxHeight ? a.maxHeight + "px" : "unset"
}),
class: "canvas-style",
onTouchmove: ne,
onTouchend: O,
onTouchstart: we,
onMousedown: we,
onMouseup: O,
onMousemove: ne,
width: "400",
height: "300",
id: "mainImageCanvasId"
}, null, 36),
Xe(F("div", mt, [
F("div", {
class: "resizers",
style: J({
border: `3px solid ${a.borderCropDivColor}`
})
}, [
F("div", {
style: J({
border: `3px solid ${a.borderCropDivColor}`,
background: a.backgroundCropDivColor
}),
onTouchstart: n[0] || (n[0] = (l) => H(l, "top-left")),
onMousedown: n[1] || (n[1] = (l) => W(l, "top-left")),
class: "resizer top-left"
}, null, 36),
F("div", {
style: J({
border: `3px solid ${a.borderCropDivColor}`,
background: a.backgroundCropDivColor
}),
onTouchstart: n[2] || (n[2] = (l) => H(l, "top-right")),
onMousedown: n[3] || (n[3] = (l) => W(l, "top-right")),
class: "resizer top-right"
}, null, 36),
F("div", {
style: J({
border: `3px solid ${a.borderCropDivColor}`,
background: a.backgroundCropDivColor
}),
onTouchstart: n[4] || (n[4] = (l) => H(l, "bottom-left")),
onMousedown: n[5] || (n[5] = (l) => W(l, "bottom-left")),
class: "resizer bottom-left"
}, null, 36),
F("div", {
style: J({
border: `3px solid ${a.borderCropDivColor}`,
background: a.backgroundCropDivColor
}),
onTouchstart: n[6] || (n[6] = (l) => H(l, "bottom-right")),
onMousedown: n[7] || (n[7] = (l) => W(l, "bottom-right")),
class: "resizer bottom-right"
}, null, 36)
], 4)
], 512), [
[Ye, D.value]
])
])
]),
pt
]));
}
});
const bt = (r, e) => {
const i = r.__vccOpts || r;
for (const [t, o] of e)
i[t] = o;
return i;
}, Ct = /* @__PURE__ */ bt(yt, [["__scopeId", "data-v-7c7d336a"]]), It = {
install: (r) => {
r.component("ImageEditor", Ct);
}
};
export {
Ct as ImageEditor,
It as default
};