kevin/ops2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

up

Browse Source
This commit is contained in:
kevin
2025-12-29 20:40:41 +08:00
parent e63f144ac4
commit 89fab5a972
1 changed files with 26 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontent/ops_vue_js/src/components/imageCropper.vue
+26 -24
View File
@@ -4,7 +4,9 @@
import { Modal } from "@tabler/core"; import { Modal } from "@tabler/core";
import { onMounted, ref } from "vue"; import { onMounted, ref } from "vue";
import Cropper from 'cropperjs';
import 'cropperjs';
@@ -19,22 +21,10 @@ const cropper = ref(null);
onMounted(()=>{ onMounted(()=>{
cropper.value = new Cropper(image, {
container: imagecroppert.value,
});
//cropper.value.
console.log(cropper.value)
}) })
function getsele(){ function getsele(){
console.log(cropper.value.getCropperCanvas())
} }
@@ -43,9 +33,24 @@ function getsele(){
<template> <template>
<div class="cropper-container" ref="imagecroppert"></div> <cropper-canvas class="cropper-container" background>
<cropper-image src="https://wnfed.com/usr/uploads/2020/07/736937178.jpg" alt="Picture" rotatable scalable skewable translatable></cropper-image>
<cropper-shade hidden></cropper-shade>
<cropper-handle action="select" plain></cropper-handle>
<cropper-selection initial-coverage="0.5" movable resizable>
<cropper-grid role="grid" covered></cropper-grid>
<cropper-crosshair centered></cropper-crosshair>
<cropper-handle action="move" theme-color="rgba(255, 255, 255, 0.35)"></cropper-handle>
<cropper-handle action="n-resize"></cropper-handle>
<cropper-handle action="e-resize"></cropper-handle>
<cropper-handle action="s-resize"></cropper-handle>
<cropper-handle action="w-resize"></cropper-handle>
<cropper-handle action="ne-resize"></cropper-handle>
<cropper-handle action="nw-resize"></cropper-handle>
<cropper-handle action="se-resize"></cropper-handle>
<cropper-handle action="sw-resize"></cropper-handle>
</cropper-selection>
</cropper-canvas>
<button @click="getsele">getsele</button> <button @click="getsele">getsele</button>
@@ -54,14 +59,11 @@ function getsele(){
<style lang="scss" scoped> <style lang="scss" scoped>
.cropper-container { .cropper-container {
border: 1px solid var(--vp-c-divider);
border-radius: 0.375rem;
margin-bottom: 1rem;
margin-top: 1rem;
padding: 1.25rem 1.5rem;
:deep(cropper-canvas) {
height: 360px; width: 400px;
} height: 400px;
} }
</style> </style>