Comments (13)
@GalacticHypernova, the using of mixins for the cropper sounds like an unusual idea. Could you provide the code?
from vue-advanced-cropper.
Of course. This is the code that was used in the v2.x application (located in ~/mixins
, moved to ~/composables
in the Nuxt 3.x application):
import { Cropper } from 'vue-advanced-cropper'
export default {
components: {
Cropper
},
data: () => ({
isDragOver: false,
selectedImage: false,
imgErr: '',
imgUrl: '',
croppedImg: '',
cropDone: false
}),
methods: {
dragover (e) {
this.isDragOver = true
},
dragFinish () {
this.isDragOver = false
},
preview (e) {
this.imgErr = ''
const file = e.target.files[0]
if (file) {
this.cropDone = false
this.selectedImage = true
this.imgUrl = URL.createObjectURL(file)
}
},
editCrop () {
this.cropDone = false
},
cropEnd (e) {
const { canvas } = e
const dataURL = canvas.toDataURL('image/webp')
this.croppedImg = dataURL
},
saveCrop () {
this.$refs.thumbnailImg.src = this.croppedImg
this.cropDone = true
},
cancelImage () {
this.selectedImage = false
this.imgUrl = ''
this.croppedImg = ''
},
dropFile (e) {
this.isDragOver = false
const file = e.dataTransfer.files[0]
if (file) {
this.cropDone = false
this.selectedImage = true
this.imgUrl = URL.createObjectURL(file)
}
}
}
}
from vue-advanced-cropper.
The reason it's in a mixin is because it's being used throughout multiple pages, so in stead of adding it to all pages that use it, it was placed in mixins in stead, and then all there was to do was just importing it.
from vue-advanced-cropper.
@GalacticHypernova, why do you use the mixin instead of creating the wrapper for Cropper
component?
from vue-advanced-cropper.
Hey @Norserium , just pinging you in case you didn't see my response as I had accidentally predicted the question before you actually asked it (at least on my screen).
from vue-advanced-cropper.
@GalacticHypernova, well, but if you create the wrapper component you get the opportunity to reuse it on multiple pages. It look like more idiomatic approach.
from vue-advanced-cropper.
Anyway, you can easily rewrite your mixin to a composable function. There is nothing specific to this library.
That's the result of artificial intelligence work. I didn't check it, but it looks right.
import { ref } from 'vue';
export function useCropper() {
const isDragOver = ref(false);
const selectedImage = ref(false);
const imgErr = ref('');
const imgUrl = ref('');
const croppedImg = ref('');
const cropDone = ref(false);
const dragover = () => {
isDragOver.value = true;
};
const dragFinish = () => {
isDragOver.value = false;
};
const preview = (e) => {
imgErr.value = '';
const file = e.target.files[0];
if (file) {
cropDone.value = false;
selectedImage.value = true;
imgUrl.value = URL.createObjectURL(file);
}
};
const editCrop = () => {
cropDone.value = false;
};
const cropEnd = (e) => {
const { canvas } = e;
const dataURL = canvas.toDataURL('image/webp');
croppedImg.value = dataURL;
};
const saveCrop = () => {
// Assuming that you have a ref called 'thumbnailImg' for the image element.
thumbnailImg.value.src = croppedImg.value;
cropDone.value = true;
};
const cancelImage = () => {
selectedImage.value = false;
imgUrl.value = '';
croppedImg.value = '';
};
const dropFile = (e) => {
isDragOver.value = false;
const file = e.dataTransfer.files[0];
if (file) {
cropDone.value = false;
selectedImage.value = true;
imgUrl.value = URL.createObjectURL(file);
}
};
return {
isDragOver,
selectedImage,
imgErr,
imgUrl,
croppedImg,
cropDone,
dragover,
dragFinish,
preview,
editCrop,
cropEnd,
saveCrop,
cancelImage,
dropFile,
};
};
from vue-advanced-cropper.
Thanks, I will try that. I know using it as a component would probably be best but there are a couple of differences in the use cases in terms of elements and such so I wanted to get it working first, and later I could probably rewrite it once I figure out the best way to implement it.
from vue-advanced-cropper.
Would I not need to import the Cropper as well?
Or is that done from the places where I actually use the cropper?
from vue-advanced-cropper.
I'll close this for now, to make my testing, and if anything I'll reopen. Thanks for the help!
from vue-advanced-cropper.
Or is that done from the places where I actually use the cropper?
@GalacticHypernova, that's it.
from vue-advanced-cropper.
Thank you!
from vue-advanced-cropper.
@GalacticHypernova, you are welcome!
from vue-advanced-cropper.
Related Issues (20)
- More detailed events please?? HOT 2
- I am unable to use Cropper in my bootstrap modal. HOT 2
- Cropper doesn't work after deployment. HOT 20
- Bug Cropper: no emit resize-end or move-end events in modal HOT 1
- 你好,如果想修改为支持:选中的区域为任意四边形(四个内角都不能大于180度)而不是矩形,需要修改哪里啊? HOT 1
- No matching version found for vue-advanced-cropper@next HOT 1
- Missing stencil and duplicate view HOT 3
- Question: How to fit image to stencil, when it first loads HOT 2
- issue: getting canvas in composition api with <script setup> HOT 1
- I want to be able to edit the image preview list by clicking on it. HOT 1
- using image restriction 'none' and aspect ratio. HOT 5
- In Vue advanced cropper , the moving class (vue-rectangle-stencil--moving) is not removing automatically when I stop moving the mouse, but if I refresh the page once means , it is removing automatically and working as expected. HOT 1
- Saving/Retrieving cropper settings to re-apply at a later time HOT 1
- How to use defaultVisibleArea with values that have a very narrow or very wide size of square stencil HOT 1
- Wrong Width Height recognition HOT 2
- Image Cropping Failure for larger Images HOT 1
- The cropped image was found to be missing pixels HOT 1
- RTL Support Issue: Incorrect Cropper Behavior with postcss-rt
- Test support / documentation
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-advanced-cropper.