Я использую Vue Кроппер JS для загрузки аватаров. Если я установил URL для загрузки изображения, предварительный просмотр не работает. Высота и ширина указаны на 0.
<section class="preview-area"><div class="preview" style="width: 0px; overflow: hidden; height: 0px; max-width: 200px; max-height: 200px;"><img src="https://xxx.xxx.svg" alt="image" style="display: block; width: 0px; height: 0px; min-width: 0px !important; min-height: 0px !important; max-width: none !important; max-height: none !important; transform: none;"></div></section>
Если URL-адрес пуст, и я загружаю изображение, предварительный просмотр работает хорошо.
Здесь код:
<template>
<div>
<input
ref="input"
type="file"
name="image"
accept="image/*"
@change="setImage"
/>
<div class="row mt-3">
<div class="col-lg-6">
<div class="" id="imageEditContainer">
<div class="card-header">
<strong>Bild bearbeiten</strong>
</div>
<div class="card-body">
<div class="img-cropper" id="cropper">
<vue-cropper
ref="cropper"
:src="imgSrc"
preview=".preview"
:minContainerHeight="300"
/>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="">
<div class="card-header">
<strong>Vorschau</strong>
</div>
<div class="card-body" id="preview">
<div class="content">
<section class="preview-area">
<div class="preview"/>
</section>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="">
<div class="card-header">
<button class="btn btn-outline-info" @click.prevent="showFileChooser">Bild Hochladen</button>
<button class="btn btn-outline-info" @click.prevent="reset">Zurücksetzen</button>
<button class="btn btn-outline-primary" @click.prevent="save">Speichern</button>
<span class="card-header-actions">
<button class="btn btn-outline-primary" @click.prevent="showMore = !showMore">Mehr</button>
</span>
</div>
<div class="card-body" v-if="showMore">
<a href="#" class="btn btn-outline-info mb-2" role="button" @click.prevent="zoom(0.2)"> Zoom In </a>
<a href="#" class="btn btn-outline-info mb-2" role="button" @click.prevent="zoom(-0.2)"> Zoom Out</a>
<a href="#" class="btn btn-outline-info mb-2" role="button" @click.prevent="move(-10, 0)">Move Left</a>
<a href="#" class="btn btn-outline-info mb-2" role="button" @click.prevent="move(10, 0)">Move Right</a>
<a href="#" class="btn btn-outline-info mb-2" role="button" @click.prevent="move(0, -10)">Move Up</a>
<a href="#" class="btn btn-outline-info mb-2" role="button" @click.prevent="move(0, 10)">Move Down</a>
<a href="#" class="btn btn-outline-info mb-2" role="button" @click.prevent="rotate(90)">Rotate +90deg</a>
<a href="#" class="btn btn-outline-info mb-2" role="button" @click.prevent="rotate(-90)">Rotate -90deg</a>
<a ref="flipX" href="#" class="btn btn-outline-info mb-2" role="button" @click.prevent="flipX">Flip X</a>
<a ref="flipY" href="#" class="btn btn-outline-info mb-2" role="button" @click.prevent="flipY">Flip Y</a>
</div>
</div>
</div>
</div>
</template>
<script>
import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';
export default {
components: {
VueCropper,
},
props: [
'imgSource'
],
data() {
return {
imgSrc: '/assets/brand/xxxsvg',
cropImg: '',
data: null,
showMore: false
};
},
mounted() {
this.$nextTick(() => {
});
},
methods: {
cropImage() {
// get image data for post processing, e.g. upload or setting image src
this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL();
},
flipX() {
const dom = this.$refs.flipX;
let scale = dom.getAttribute('data-scale');
scale = scale ? -scale : -1;
this.$refs.cropper.scaleX(scale);
dom.setAttribute('data-scale', scale);
},
flipY() {
const dom = this.$refs.flipY;
let scale = dom.getAttribute('data-scale');
scale = scale ? -scale : -1;
this.$refs.cropper.scaleY(scale);
dom.setAttribute('data-scale', scale);
},
getCropBoxData() {
this.data = JSON.stringify(this.$refs.cropper.getCropBoxData(), null, 4);
},
getData() {
this.data = JSON.stringify(this.$refs.cropper.getData(), null, 4);
},
move(offsetX, offsetY) {
this.$refs.cropper.move(offsetX, offsetY);
},
reset() {
this.$refs.cropper.reset();
},
rotate(deg) {
this.$refs.cropper.rotate(deg);
},
setCropBoxData() {
if (!this.data) return;
this.$refs.cropper.setCropBoxData(JSON.parse(this.data));
},
setData() {
if (!this.data) return;
this.$refs.cropper.setData(JSON.parse(this.data));
},
setImage(e) {
const file = e.target.files[0];
if (file.type.indexOf('image/') === -1) {
alert('Please select an image file');
return;
}
if (typeof FileReader === 'function') {
const reader = new FileReader();
reader.onload = (event) => {
this.imgSrc = event.target.result;
// rebuild cropperjs with the updated source
this.$refs.cropper.replace(event.target.result);
};
reader.readAsDataURL(file);
} else {
alert('Sorry, FileReader API not supported');
}
},
showFileChooser() {
this.$refs.input.click();
},
zoom(percent) {
this.$refs.cropper.relativeZoom(percent);
},
save() {
this.cropImage()
if(this.cropImg) {
axios({
method: 'post',
url: '/api/users/2/uploadAvatar',
data: {
image: this.cropImg,
}
});
}
}
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
body {
font-family: Arial, Helvetica, sans-serif;
width: 1024px;
margin: 0 auto;
}
input[type="file"] {
display: none;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0 5px 0;
}
.header h2 {
margin: 0;
}
.header a {
text-decoration: none;
color: black;
}
.content {
display: flex;
justify-content: space-between;
}
.cropper-area {
width: 614px;
height: 300px;
}
.actions {
margin-top: 1rem;
}
.actions a {
display: inline-block;
padding: 5px 15px;
background: #0062CC;
color: white;
text-decoration: none;
border-radius: 3px;
margin-right: 1rem;
margin-bottom: 1rem;
}
.preview-area {
width: 300px;
height: 300px;
}
.preview-area p {
font-size: 1.25rem;
margin: 0;
margin-bottom: 1rem;
}
.preview-area p:last-of-type {
margin-top: 1rem;
}
.preview {
width: 100%;
height: 100%;
overflow: hidden;
}
.crop-placeholder {
width: 100%;
height: 200px;
background: #ccc;
}
.cropped-image img {
max-width: 100%;
}
img {
display: block;
/* This rule is very important, please don't ignore this */
max-width: 100%;
}
</style>
Я пытался изменить css:
.preview {
overflow: hidden;
width: 50px;
height: 50px;
}
Кто-нибудь может помочь? В чем проблема, что исходное изображение не работает в режиме предварительного просмотра?