Comments (20)
@Norserium I just set up a minimal example here that reproduces the issue.
from vue-advanced-cropper.
@tolson4, well, it took a while to investigate your issue and I may say that it is not directly related to this library. The problem here that the cropper uses Options API
and to support it __VUE_OPTIONS_API__
should be enabled.
It's enabled by default as the developers said , but it's the half-truth, cause it doesn't have the default value for ESM-build:
__FEATURE_OPTIONS_API__: isBundlerESMBuild ? `__VUE_OPTIONS_API__` : `true`,
So you need to replace __VUE_OPTIONS_API__
on true
by yourself. To make it update your lib/webpack.js
file in the following way:
import * as bedrock from '@bedrock/core';
import webpack from 'webpack';
import {resolve} from './utils.js';
const {config} = bedrock;
// WEBPACK CONFIGURATION
config['bedrock-webpack'].configs.push({
resolve: {
extensions: ['*', '.js', '.vue', '.json'],
alias: {
'@': resolve('web'),
'~': resolve() //root
},
},
mode: 'production',
plugins: [
new webpack.DefinePlugin({
__VUE_OPTIONS_API__: true,
}),
],
});
from vue-advanced-cropper.
@shiningsea0415, please provide the source code where you use the cropper.
from vue-advanced-cropper.
Sure.
Here are my cropper components that I used in my project.
This is main cropper component.
<template>
<div style="width: 100%; min-height:200px">
<Cropper
ref="cropper"
:src="image"
:style="cropperStyle"
:stencil-component="Stencil"
:stencil-props="{aspectRatio}"
:canvas="{maxWidth: 400, maxHeight: 400}" />
</div>
</template>
<script>
export default {name: 'VueCropper'};
</script>
<script setup>
import {computed, defineExpose, defineProps, ref} from 'vue';
import {Cropper} from 'vue-advanced-cropper';
import Stencil from './Stencil';
import 'vue-advanced-cropper/dist/style.css';
// Props
const props = defineProps({
image: {
type: String,
default: ''
},
width: {
type: String,
default: '375px'
}
});
// Refs
const cropper = ref(null);
const aspectRatio = ref(1);
// Uses vue advance cropper function to get the cropped results
function getResult() {
return cropper.value.getResult();
}
// Exposes vue advanced cropper's function to parent component
defineExpose({getResult});
// Computed
const cropperStyle = computed(() => {
return `width: ${props.width}`;
});
</script>
This is Stencil component.
<template>
<div
class="circle-stencil"
:style="style">
<DraggableElement
class="circle-stencil__handler"
@drag="onResize"
@drag-end="onResizeEnd">
<q-icon
size="20px"
color="white"
name="fas fa-expand-alt" />
</DraggableElement>
<DraggableArea
@move="onMove"
@move-end="onMoveEnd">
<stencil-preview
class="circle-stencil__preview"
:image="image"
:coordinates="coordinates"
:transitions="transitions"
:width="stencilCoordinates.width"
:height="stencilCoordinates.height" />
</DraggableArea>
</div>
</template>
<script>
export default {name: 'CustomStencil'};
</script>
<script setup>
import {computed, defineEmits, defineProps} from 'vue';
import {
DraggableArea,
DraggableElement,
ResizeEvent,
StencilPreview
} from 'vue-advanced-cropper';
// Props
const props = defineProps({
image: {
type: Object,
default: () => {}
},
coordinates: {
type: Object,
default: () => {}
},
transitions: {
type: Object,
default: () => {}
},
stencilCoordinates: {
type: Object,
default: () => {}
}
});
// Emits
const emit = defineEmits([
'move', 'move-end', 'resize', 'resize-end'
]);
// Computed
const style = computed(() => {
const {height, width, left, top} = props.stencilCoordinates;
const style = {
width: `${width}px`,
height: `${height}px`,
transform: `translate(${left}px, ${top}px)`
};
if(props.transitions && props.transitions.enabled) {
const {time, timingFunction} = props.transitions;
style.transition = `${time}ms ${timingFunction}`;
}
return style;
});
// Helper functions
function onMove(moveEvent) {
emit('move', moveEvent);
}
function onMoveEnd() {
emit('move-end');
}
function onResize(dragEvent) {
const shift = dragEvent.shift();
const widthResize = shift.left;
const heightResize = -shift.top;
emit(
'resize',
new ResizeEvent(
{
left: widthResize,
right: widthResize,
top: heightResize,
bottom: heightResize
},
{compensate: true}
)
);
}
function onResizeEnd() {
emit('resize-end');
}
</script>
<style lang="scss">
.circle-stencil {
cursor: move;
position: absolute;
border-radius: 50%;
box-sizing: border-box;
border: dashed 2px white;
&__handler {
position: absolute;
top: 14%;
right: 15%;
z-index: 1;
width: 30px;
height: 30px;
display: flex;
cursor: ne-resize;
align-items: center;
justify-content: center;
transform: translate(50%, -50%);
}
&__preview {
overflow: hidden;
border-radius: 50%;
}
}
</style>
from vue-advanced-cropper.
@shiningsea0415, when does this error happens? On load or a specific action?
Try to rename the variable cropper
to cropperRef
just for test:
// Refs
const cropper = ref(null);
const aspectRatio = ref(1);
// Uses vue advance cropper function to get the cropped results
function getResult() {
return cropper.value.getResult();
}
from vue-advanced-cropper.
There is a file picker button. Once I pick one image file, above cropper
component is rendered. At this time I got this error with empty component.
from vue-advanced-cropper.
@shiningsea0415, did you try to rename the variable?
from vue-advanced-cropper.
Yes, I just tried. Still same error.
from vue-advanced-cropper.
from vue-advanced-cropper.
@shiningsea0415, could you send me the error message screenshot?
from vue-advanced-cropper.
from vue-advanced-cropper.
@shiningsea0415, I know, but I want to see it after your change.
from vue-advanced-cropper.
The same error.
from vue-advanced-cropper.
What was the name of variable? Was it cropper
or cropperRef
?
from vue-advanced-cropper.
@Norserium I'm helping out @shiningsea0415 with this. I am able to reproduce and noticed that the error originates here https://github.com/advanced-cropper/vue-advanced-cropper/blob/master/src/Cropper.vue#L1337. For whatever reason, classes
is showing up as undefined, and cropper
can't be read from undefined.
I have updated the initial code block @shiningsea0415 posted to remove the ref entirely, instead relying on the change
event to get the result.
<template>
<div style="width: 100%; min-height:200px">
<Cropper
:src="image"
:style="cropperStyle"
:stencil-component="Stencil"
:stencil-props="{aspectRatio}"
:canvas="{maxWidth: 400, maxHeight: 400}"
@change="setImage" />
</div>
</template>
<script>
export default {name: 'VueCropper'};
</script>
<script setup>
import {computed, defineProps, ref} from 'vue';
import {Cropper} from 'vue-advanced-cropper';
import Stencil from './Stencil';
import 'vue-advanced-cropper/dist/style.css';
// Props
const props = defineProps({
image: {
type: String,
default: ''
},
width: {
type: String,
default: '375px'
}
});
// Refs
const aspectRatio = ref(1);
const croppedImage = ref('');
function setImage({canvas}) {
const newImageUrl = canvas.toDataURL('image/jpeg');
croppedImage.value = newImageUrl;
}
// Computed
const cropperStyle = computed(() => {
return `width: ${props.width}`;
});
</script>
Even with these changes, the error still occurs and matches what was posted above:
from vue-advanced-cropper.
@tolson4, it's interesting. It looks like the minification issue at the first glance. Could you disable it temporary?
from vue-advanced-cropper.
from vue-advanced-cropper.
@tolson4, could you send me the bundle file where the error happens to my email?
from vue-advanced-cropper.
@Norserium That change has resolved our issue, thank you for the support!
from vue-advanced-cropper.
@tolson4, you are welcome!
from vue-advanced-cropper.
Related Issues (20)
- Usage of the cropper in Composition API through a composable/util HOT 13
- 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 3
- I want to be able to edit the image preview list by clicking on it. HOT 3
- using image restriction 'none' and aspect ratio. HOT 7
- 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 5
- The cropped image was found to be missing pixels HOT 1
- RTL Support Issue: Incorrect Cropper Behavior with postcss-rt HOT 1
- Test support / documentation
- Canvas instead of image HOT 6
- yarn add vue-advanced-cropper@vue-3 can't be resolved to a satisfying range HOT 2
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.