vue-img-cutter
Version:
A image crop plug-in for Vue,you can use it to rotate、zoom images and cut any size
978 lines (977 loc) • 40.9 kB
JavaScript
import { Transition as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, createTextVNode as i, createVNode as a, defineComponent as o, normalizeClass as s, normalizeStyle as c, openBlock as l, renderSlot as u, toDisplayString as d, vShow as f, withCtx as p, withDirectives as m } from "vue";
var h = {
name: "vue-img-cutter",
version: "3.1.1",
description: "A image crop plug-in for Vue,you can use it to rotate、zoom images and cut any size",
author: "ihtmlcss.com",
private: !1,
engines: { node: ">=22.22.2" },
scripts: {
dev: "vite",
build: "vite build",
"build:page": "vite build --mode=page",
lint: "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx --fix",
preview: "vite preview"
},
dependencies: {
"core-js": "^3.49.0",
vue: "^3.5.33",
"vue-i18n": "^11.4.0"
},
devDependencies: {
"@eslint/eslintrc": "^3.3.5",
"@microsoft/api-extractor": "^7.58.7",
"@types/node": "^25.6.0",
"@typescript-eslint/parser": "^8.59.2",
"@vitejs/plugin-vue": "^6.0.6",
"@vue/eslint-config-typescript": "^14.7.0",
"@vue/language-core": "^3.1.8",
eslint: "^9.39.4",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.5",
"eslint-plugin-vue": "^10.9.0",
globals: "^17.6.0",
prettier: "^3.8.3",
typescript: "^6.0.3",
vite: "^8.0.10",
"vite-plugin-dts": "^5.0.0",
"vite-plugin-eslint": "^1.8.1",
"vue-eslint-parser": "^10.4.0"
},
main: "./dist/vue-img-cutter.umd.js",
module: "./dist/vue-img-cutter.es.js",
exports: {
".": {
types: "./dist/vue-img-cutter.d.ts",
import: "./dist/vue-img-cutter.es.js",
require: "./dist/vue-img-cutter.umd.js"
},
"./vue-img-cutter.css": "./dist/vue-img-cutter.css"
},
files: ["dist"],
repository: {
type: "git",
url: "git+https://github.com/acccccccb/vue-img-cutter.git"
},
keywords: [
"image",
"crop",
"cutter",
"vue",
"裁剪"
],
license: "MIT",
bugs: { url: "https://github.com/acccccccb/vue-img-cutter/issues" },
homepage: "https://ihtmlcss.com/demo/dist/#/croptool",
volta: { node: "22.22.2" },
browserslist: [
"> 1%",
"last 2 versions",
"not dead"
],
type: "module"
}, g = o({
name: "ImgCutter",
props: {
modalTitle: {
type: String,
default: "图片裁剪",
required: !1
},
crossOrigin: {
type: Boolean,
default: !1,
required: !1
},
crossOriginHeader: {
type: String,
default: "*",
required: !1
},
label: {
type: String,
default: "选择图片",
required: !1
},
isModal: {
type: Boolean,
default: !0,
required: !1
},
lockScroll: {
type: Boolean,
default: !0,
required: !1
},
showChooseBtn: {
type: Boolean,
default: !0,
required: !1
},
boxWidth: {
type: Number,
default: 800,
required: !1
},
boxHeight: {
type: Number,
default: 400,
required: !1
},
cutWidth: {
type: Number,
default: 200,
required: !1
},
cutHeight: {
type: Number,
default: 200,
required: !1
},
rate: {
type: String,
default: null,
required: !1
},
tool: {
type: Boolean,
default: !0,
required: !1
},
toolBgc: {
type: String,
default: "#fff",
required: !1
},
imgMove: {
type: Boolean,
default: !0,
required: !1
},
sizeChange: {
type: Boolean,
default: !0,
required: !1
},
originalGraph: {
type: Boolean,
default: !1,
required: !1
},
moveAble: {
type: Boolean,
default: !0,
required: !1
},
previewMode: {
type: Boolean,
default: !0,
required: !1
},
CuttingOriginal: {
type: Boolean,
default: !1,
required: !1
},
WatermarkText: {
type: String,
default: "",
required: !1
},
WatermarkTextFont: {
type: String,
default: "12px Sans-serif",
required: !1
},
WatermarkTextColor: {
type: String,
default: "#fff",
required: !1
},
WatermarkTextX: {
type: Number,
default: .95,
required: !1
},
WatermarkTextY: {
type: Number,
default: .95,
required: !1
},
smallToUpload: {
type: Boolean,
default: !1,
required: !1
},
saveCutPosition: {
type: Boolean,
default: !1,
required: !1
},
scaleAble: {
type: Boolean,
default: !0,
required: !1
},
index: {
default: null,
required: !1,
type: [String, Number]
},
fileType: {
default: "png",
required: !1,
type: String
},
toolBoxOverflow: {
type: Boolean,
default: !0,
required: !1
},
DoNotDisplayCopyright: {
type: Boolean,
default: !1,
required: !1
},
quality: {
type: Number,
default: 1,
required: !1
},
accept: {
type: String,
default: "image/gif, image/jpeg ,image/png",
required: !1
},
afterChooseImg: {
type: Function,
default: null,
required: !1
}
},
emits: [
"onImageLoadError",
"error",
"onImageLoadComplete",
"onChooseImg",
"onClearAll",
"cutDown",
"onPrintImg"
],
data() {
let e, t;
return e = this.boxWidth / 2, t = this.boxHeight / 2, {
version: "",
visible: !1,
fileName: "",
cutImageObj: null,
onPrintImgTimmer: null,
toolBoxPosition: {
x: 0,
y: 0
},
drawImg: {
img: null,
sx: 0,
sy: 0,
swidth: 0,
sheight: 0,
x: 0,
y: 0,
width: 0,
height: 0
},
toolBox: {
disable: !0,
width: e,
height: t,
x: 0,
y: 0,
boxMove: {
start: {
x: 0,
y: 0
},
moveTo: {
x: 0,
y: 0
}
}
},
dropImg: {
active: !1,
pageX: 0,
pageY: 0,
params: {}
},
rotateImg: { angle: 0 },
rotateControl: {
active: !1,
start: {
x: 0,
y: 0,
position: 0
},
position: 100
},
scaleImg: {
rate: 0,
params: {}
},
controlBox: {
disable: !0,
btnName: "",
start: {
x: 0,
y: 0,
width: 0,
height: 0
}
},
selectBox: !1,
selectBoxColor: "rgba(0,0,0,0.6)",
isFlipHorizontal: !1,
isFlipVertically: !1
};
},
computed: {
showToolBoxWidth() {
let e;
return e = this.originalGraph ? this.toolBox.width / (this.drawImg.width / this.drawImg.swidth) : this.toolBox.width, Number(e).toFixed(0);
},
showToolBoxHeight() {
let e;
return e = this.originalGraph ? this.toolBox.height / (this.drawImg.width / this.drawImg.swidth) : this.toolBox.height, Number(e).toFixed(0);
},
showToolBoxX() {
let e;
return e = this.toolBoxPosition.x, Number(e).toFixed(0);
},
showToolBoxY() {
let e;
return e = this.toolBoxPosition.y, Number(e).toFixed(0);
}
},
mounted() {
this.version = h.version, this.isModal === !1 && (this.visible = !0, this.$nextTick(() => {
this.$refs.toolBox && (this.$refs.toolBox.onmousewheel = this.scaleImgWheel, this.$refs.toolBox.addEventListener("DOMMouseScroll", this.scaleImgWheel));
}));
},
methods: {
handleOpen(e) {
let t = (e) => {
if (this.$refs.toolBox && (this.$refs.toolBox.onmousewheel = this.scaleImgWheel, this.$refs.toolBox.addEventListener("DOMMouseScroll", this.scaleImgWheel)), this.isModal === !0) {
this.lockScroll === !0 && (document.body.style.overflowY = "hidden");
let e = this.$refs.dialogMainModalRef.offsetHeight + 200, t = window.innerHeight, n = this.$refs.mask;
e > t ? n.style.overflowY = "scroll" : n.style.overflowY = "hidden";
}
e && typeof e == "function" && e();
};
if (e && typeof e == "object" && e.src) if (e.name) {
let n = new Image();
this.crossOrigin === !0 && (n.crossOrigin = this.crossOriginHeader), n.name = e.name, n.style.position = "fixed", n.style.top = "-5000px", n.style.opacity = "0", n.onerror = (e) => {
throw this.$emit("onImageLoadError", e), this.$emit("error", {
type: 3,
index: this.index,
msg: "图片加载失败"
}), Error("图片加载失败");
}, n.onload = () => {
if (n.complete === !0) this.$emit("onImageLoadComplete", n), this.visible = !0, this.$nextTick(() => {
t(() => {
this.importImgToCanv(n);
});
});
else throw this.$emit("onImageLoadError", /* @__PURE__ */ Error("图片加载失败")), this.$emit("error", {
type: 3,
index: this.index,
msg: "图片加载失败"
}), Error("图片加载失败");
}, n.src = e.src, this.cutImageObj = n, document.body.appendChild(n), this.$emit("onChooseImg", e, this.index);
} else throw Error("传入参数必须包含：src,name");
else this.visible = !0, this.$nextTick(() => {
t();
});
},
handleClose() {
this.clearAll(), this.isModal === !0 && (this.lockScroll === !0 && (document.body.style.overflowY = "scroll"), this.$nextTick(() => {
this.visible = !1;
}));
},
chooseImg() {
this.$refs.inputFile.click();
},
importImgToCanv(e) {
let t = e.height, n = e.width, r = this.boxWidth, i = this.boxHeight, a, o = { ...this.drawImg };
this.fileName = e.name, o.img = e, this.scaleImg.rate = n / t, t < i && n < r ? (a = 1, o.x = (r - n) / 2, o.y = (i - t) / 2) : n / t <= r / i ? (a = i / t, o.x = (r - n * a) / 2) : (a = r / n, o.y = (i - t * a) / 2), o.swidth = n, o.sheight = t, o.width = n * a, o.height = t * a, o.x = (r - o.width) / 2, o.y = (i - o.height) / 2, this.drawImg = o, this.printImg(), this.putToolBox();
},
async putImgToCanv(e) {
let t = !1;
if (t = typeof this.afterChooseImg == "function" ? await this.afterChooseImg(e) : !0, !t) return;
let n = null;
if (e.target.files) n = e.target.files[0] || null;
else return console.error("IE9及以下需要自己传入image对象"), !1;
if (n) {
if (this.accept.indexOf(n.type) === -1) return this.$emit("error", {
type: 1,
index: this.index,
event: e,
msg: "文件类型错误"
}), !1;
this.fileName = n.name;
let t = new FileReader();
t.readAsDataURL(n), t.onerror = (t) => {
console.error(t), this.$emit("error", {
type: 2,
index: this.index,
event: e,
msg: t?.toString() || "文件读取错误"
});
}, t.onload = (e) => {
let r = e.target.result, i = document.createElement("img");
i.src = r;
let a = setInterval(() => {
if (t.readyState === 2) {
if (clearInterval(a), !this.sizeChange && this.smallToUpload && i.width <= this.cutWidth && i.height <= this.cutHeight) {
this.handleClose();
let e = this.changeFileName(n.name, this.fileType);
this.$emit("cutDown", {
filename: e,
file: n,
index: this.index
});
return;
}
let e = i.height, t = i.width, r = this.boxWidth, o = this.boxHeight, s, c = { ...this.drawImg };
c.img = i, this.scaleImg.rate = t / e, e < o && t < r ? (s = 1, c.x = (r - t) / 2, c.y = (o - e) / 2) : t / e <= r / o ? (s = o / e, c.x = (r - t * s) / 2) : (s = r / t, c.y = (o - e * s) / 2), c.swidth = t, c.sheight = e, c.width = t * s, c.height = e * s, c.x = (r - c.width) / 2, c.y = (o - c.height) / 2, this.drawImg = c, this.printImg(), this.putToolBox();
}
}, 200);
}, this.$emit("onChooseImg", n, this.index);
}
},
putToolBox() {
(this.toolBox.width === this.boxWidth / 2 || this.toolBox.height === this.boxHeight / 2 || this.saveCutPosition === !1) && (this.toolBox.width = this.cutWidth > this.boxWidth ? this.boxWidth : this.cutWidth, this.toolBox.height = this.cutHeight > this.boxHeight ? this.boxHeight : this.cutHeight), (this.toolBox.x === 0 && this.toolBox.y === 0 || this.saveCutPosition === !1) && (this.toolBox.x = this.boxWidth / 2 - this.toolBox.width / 2, this.toolBox.y = this.boxHeight / 2 - this.toolBox.height / 2), this.checkToolBoxOverflow().then(() => {
this.printImg();
}), this.drawControlBox(this.toolBox.width, this.toolBox.height, this.toolBox.x, this.toolBox.y);
},
checkToolBoxOverflow() {
return new Promise((e) => {
if (!this.toolBoxOverflow) {
if (this.drawImg.width < this.toolBox.width || this.drawImg.height < this.toolBox.height) {
let e = this.drawImg.width / this.drawImg.height;
this.drawImg.width < this.toolBox.width && (this.drawImg.width = this.toolBox.width, this.drawImg.height = this.drawImg.width / e), this.drawImg.height < this.toolBox.height && (this.drawImg.height = this.toolBox.height, this.drawImg.width = this.drawImg.height * e), this.drawImg.x = (this.boxWidth - this.drawImg.width) / 2, this.drawImg.y = (this.boxHeight - this.drawImg.height) / 2;
}
this.drawImg.x > this.toolBox.x && (this.drawImg.x = this.toolBox.x), this.drawImg.x + this.drawImg.width < this.toolBox.x + this.toolBox.width && (this.drawImg.x = this.toolBox.x + this.toolBox.width - this.drawImg.width), this.drawImg.y > this.toolBox.y && (this.drawImg.y = this.toolBox.y), this.drawImg.y + this.drawImg.height < this.toolBox.y + this.toolBox.height && (this.drawImg.y = this.toolBox.y + this.toolBox.height - this.drawImg.height);
}
e();
});
},
isSupportFileApi() {
return !!(window.File && window.FileList && window.FileReader && window.Blob && navigator.userAgent.indexOf("Edge") === -1 && navigator.userAgent.indexOf("MSIE") === -1 && navigator.userAgent.indexOf("Trident") === -1);
},
dataURLtoFile(e, t) {
let n = e.split(","), r = n[0].match(/:(.*?);/)[1], i = atob(n[1]), a = i.length, o = new Uint8Array(a);
for (; a--;) o[a] = i.charCodeAt(a);
return this.isSupportFileApi() ? new File([o], t, { type: r }) : "不支持File对象";
},
clearAll() {
let e = this, t = e.$refs.canvas, n = t.getContext("2d");
n && n.clearRect(0, 0, t.width, t.height);
let r = e.$refs.canvasSelectBox, i = r.getContext("2d");
i && i.clearRect(0, 0, r.width, r.height);
let a = e.drawImg.sx, o = e.drawImg.sy;
this.drawImg = {
img: null,
sx: a,
sy: o,
swidth: 0,
sheight: 0,
x: 0,
y: 0,
width: 0,
height: 0
}, this.isFlipHorizontal = !1, this.isFlipVertically = !1, this.$refs.inputFile.value = "", this.rotateImg.angle = 0, this.drawImg.img = null, this.turnReset(), this.clearCutImageObj(), this.$emit("onClearAll", this.index);
},
clearCutImageObj() {
this.cutImageObj !== null && this.cutImageObj !== void 0 && (typeof this.cutImageObj.remove == "function" ? this.cutImageObj.remove() : this.cutImageObj.removeNode && this.cutImageObj.removeNode()), this.cutImageObj = null;
},
drawControlBox(e, t, n, r) {
this.toolBoxOverflow || (e < 1 && (e = 1), t < 1 && (t = 1), e > this.drawImg.width && (e = this.drawImg.width), t > this.drawImg.height && (t = this.drawImg.height), n < this.drawImg.x && (n = this.drawImg.x), r < this.drawImg.y && (r = this.drawImg.y), n > this.drawImg.x + this.drawImg.width - e && (n = this.drawImg.x + this.drawImg.width - e), r > this.drawImg.y + this.drawImg.height - t && (r = this.drawImg.y + this.drawImg.height - t)), e > this.boxWidth && (e = this.boxWidth), t > this.boxHeight && (t = this.boxHeight), n < 0 && (n = 0), r < 0 && (r = 0);
let i = this.$refs.toolBoxControl, a = this.$refs.canvasSelectBox, o = a.getContext("2d");
if (!o) return;
o.fillStyle = this.selectBoxColor, o.clearRect(0, 0, a.width, a.height), o.fillRect(0, 0, a.width, a.height);
let s, c;
if (this.rate && this.rate !== "") {
let n = Number(this.rate.split(":")[0]) / Number(this.rate.split(":")[1]);
n >= 1 ? (s = e, c = e / n, c + r > this.drawImg.y + this.drawImg.height && (c = this.drawImg.y + this.drawImg.height - r, s = c * n)) : (s = t * n, c = t);
} else s = e, c = t;
this.toolBox.width = Math.abs(s), this.toolBox.height = Math.abs(c), i.style.width = Math.abs(s) + "px", i.style.height = Math.abs(c) + "px", this.toolBox.boxMove.moveTo.x = n, this.toolBox.boxMove.moveTo.y = r, s < 0 && (n += s), c < 0 && (r += c), n + this.toolBox.width > this.boxWidth && (n = this.boxWidth - this.toolBox.width), n < 0 && (n = 0), r + this.toolBox.height > this.boxHeight && (r = this.boxHeight - this.toolBox.height), r < 0 && (r = 0), this.toolBoxPosition.x = n, this.toolBoxPosition.y = r, i.style.left = n + "px", i.style.top = r + "px", o.clearRect(n, r, Math.abs(s), Math.abs(c)), this.onPrintImgTimmer && clearTimeout(this.onPrintImgTimmer), this.onPrintImgTimmer = setTimeout(() => {
this.cropPicture(!0);
}, 100);
},
resetToolBox() {
this.toolBox.width < 0 && (this.toolBox.boxMove.moveTo.x = this.toolBox.x - this.toolBox.width), this.toolBox.height < 0 && (this.toolBox.boxMove.moveTo.y = this.toolBox.y - this.toolBox.height), this.toolBox.width = Math.abs(this.toolBox.width), this.toolBox.height = Math.abs(this.toolBox.height);
},
toolBoxMouseDown(e) {
let t = this.$refs.toolBoxControl;
this.toolBox.x = parseInt(t.style.left.split("px")[0]), this.toolBox.y = parseInt(t.style.top.split("px")[0]), this.toolBox.disable = !1, this.dropImg.active = !1, this.toolBox.boxMove.start = {
x: e.pageX,
y: e.pageY
};
},
toolBoxMouseMove(e) {
if (this.dropImg.active && this.dropImgMove(e), this.toolBox.disable === !1 && this.moveAble === !0) {
let t = e.pageX - this.toolBox.boxMove.start.x, n = e.pageY - this.toolBox.boxMove.start.y, r = this.toolBox.x + t, i = this.toolBox.y + n;
this.drawControlBox(this.toolBox.width, this.toolBox.height, r, i);
}
},
toolBoxMouseLeave() {
this.toolBox.disable = !0, this.onPrintImgTimmer && clearTimeout(this.onPrintImgTimmer), this.onPrintImgTimmer = setTimeout(() => {
this.cropPicture(!0);
}, 100), this.resetToolBox();
},
toolBoxMouseUp() {
this.toolBox.x = parseInt(String(this.toolBoxPosition.x)), this.toolBox.y = parseInt(String(this.toolBoxPosition.y)), this.toolBox.disable = !0, this.dropImg.active = !1, this.resetToolBox();
},
printImg() {
if (this.drawImg.img) {
let e = this.$refs.canvas, t = e.getContext("2d");
if (!t) return;
t.font = "18px bold 黑体", t.fillStyle = "#ff0", t.textAlign = "center", t.textBaseline = "middle", t.save(), t.clearRect(0, 0, e.width, e.height), t.translate(this.drawImg.x + this.drawImg.width / 2, this.drawImg.y + this.drawImg.height / 2), t.rotate(this.rotateImg.angle * Math.PI / 180), t.translate(-(this.drawImg.x + this.drawImg.width / 2), -(this.drawImg.y + this.drawImg.height / 2)), t.translate(this.drawImg.x, this.drawImg.y), t.scale(this.isFlipHorizontal ? -1 : 1, this.isFlipVertically ? -1 : 1);
try {
t.drawImage(this.drawImg.img, this.drawImg.sx, this.drawImg.sy, this.drawImg.swidth, this.drawImg.sheight, this.isFlipHorizontal ? -this.drawImg.width : 0, this.isFlipVertically ? -this.drawImg.height : 0, this.drawImg.width, this.drawImg.height);
} catch (e) {
console.error(e), this.onPrintImgTimmer && clearTimeout(this.onPrintImgTimmer), this.$emit("error", {
type: 3,
index: this.index,
msg: e.toString() || "图片加载失败"
});
return;
}
t.translate(-this.drawImg.x, this.drawImg.y), t.restore(), this.onPrintImgTimmer && clearTimeout(this.onPrintImgTimmer), this.onPrintImgTimmer = setTimeout(() => {
this.cropPicture(!0);
}, 100);
}
},
dropImgOn(e) {
this.imgMove === !0 && (this.dropImg.active = !0, this.dropImg.params = { ...this.drawImg }, this.dropImg.pageX = e.pageX, this.dropImg.pageY = e.pageY);
},
dropImgOff() {
this.dropImg.active = !1, this.onPrintImgTimmer && clearTimeout(this.onPrintImgTimmer), this.onPrintImgTimmer = setTimeout(() => {
this.cropPicture(!0);
}, 100);
},
dropImgMove(e) {
if (this.dropImg.active && this.drawImg.img) {
let t = { ...this.drawImg };
t.x = (this.dropImg.params.x || 0) - (this.dropImg.pageX - e.pageX), t.y = (this.dropImg.params.y || 0) - (this.dropImg.pageY - e.pageY), this.toolBoxOverflow || (t.x > this.toolBox.x && (t.x = this.toolBox.x), t.x < this.toolBox.x + this.toolBox.width - t.width && (t.x = this.toolBox.x + this.toolBox.width - t.width), t.y > this.toolBox.y && (t.y = this.toolBox.y), t.y < this.toolBox.y + this.toolBox.height - t.height && (t.y = this.toolBox.y + this.toolBox.height - t.height)), this.drawImg = t, this.printImg(), e.stopPropagation();
}
},
scaleReset() {
this.drawImg.width = this.drawImg.swidth, this.drawImg.height = this.drawImg.sheight, this.printImg();
},
scaleImgWheel(e) {
if (this.drawImg.img && this.scaleAble === !0) {
let t, n = e || window.event;
t = n.wheelDelta ? -(n.wheelDelta / 40) : n.detail ? n.detail : 0, this.drawImg.x = this.drawImg.width - t * 9 > 50 ? this.drawImg.x + t * 3 : this.drawImg.x, this.drawImg.y = this.drawImg.width - t * 9 > 50 ? this.drawImg.y + t * 3 : this.drawImg.y, this.drawImg.width = this.drawImg.width - t * 9 > 50 ? this.drawImg.width - t * 9 : 50, this.drawImg.height = this.drawImg.width / this.scaleImg.rate, this.checkToolBoxOverflow().then(() => {
this.printImg(), this.onPrintImgTimmer && clearTimeout(this.onPrintImgTimmer), this.onPrintImgTimmer = setTimeout(() => {
this.cropPicture(!0);
}, 100);
});
}
return e.preventDefault(), e.returnValue = !1, !1;
},
flipHorizontal() {
this.drawImg.img && (this.isFlipHorizontal == 0 ? this.isFlipHorizontal = !0 : this.isFlipHorizontal = !1, this.printImg());
},
flipVertically() {
this.drawImg.img && (this.isFlipVertically == 0 ? this.isFlipVertically = !0 : this.isFlipVertically = !1, this.printImg());
},
turnImg(e) {
let t = this.rotateImg.angle + e;
t >= -180 && t <= 180 && (this.rotateImg.angle = t, this.rotateControl.position = t / 180 * 100 + 100, this.printImg());
},
turnReset() {
this.rotateImg.angle = 0, this.rotateControl.position = 100, this.printImg();
},
controlBtnMouseDown(e, t) {
this.controlBox.disable = !1, this.controlBox.btnName = t, this.controlBox.start.x = e.clientX, this.controlBox.start.y = e.clientY, this.controlBox.start.width = this.toolBox.width, this.controlBox.start.height = this.toolBox.height, e.stopPropagation();
},
controlBtnMouseUp(e) {
this.controlBox.disable = !0, this.dropImgOff(), this.resetToolBox(), this.toolBoxMouseUp(), this.scrollBarControlOff(), e.stopPropagation();
},
controlBtnMouseMove(e) {
if (this.controlBox.disable === !1) {
let t = e.clientX - this.controlBox.start.x, n = e.clientY - this.controlBox.start.y, r, i;
if (this.controlBox.btnName == "leftUp") {
if (!this.rate) r = this.toolBox.x + t, i = this.toolBox.y + n;
else {
let e = Number(this.rate.split(":")[0]) / Number(this.rate.split(":")[1]);
e >= 1 ? (r = this.toolBox.x + t, i = this.toolBox.y + t / e) : (r = this.toolBox.x + n * e, i = this.toolBox.y + n);
}
this.toolBox.width = this.controlBox.start.width - t, this.toolBox.height = this.controlBox.start.height - n;
}
if (this.controlBox.btnName == "rightUp") {
if (!this.rate) r = this.toolBox.x, i = this.toolBox.y + n;
else {
let e = Number(this.rate.split(":")[0]) / Number(this.rate.split(":")[1]);
e >= 1 ? (r = this.toolBox.x, i = this.toolBox.y - t / e) : (r = this.toolBox.x, i = this.toolBox.y + n);
}
this.toolBox.width = this.controlBox.start.width + t, this.toolBox.height = this.controlBox.start.height - n;
}
if (this.controlBox.btnName == "rightDown" && (r = this.toolBox.x, i = this.toolBox.y, this.toolBox.width = this.controlBox.start.width + t, this.toolBox.height = this.controlBox.start.height + n), this.controlBox.btnName == "leftDown") {
if (!this.rate) r = this.toolBox.x + t, i = this.toolBox.y;
else {
let e = Number(this.rate.split(":")[0]) / Number(this.rate.split(":")[1]);
e >= 1 ? (r = this.toolBox.x + t, i = this.toolBox.y) : (r = this.toolBox.x + -n * e, i = this.toolBox.y);
}
this.toolBox.width = this.controlBox.start.width - t, this.toolBox.height = this.controlBox.start.height + n;
}
this.controlBox.btnName == "topCenter" && (r = this.toolBox.x, i = this.toolBox.y + n, this.toolBox.width = this.controlBox.start.width, this.toolBox.height = this.controlBox.start.height - n), this.controlBox.btnName == "downCenter" && (r = this.toolBox.x, i = this.toolBox.y, this.toolBox.width = this.controlBox.start.width, this.toolBox.height = this.controlBox.start.height + n), this.controlBox.btnName == "leftCenter" && (r = this.toolBox.x + t, i = this.toolBox.y, this.toolBox.width = this.controlBox.start.width - t, this.toolBox.height = this.controlBox.start.height), this.controlBox.btnName == "rightCenter" && (r = this.toolBox.x, i = this.toolBox.y, this.toolBox.width = this.controlBox.start.width + t, this.toolBox.height = this.controlBox.start.height), r !== void 0 && i !== void 0 && this.drawControlBox(this.toolBox.width, this.toolBox.height, r, i);
}
this.rotateControl.active && this.scrollBarControlMove(e), e.stopPropagation();
},
changeFileName(e, t) {
let n = e.lastIndexOf(".");
return e.substr(0, n + 1) + (t === "jpeg" ? "jpg" : t);
},
cropPicture(e) {
let t = this;
if (this.drawImg.img) {
let n = this.$refs.canvas;
if (this.WatermarkText && !e) {
let e = n.getContext("2d");
e && (e.font = this.WatermarkTextFont, e.fillStyle = this.WatermarkTextColor, e.textAlign = "right", e.textBaseline = "bottom", e.fillText(this.WatermarkText, this.toolBox.x + this.toolBox.width * this.WatermarkTextX, this.toolBox.y + this.toolBox.height * this.WatermarkTextY));
}
let r = new Image();
this.crossOrigin === !0 && (r.crossOrigin = this.crossOriginHeader), r.src = n.toDataURL(`image/${this.fileType}`, t.quality), HTMLCanvasElement.prototype.toBlob || Object.defineProperty(HTMLCanvasElement.prototype, "toBlob", { value: (e, r, i) => {
window.atob ? setTimeout(() => {
let a = atob(n.toDataURL(r, i).split(",")[1]), o = a.length, s = new Uint8Array(o), c;
for (let e = 0; e < o; e++) s[e] = a.charCodeAt(e);
try {
c = new Blob([s], { type: `image/${t.fileType}` });
} catch (e) {
if (window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder || window.MSBlobBuilder, e.name == "TypeError" && window.BlobBuilder) {
let e = window.BlobBuilder, n = new e();
n.append(s.buffer), c = n.getBlob(`image/${t.fileType}`);
}
e.name == "InvalidStateError" && (c = new Blob([s.buffer], { type: `image/${t.fileType}` }));
}
e(c);
}, 200) : e(null);
} }), n.toBlob((n) => {
if (n) {
let i = new FileReader();
i.readAsDataURL(n), i.onload = () => {
let n = setInterval(() => {
if (i.readyState == 2) {
clearInterval(n);
let i = document.createElement("canvas"), a = i.getContext("2d");
if (t.originalGraph == 1 && t.drawImg.img) {
let e = t.drawImg.width / t.drawImg.swidth, n = t.toolBox.width / e, r = t.toolBox.height / e;
i.width = n, i.height = r;
let o = (t.toolBox.x - t.drawImg.x) / e, s = (t.toolBox.y - t.drawImg.y) / e, c = t.drawImg.swidth, l = t.drawImg.sheight;
a && (a.translate(-o, -s), a.drawImage(t.drawImg.img, 0, 0, c, l));
} else {
i.width = t.toolBox.width, i.height = t.toolBox.height;
let e = t.toolBox;
if (t.rate && a) {
let n = Number(t.rate.split(":")[0]) / Number(t.rate.split(":")[1]);
Number(t.rate.split(":")[0]) >= Number(t.rate.split(":")[1]) ? a.drawImage(r, e.x, e.y, e.width, e.width * n, 0, 0, e.width, e.width * n) : a.drawImage(r, e.x, e.y, e.width, e.width / n, 0, 0, e.width, e.width / n);
} else a && a.drawImage(r, e.x, e.y, e.width, e.height, 0, 0, e.width, e.height);
}
i.toBlob((n) => {
let r = t.changeFileName(t.fileName, t.fileType);
e ? t.previewMode && t.$emit("onPrintImg", {
index: t.index,
fileName: r,
blob: n,
file: t.dataURLtoFile(i.toDataURL(`image/${t.fileType}`, t.quality), r),
dataURL: i.toDataURL(`image/${t.fileType}`, t.quality)
}) : (t.handleClose(), t.$emit("cutDown", {
index: t.index,
fileName: r,
blob: n,
file: t.dataURLtoFile(i.toDataURL(`image/${t.fileType}`, t.quality), r),
dataURL: i.toDataURL(`image/${t.fileType}`, t.quality)
}));
}, `image/${t.fileType}`, t.quality);
}
}, 200);
};
} else {
let n = document.createElement("canvas");
n.width = t.toolBox.width, n.height = t.toolBox.height;
let i = n.getContext("2d"), a = t.toolBox;
if (t.rate && i) {
let e = Number(t.rate.split(":")[0]) / Number(t.rate.split(":")[1]);
i.drawImage(r, a.x, a.y, a.width, a.width * e, 0, 0, a.width, a.width * e);
} else i && i.drawImage(r, a.x, a.y, a.width, a.height, 0, 0, a.width, a.height);
let o = t.changeFileName(t.fileName, t.fileType);
e ? t.$emit("onPrintImg", {
fileName: o,
dataURL: n.toDataURL(`image/${t.fileType}`, t.quality)
}) : (t.handleClose(), t.$emit("cutDown", {
fileName: o,
dataURL: n.toDataURL(`image/${t.fileType}`, t.quality)
}));
}
}, `image/${t.fileType}`, t.quality);
} else e || (console.warn("No picture selected"), t.$emit("error", {
type: 4,
err: 1,
msg: "No picture selected"
}));
},
scrollBarControlMove(e) {
if (this.rotateControl.active) {
let t = e.pageX - this.rotateControl.start.x, n = this.rotateControl.start.position + t;
n <= 0 && (n = 0), n >= 200 && (n = 200), this.rotateControl.position = n, this.rotateImg.angle = (n - 100) / 100 * 180, this.printImg();
}
},
scrollBarControlOn(e) {
this.rotateControl.active = !0, this.rotateControl.start.x = e.pageX, this.rotateControl.start.y = e.pageY, this.rotateControl.start.position = this.rotateControl.position;
},
scrollBarControlOff() {
this.rotateControl.active = !1;
}
}
}), _ = (e, t) => {
let n = e.__vccOpts || e;
for (let [e, r] of t) n[e] = r;
return n;
}, v = { class: "toolMain" }, y = {
key: 0,
class: "tool-title"
}, b = { class: "tips" }, x = {
key: 0,
class: "dockBtn"
}, S = {
key: 4,
class: "dockBtnScrollBar"
}, C = { class: "toolBoxControlBox" }, w = { class: "controlBox" }, T = { class: "selectArea" }, E = { class: "copyright" }, D = {
key: 0,
target: "_blank",
href: "https://github.com/acccccccb/vue-img-cutter",
rel: "nofollow"
}, O = ["width", "height"], k = ["width", "height"], A = {
class: "i-dialog-footer",
style: { height: "40px" }
}, j = ["accept"], M = {
key: 0,
class: "btn btn-primary btn-primary-plain"
}, N = { class: "btn-group fr" }, P = ["disabled"];
function F(o, h, g, _, F, I) {
return l(), n("div", null, [
o.showChooseBtn === !0 && o.isModal === !0 ? (l(), n("div", {
key: 0,
onClick: h[0] ||= (...e) => o.handleOpen && o.handleOpen(...e)
}, [u(o.$slots, "openImgCutter", {}, void 0, !0), u(o.$slots, "open", {}, void 0, !0)])) : t("", !0),
!o.$slots.openImgCutter && !o.$slots.open && o.isModal === !0 ? (l(), n("button", {
key: 1,
type: "button",
class: "btn btn-primary",
onClick: h[1] ||= (...e) => o.handleOpen && o.handleOpen(...e)
}, d(o.label), 1)) : t("", !0),
a(e, { name: "fade" }, {
default: p(() => [o.visible ? (l(), n("div", {
key: 0,
ref: "mask",
class: s(o.isModal === !0 ? "mask vue-img-cutter" : "")
}, [o.visible ? (l(), n("div", {
key: 0,
class: s(o.isModal === !0 ? "dialogBoxModal" : "dialogBox")
}, [a(e, {
name: "fade",
"enter-class": "fade-in-enter",
"enter-active-class": "fade-in-active",
"leave-class": "fade-out-enter",
"leave-active-class": "fade-out-active"
}, {
default: p(() => [r("div", {
ref: "dialogMainModalRef",
class: s(o.isModal === !0 ? "dialogMainModal" : "dialogMain"),
style: c("width:" + (o.isModal === !0 ? o.boxWidth + 32 : o.boxWidth) + "px")
}, [r("div", v, [o.isModal === !0 ? (l(), n("div", y, [i(d(o.modalTitle) + " ", 1), r("span", {
class: "closeIcon",
onClick: h[2] ||= (...e) => o.handleClose && o.handleClose(...e)
}, "×")])) : t("", !0), r("div", {
ref: "toolBox",
style: c("height:" + o.boxHeight + "px;width:" + o.boxWidth + "px"),
class: "toolBox",
onMousemove: h[29] ||= (...e) => o.controlBtnMouseMove && o.controlBtnMouseMove(...e),
onMouseup: h[30] ||= (...e) => o.controlBtnMouseUp && o.controlBtnMouseUp(...e),
onMouseleave: h[31] ||= (...e) => o.controlBtnMouseUp && o.controlBtnMouseUp(...e)
}, [
m(r("div", b, [r("div", {
class: "btn btn-warning btn-xs",
onClick: h[3] ||= (...e) => o.chooseImg && o.chooseImg(...e)
}, d(o.label), 1)], 512), [[f, !o.drawImg.img && o.showChooseBtn === !0]]),
o.tool == 1 ? m((l(), n("div", {
key: 0,
class: "dockMain",
style: c("background:" + o.toolBgc),
onMouseenter: h[13] ||= (...e) => o.dropImgOff && o.dropImgOff(...e)
}, [
o.rate ? (l(), n("div", x, [u(o.$slots, "ratio", {}, () => [h[36] ||= i(" Ratio: ", -1)], !0), i(" " + d(o.rate), 1)])) : t("", !0),
r("div", {
class: "dockBtn",
onClick: h[4] ||= (...e) => o.scaleReset && o.scaleReset(...e)
}, [u(o.$slots, "scaleReset", {}, () => [h[37] ||= i(" Scale: ", -1)], !0), i(" " + d(o.drawImg.swidth > 0 ? (o.drawImg.width / o.drawImg.swidth).toFixed(2) : "-"), 1)]),
o.originalGraph === !1 ? (l(), n("div", {
key: 1,
class: "dockBtn",
onClick: h[5] ||= (e) => o.turnImg(-90)
}, [u(o.$slots, "turnLeft", {}, () => [h[38] ||= i(" ↳ ", -1)], !0)])) : t("", !0),
o.originalGraph === !1 ? (l(), n("div", {
key: 2,
class: "dockBtn",
onClick: h[6] ||= (e) => o.turnImg(90)
}, [u(o.$slots, "turnRight", {}, () => [h[39] ||= i(" ↲ ", -1)], !0)])) : t("", !0),
o.originalGraph === !1 ? (l(), n("div", {
key: 3,
class: "dockBtn",
onClick: h[7] ||= (e) => o.turnReset()
}, [u(o.$slots, "reset", {}, () => [h[40] ||= i(" ↻ ", -1)], !0)])) : t("", !0),
o.originalGraph === !1 ? (l(), n("div", S, [r("div", {
ref: "dockBtnScrollControl",
style: c("left:" + o.rotateControl.position + "px"),
class: "scrollBarControl",
onMousemove: h[8] ||= (...e) => o.scrollBarControlMove && o.scrollBarControlMove(...e),
onMousedown: h[9] ||= (...e) => o.scrollBarControlOn && o.scrollBarControlOn(...e),
onMouseup: h[10] ||= (...e) => o.scrollBarControlOff && o.scrollBarControlOff(...e)
}, null, 36), o.rotateControl.active == 1 ? (l(), n("div", {
key: 0,
class: "scrollBarText",
style: c("left:" + o.rotateControl.position + "px")
}, d(o.rotateImg.angle.toFixed(0) + "°"), 5)) : t("", !0)])) : t("", !0),
o.originalGraph === !1 ? (l(), n("div", {
key: 5,
class: "dockBtn",
onClick: h[11] ||= (...e) => o.flipHorizontal && o.flipHorizontal(...e)
}, [u(o.$slots, "flipHorizontal", {}, () => [h[41] ||= i(" ⇆ ", -1)], !0)])) : t("", !0),
o.originalGraph === !1 ? (l(), n("div", {
key: 6,
class: "dockBtn",
onClick: h[12] ||= (...e) => o.flipVertically && o.flipVertically(...e)
}, [u(o.$slots, "flipVertically", {}, () => [h[42] ||= i(" ⇅ ", -1)], !0)])) : t("", !0)
], 36)), [[f, o.drawImg.img && o.dropImg.active !== !0 && o.controlBox.disable == 1 && o.toolBox.disable == 1]]) : t("", !0),
m(r("div", {
ref: "toolBoxControl",
class: "toolBoxControl",
style: c({ pointerEvents: o.moveAble ? "auto" : "none" }),
onMousedown: h[22] ||= (...e) => o.toolBoxMouseDown && o.toolBoxMouseDown(...e),
onMouseup: h[23] ||= (...e) => o.toolBoxMouseUp && o.toolBoxMouseUp(...e),
onMousemove: h[24] ||= (...e) => o.toolBoxMouseMove && o.toolBoxMouseMove(...e),
onMouseleave: h[25] ||= (...e) => o.toolBoxMouseLeave && o.toolBoxMouseLeave(...e)
}, [r("div", C, [
r("div", w, [
h[43] ||= r("div", { class: "controlBoxInnerLine controlBoxInnerLineTop" }, null, -1),
h[44] ||= r("div", { class: "controlBoxInnerLine controlBoxInnerLineBottom" }, null, -1),
h[45] ||= r("div", { class: "controlBoxInnerLine controlBoxInnerLineLeft" }, null, -1),
h[46] ||= r("div", { class: "controlBoxInnerLine controlBoxInnerLineRight" }, null, -1),
r("div", T, " 宽:" + d(o.showToolBoxWidth) + " 高:" + d(o.showToolBoxHeight) + " (x:" + d(o.showToolBoxX) + ",y:" + d(o.showToolBoxY) + ") ", 1),
o.sizeChange === !0 ? (l(), n("div", {
key: 0,
"data-name": "leftUp",
class: "leftUp controlBtn",
onMousedown: h[14] ||= (e) => o.controlBtnMouseDown(e, "leftUp")
}, null, 32)) : t("", !0),
o.sizeChange === !0 ? (l(), n("div", {
key: 1,
"data-name": "leftDown",
class: "leftDown controlBtn",
onMousedown: h[15] ||= (e) => o.controlBtnMouseDown(e, "leftDown")
}, null, 32)) : t("", !0),
o.sizeChange === !0 ? (l(), n("div", {
key: 2,
"data-name": "rightUp",
class: "rightUp controlBtn",
onMousedown: h[16] ||= (e) => o.controlBtnMouseDown(e, "rightUp")
}, null, 32)) : t("", !0),
o.sizeChange === !0 ? (l(), n("div", {
key: 3,
"data-name": "rightDown",
class: "rightDown controlBtn",
onMousedown: h[17] ||= (e) => o.controlBtnMouseDown(e, "rightDown")
}, null, 32)) : t("", !0),
o.sizeChange === !0 && !o.rate && o.toolBox.width > 20 ? (l(), n("div", {
key: 4,
"data-name": "topCenter",
class: "topCenter controlBtn",
onMousedown: h[18] ||= (e) => o.controlBtnMouseDown(e, "topCenter")
}, null, 32)) : t("", !0),
o.sizeChange === !0 && !o.rate && o.toolBox.width > 20 ? (l(), n("div", {
key: 5,
"data-name": "downCenter",
class: "downCenter controlBtn",
onMousedown: h[19] ||= (e) => o.controlBtnMouseDown(e, "downCenter")
}, null, 32)) : t("", !0),
o.sizeChange === !0 && !o.rate && o.toolBox.height > 20 ? (l(), n("div", {
key: 6,
"data-name": "leftCenter",
class: "leftCenter controlBtn",
onMousedown: h[20] ||= (e) => o.controlBtnMouseDown(e, "leftCenter")
}, null, 32)) : t("", !0),
o.sizeChange === !0 && !o.rate && o.toolBox.height > 20 ? (l(), n("div", {
key: 7,
"data-name": "rightCenter",
class: "rightCenter controlBtn",
onMousedown: h[21] ||= (e) => o.controlBtnMouseDown(e, "rightCenter")
}, null, 32)) : t("", !0)
]),
h[47] ||= r("div", { class: "toolBoxControlLine toolBoxControlLineItem-1" }, null, -1),
h[48] ||= r("div", { class: "toolBoxControlLine toolBoxControlLineItem-2" }, null, -1),
h[49] ||= r("div", { class: "toolBoxControlLine toolBoxControlLineItem-3" }, null, -1),
h[50] ||= r("div", { class: "toolBoxControlLine toolBoxControlLineItem-4" }, null, -1)
])], 36), [[f, o.drawImg.img != null]]),
r("div", E, [o.DoNotDisplayCopyright ? t("", !0) : (l(), n("a", D, " vue-img-cutter " + d(o.version), 1))]),
r("canvas", {
ref: "canvasSelectBox",
class: "canvasSelectBox",
width: o.boxWidth,
height: o.boxHeight,
onMousedown: h[26] ||= (...e) => o.dropImgOn && o.dropImgOn(...e),
onMouseup: h[27] ||= (...e) => o.dropImgOff && o.dropImgOff(...e),
onMousemove: h[28] ||= (...e) => o.dropImgMove && o.dropImgMove(...e)
}, null, 40, O),
r("canvas", {
ref: "canvas",
class: "canvas",
width: o.boxWidth,
height: o.boxHeight
}, null, 8, k)
], 36)]), r("div", A, [
r("input", {
ref: "inputFile",
type: "file",
accept: o.accept,
style: {
width: "1px",
height: "1px",
border: "none",
opacity: "0"
},
onChange: h[32] ||= (...e) => o.putImgToCanv && o.putImgToCanv(...e)
}, null, 40, j),
r("span", { onClick: h[33] ||= (...e) => o.chooseImg && o.chooseImg(...e) }, [u(o.$slots, "choose", {}, () => [o.showChooseBtn === !0 ? (l(), n("div", M, d(o.label), 1)) : t("", !0)], !0)]),
r("div", N, [r("span", { onClick: h[34] ||= (...e) => o.handleClose && o.handleClose(...e) }, [u(o.$slots, "cancel", {}, () => [h[51] ||= r("button", {
type: "button",
class: "btn btn-default"
}, "取消", -1)], !0)]), r("span", { onClick: h[35] ||= (e) => o.cropPicture(!1) }, [u(o.$slots, "confirm", {}, () => [r("button", {
type: "button",
class: "btn btn-primary",
style: { "margin-left": "15px" },
disabled: !o.drawImg.img
}, " 确定 ", 8, P)], !0)])])
])], 6)]),
_: 3
}), h[52] ||= r("div", { style: { clear: "both" } }, null, -1)], 2)) : t("", !0)], 2)) : t("", !0)]),
_: 3
})
]);
}
//#endregion
//#region src/index.ts
var I = /* @__PURE__ */ _(g, [["render", F], ["__scopeId", "data-v-5423aacc"]]);
//#endregion
export { I as default };