up
This commit is contained in:
@@ -1,3 +1,126 @@
|
||||
<script setup>
|
||||
import "cropperjs";
|
||||
import { computed, ref } from "vue";
|
||||
|
||||
const fileObj = ref({});
|
||||
|
||||
const croppercanvas = ref();
|
||||
const cropperimage = ref();
|
||||
const cropperselection = ref();
|
||||
|
||||
/**
|
||||
* 选区逻辑
|
||||
*/
|
||||
// 是否正在开始选区
|
||||
const isCropperSelection = ref(false);
|
||||
const isCropperMove = ref(true);
|
||||
|
||||
// 判断当前是移动还是选区
|
||||
const currentType = computed(() => (isCropperMove.value ? "move" : "select"));
|
||||
|
||||
/**
|
||||
* 按钮方法
|
||||
*/
|
||||
// 旋转
|
||||
function handleRotate() {
|
||||
cropperimage.value.$rotate("90deg");
|
||||
cropperimage.value.$center("contain");
|
||||
}
|
||||
// 裁剪
|
||||
function handleCropper() {
|
||||
isCropperMove.value = false;
|
||||
if (isCropperMove.value) {
|
||||
cropperselection.value.$clear();
|
||||
} else {
|
||||
const cropperCanvas = croppercanvas.value;
|
||||
const cropperCanvasRect = cropperCanvas.getBoundingClientRect();
|
||||
|
||||
const cropperImage = cropperimage.value;
|
||||
const cropperImageRect = cropperImage.getBoundingClientRect();
|
||||
const maxSelection = {
|
||||
x: cropperImageRect.left - cropperCanvasRect.left,
|
||||
y: cropperImageRect.top - cropperCanvasRect.top,
|
||||
width: cropperImageRect.width,
|
||||
height: cropperImageRect.height,
|
||||
};
|
||||
cropperselection.value.$change(
|
||||
maxSelection.x,
|
||||
maxSelection.y,
|
||||
maxSelection.width,
|
||||
maxSelection.height
|
||||
);
|
||||
}
|
||||
}
|
||||
// 移动
|
||||
function handleMove() {
|
||||
if (!isCropperMove.value) {
|
||||
isCropperMove.value = true;
|
||||
// 如果想要点击移动，清除选区，可以打开下面的代码注释
|
||||
// cropperselection.value.$clear();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 监听选择区变化
|
||||
* @param event
|
||||
*/
|
||||
function onCropperSelectionChange(event) {
|
||||
if (event.detail.width && event.detail.height) {
|
||||
isCropperSelection.value = true;
|
||||
} else {
|
||||
isCropperSelection.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 确认裁剪
|
||||
*/
|
||||
const emit = defineEmits(["success"]);
|
||||
async function handleConfirm() {
|
||||
if (isCropperSelection.value) {
|
||||
const res = await cropperselection.value.$toCanvas();
|
||||
|
||||
const dataImage = res.toDataURL("image/png");
|
||||
const file = dataURLtoFile(dataImage, fileObj.value.name);
|
||||
emit("success", {
|
||||
...fileObj.value,
|
||||
file: file,
|
||||
fileShow: dataImage,
|
||||
});
|
||||
}
|
||||
}
|
||||
// 将data:image转成新的file
|
||||
function dataURLtoFile(dataurl, filename) {
|
||||
var arr = dataurl.split(","),
|
||||
mime = arr[0].match(/:(.*?);/)[1],
|
||||
bstr = atob(arr[1]),
|
||||
n = bstr.length,
|
||||
u8arr = new Uint8Array(n);
|
||||
while (n--) {
|
||||
u8arr[n] = bstr.charCodeAt(n);
|
||||
}
|
||||
const blob = new Blob([u8arr], { type: mime });
|
||||
const file = new File([blob], filename, { type: mime });
|
||||
return file;
|
||||
}
|
||||
|
||||
/**
|
||||
* 文件上传
|
||||
*/
|
||||
const input_form = ref();
|
||||
function handleUploadSuccess() {
|
||||
const files = input_form.value.files;
|
||||
|
||||
if (files.length) {
|
||||
fileObj.value = {
|
||||
name: files[0].name,
|
||||
file: files[0],
|
||||
fileShow: URL.createObjectURL(files[0]),
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="basic_container">
|
||||
<div class="tool_wrap">
|
||||
@@ -6,7 +129,7 @@
|
||||
</button>
|
||||
<button @click="handleRotate">旋转</button>
|
||||
<button :class="{ active: isCropperSelection }" @click="handleCropper">
|
||||
{{ isCropperSelection ? '重置选区' : '裁剪' }}
|
||||
{{ isCropperSelection ? "重置选区" : "裁剪" }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="dialog_wrap">
|
||||
@@ -21,6 +144,8 @@
|
||||
skewable
|
||||
translatable
|
||||
></cropper-image>
|
||||
|
||||
|
||||
<cropper-shade hidden ref="cropperShade"></cropper-shade>
|
||||
<cropper-handle :action="currentType" plain></cropper-handle>
|
||||
<cropper-selection
|
||||
@@ -65,129 +190,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import 'cropperjs';
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
const fileObj = ref({});
|
||||
|
||||
const croppercanvas = ref();
|
||||
const cropperimage = ref();
|
||||
const cropperselection = ref();
|
||||
|
||||
/**
|
||||
* 选区逻辑
|
||||
*/
|
||||
// 是否正在开始选区
|
||||
const isCropperSelection = ref(false);
|
||||
const isCropperMove = ref(true);
|
||||
|
||||
// 判断当前是移动还是选区
|
||||
const currentType = computed(() => (isCropperMove.value ? 'move' : 'select'));
|
||||
|
||||
/**
|
||||
* 按钮方法
|
||||
*/
|
||||
// 旋转
|
||||
function handleRotate() {
|
||||
cropperimage.value.$rotate('90deg');
|
||||
cropperimage.value.$center('contain');
|
||||
}
|
||||
// 裁剪
|
||||
function handleCropper() {
|
||||
isCropperMove.value = false;
|
||||
if (isCropperMove.value) {
|
||||
cropperselection.value.$clear();
|
||||
} else {
|
||||
const cropperCanvas = croppercanvas.value;
|
||||
const cropperCanvasRect = cropperCanvas.getBoundingClientRect();
|
||||
|
||||
const cropperImage = cropperimage.value;
|
||||
const cropperImageRect = cropperImage.getBoundingClientRect();
|
||||
const maxSelection = {
|
||||
x: cropperImageRect.left - cropperCanvasRect.left,
|
||||
y: cropperImageRect.top - cropperCanvasRect.top,
|
||||
width: cropperImageRect.width,
|
||||
height: cropperImageRect.height,
|
||||
};
|
||||
cropperselection.value.$change(
|
||||
maxSelection.x,
|
||||
maxSelection.y,
|
||||
maxSelection.width,
|
||||
maxSelection.height,
|
||||
);
|
||||
}
|
||||
}
|
||||
// 移动
|
||||
function handleMove() {
|
||||
if (!isCropperMove.value) {
|
||||
isCropperMove.value = true;
|
||||
// 如果想要点击移动，清除选区，可以打开下面的代码注释
|
||||
// cropperselection.value.$clear();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 监听选择区变化
|
||||
* @param event
|
||||
*/
|
||||
function onCropperSelectionChange(event) {
|
||||
if (event.detail.width && event.detail.height) {
|
||||
isCropperSelection.value = true;
|
||||
} else {
|
||||
isCropperSelection.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 确认裁剪
|
||||
*/
|
||||
const emit = defineEmits(['success']);
|
||||
async function handleConfirm() {
|
||||
if (isCropperSelection.value) {
|
||||
const res = await cropperselection.value.$toCanvas();
|
||||
|
||||
const dataImage = res.toDataURL('image/png');
|
||||
const file = dataURLtoFile(dataImage, fileObj.value.name);
|
||||
emit('success', {
|
||||
...fileObj.value,
|
||||
file: file,
|
||||
fileShow: dataImage,
|
||||
});
|
||||
}
|
||||
}
|
||||
// 将data:image转成新的file
|
||||
function dataURLtoFile(dataurl, filename) {
|
||||
var arr = dataurl.split(','),
|
||||
mime = arr[0].match(/:(.*?);/)[1],
|
||||
bstr = atob(arr[1]),
|
||||
n = bstr.length,
|
||||
u8arr = new Uint8Array(n);
|
||||
while (n--) {
|
||||
u8arr[n] = bstr.charCodeAt(n);
|
||||
}
|
||||
const blob = new Blob([u8arr], { type: mime });
|
||||
const file = new File([blob], filename, { type: mime });
|
||||
return file;
|
||||
}
|
||||
|
||||
/**
|
||||
* 文件上传
|
||||
*/
|
||||
const input_form = ref();
|
||||
function handleUploadSuccess() {
|
||||
const files = input_form.value.files;
|
||||
|
||||
if (files.length) {
|
||||
fileObj.value = {
|
||||
name: files[0].name,
|
||||
file: files[0],
|
||||
fileShow: URL.createObjectURL(files[0]),
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dialog_wrap {
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user