-
Notifications
You must be signed in to change notification settings - Fork 132
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Default example results to 0 height of component #149
Comments
@vedmant, the Take a look at the sandbox example. |
@Norserium I tried blob, but still can't make it work, height is 0. Can it be that initially there is no image selected and I don't show cropper Here is still not working code based on the example: <template>
<Modal :value="value" content-class="max-w-3xl" @input="$emit('input', false)">
<div class="p-6 pb-16 m-auto max-w-xs">
<div class="mb-6 text-xl font-semibold leading-7 text-center text-white">
{{ $t('Create a new team') }}
</div>
<div class="mb-6 bg-gray-800 aspect-w-1 aspect-h-1">
<div v-if="image.src">
<cropper
ref="cropper"
class="h-full cropper"
:src="image.src"
:stencil-props="{
aspectRatio: 1
}"
@change="change"
/>
</div>
<div v-else class="flex flex-col justify-center items-center">
<Btn color="red" class="mb-6" @click="$refs.file.click()">
<IconUpload class="mr-2 w-5 h-5 text-black" />
{{ $t('Upload team avatar') }}
</Btn>
<div class="text-sm font-medium leading-5 text-center text-gray-400" style="max-width: 8.5rem;">
Minimum 600 x 600 JPG, JPEG or PNG
</div>
<input ref="file" type="file" style="display: none" accept="image/*" @change="uploadImage">
</div>
</div>
<InputGroup v-model="form.name" :label="$t('Team Name')" class="mb-10" />
<Btn color="red" class="justify-center w-full" size="xl" :loading="loading">
{{ $t('Create Team') }}
</Btn>
</div>
</Modal>
</template>
<script>
// import Cropper from 'cropperjs'
import { Cropper } from 'vue-advanced-cropper'
import Modal from '../UI/Modal'
import Btn from '../UI/Btn'
import IconUpload from '../UI/Icons/IconUpload'
import InputGroup from '../UI/InputGroup'
// import 'cropperjs/dist/cropper.css'
import 'vue-advanced-cropper/dist/style.css'
export default {
components: { InputGroup, IconUpload, Btn, Modal, Cropper },
props: {
value: Boolean,
},
data: () => ({
image: {
src: null,
type: null,
},
loading: false,
form: {
name: '',
},
zoom: 0,
}),
methods: {
uploadImage (event) {
/// Reference to the DOM input element
const { files } = event.target
// Ensure that you have a file before attempting to read it
if (files && files[0]) {
// 1. Revoke the object URL, to allow the garbage collector to destroy the uploaded before file
if (this.image.src) {
URL.revokeObjectURL(this.image.src)
}
// 2. Create the blob link to the file to optimize performance:
const blob = URL.createObjectURL(files[0])
// 3. Update the image. The type will be derived from the extension and it can lead to an incorrect result:
this.image = {
src: blob,
type: files[0].type,
}
}
},
change ({ coordinates, canvas }) {
console.log(coordinates, canvas)
},
destroyed () {
// Revoke the object URL, to allow the garbage collector to destroy the uploaded before file
if (this.image.src) {
URL.revokeObjectURL(this.image.src)
}
},
},
}
</script>
|
It shouldn't be a problem, but you can try to remove it and test the image loading. Also, try to set the fixed height for the cropper itself. By the way, what's the version of the cropper do you use? |
@Norserium I use "vue-advanced-cropper": "^1.7.0", something weird is happening here, even when I set src to a url:
|
@vedmant, could you sent me the full html code of the fragment? |
@Norserium Do you mean this: <div class="w-full h-full cropper vue-advanced-cropper"><div class="vue-advanced-cropper__stretcher" style="height: auto; width: auto;"></div> <div class="vue-advanced-cropper__boundaries" style="width: auto; height: auto; transition: opacity 300ms ease 0s; pointer-events: none; opacity: 0;"><div class="vue-advanced-cropper__cropper-wrapper"><div class="vue-advanced-cropper__background" style="width: auto; height: auto; transition: opacity 300ms ease 0s; pointer-events: none; opacity: 0;"></div> <div class="vue-advanced-cropper__image-wrapper"><img class="vue-advanced-cropper__image" style="height: 0px; left: 0px; top: 0px;"></div> <div class="vue-advanced-cropper__foreground" style="width: auto; height: auto; transition: opacity 300ms ease 0s; pointer-events: none; opacity: 0;"></div> <div class="vue-rectangle-stencil vue-rectangle-stencil--movable" style="width: 0px; height: 0px; transform: translate(0px, 0px); display: none;"><div class="vue-bounding-box vue-rectangle-stencil__bounding-box"><div><div class="vue-preview vue-preview--fill vue-rectangle-stencil__preview"><div class="vue-preview__wrapper" style="width: 0px; height: 0px; left: calc(50% - 0px); top: calc(50% - 0px);"><img class="vue-preview__image" style="width: 0px; height: 0px; left: 0px; top: 0px; display: none;"></div></div></div> <div><div class="vue-line-wrapper vue-line-wrapper--east vue-simple-line-wrapper vue-simple-line-wrapper--east"><div class="vue-simple-line vue-simple-line--east"></div></div><div class="vue-line-wrapper vue-line-wrapper--west vue-simple-line-wrapper vue-simple-line-wrapper--west"><div class="vue-simple-line vue-simple-line--west"></div></div><div class="vue-line-wrapper vue-line-wrapper--south vue-simple-line-wrapper vue-simple-line-wrapper--south"><div class="vue-simple-line vue-simple-line--south"></div></div><div class="vue-line-wrapper vue-line-wrapper--north vue-simple-line-wrapper vue-simple-line-wrapper--north"><div class="vue-simple-line vue-simple-line--north"></div></div></div> <div class="vue-bounding-box__handler vue-bounding-box__handler--east-south"><div class="vue-handler-wrapper vue-handler-wrapper--east-south vue-simple-handler-wrapper vue-simple-handler-wrapper--east vue-simple-handler-wrapper--south vue-simple-handler-wrapper--east-south vue-bounding-box__handler vue-bounding-box__handler--east-south"><div class="vue-handler-wrapper__draggable"><div class="vue-simple-handler vue-simple-handler--east vue-simple-handler--south vue-simple-handler--east-south"></div></div></div></div><div class="vue-bounding-box__handler vue-bounding-box__handler--east-north"><div class="vue-handler-wrapper vue-handler-wrapper--east-north vue-simple-handler-wrapper vue-simple-handler-wrapper--east vue-simple-handler-wrapper--north vue-simple-handler-wrapper--east-north vue-bounding-box__handler vue-bounding-box__handler--east-north"><div class="vue-handler-wrapper__draggable"><div class="vue-simple-handler vue-simple-handler--east vue-simple-handler--north vue-simple-handler--east-north"></div></div></div></div><div class="vue-bounding-box__handler vue-bounding-box__handler--east"><div class="vue-handler-wrapper vue-handler-wrapper--east vue-simple-handler-wrapper vue-simple-handler-wrapper--east vue-bounding-box__handler vue-bounding-box__handler--east"><div class="vue-handler-wrapper__draggable"><div class="vue-simple-handler vue-simple-handler--east"></div></div></div></div><div class="vue-bounding-box__handler vue-bounding-box__handler--west-south"><div class="vue-handler-wrapper vue-handler-wrapper--west-south vue-simple-handler-wrapper vue-simple-handler-wrapper--west vue-simple-handler-wrapper--south vue-simple-handler-wrapper--west-south vue-bounding-box__handler vue-bounding-box__handler--west-south"><div class="vue-handler-wrapper__draggable"><div class="vue-simple-handler vue-simple-handler--west vue-simple-handler--south vue-simple-handler--west-south"></div></div></div></div><div class="vue-bounding-box__handler vue-bounding-box__handler--west-north"><div class="vue-handler-wrapper vue-handler-wrapper--west-north vue-simple-handler-wrapper vue-simple-handler-wrapper--west vue-simple-handler-wrapper--north vue-simple-handler-wrapper--west-north vue-bounding-box__handler vue-bounding-box__handler--west-north"><div class="vue-handler-wrapper__draggable"><div class="vue-simple-handler vue-simple-handler--west vue-simple-handler--north vue-simple-handler--west-north"></div></div></div></div><div class="vue-bounding-box__handler vue-bounding-box__handler--west"><div class="vue-handler-wrapper vue-handler-wrapper--west vue-simple-handler-wrapper vue-simple-handler-wrapper--west vue-bounding-box__handler vue-bounding-box__handler--west"><div class="vue-handler-wrapper__draggable"><div class="vue-simple-handler vue-simple-handler--west"></div></div></div></div><div class="vue-bounding-box__handler vue-bounding-box__handler--south"><div class="vue-handler-wrapper vue-handler-wrapper--south vue-simple-handler-wrapper vue-simple-handler-wrapper--south vue-bounding-box__handler vue-bounding-box__handler--south"><div class="vue-handler-wrapper__draggable"><div class="vue-simple-handler vue-simple-handler--south"></div></div></div></div><div class="vue-bounding-box__handler vue-bounding-box__handler--north"><div class="vue-handler-wrapper vue-handler-wrapper--north vue-simple-handler-wrapper vue-simple-handler-wrapper--north vue-bounding-box__handler vue-bounding-box__handler--north"><div class="vue-handler-wrapper__draggable"><div class="vue-simple-handler vue-simple-handler--north"></div></div></div></div></div></div> <canvas style="display: none;"></canvas> <canvas style="display: none;"></canvas></div></div></div> |
@vedmant yes. Is this code a generated result of this template? It's pretty hard to say, what the problem do you have. You should try to clear your code as much as possible, because I'm sure that the problem somewhere in your code. To start disable, for example, all your styles; try to move cropper outside the modal window and etc. |
@vedmant, any news? |
@Norserium Hey, sorry, I think it's something related to my project setup, the same components works ok in the fiddle, but I can't find the issue for now, it's hard to debug Vue js internals to see why src prop is not passed. I'll try use other cropper. Thanks for your help, I really appreciate this. |
@vedmant, I have some spare time to look via Team Viewer what's the reason of this issue. So if you ready, write me an email (it's in the profile) with the access details and the convenient time (UTC). |
@Norserium Thanks, I'll send you message! |
@vedmant, notify me here, when you've sent the message. |
@Norserium Hey, I sent an email to you. |
@vedmant there are the details of investigation, just in case. |
Hi, I just used default example, here is my component:
When I select image cropper has 0 height:
The text was updated successfully, but these errors were encountered: