我正在使用 vue-cropperjs 库,但是在运行代码时,我总是收到错误消息:
Uncaught TypeError: Cannot read property 'getCroppedCanvas' of undefined
Uncaught TypeError: Cannot read property 'replace' of undefined
我从这里使用了代码:
<template>
<div id="app">
<h2 style="margin: 0;">Vue CropperJS</h2>
<hr/>
<input type="file" name="image" accept="image/*"
style="font-size: 1.2em; padding: 10px 0;"
@change="setImage" />
<br/>
<div style="width: 400px; height:300px; border: 1px solid gray; display: inline-block;">
<vue-cropper
ref='cropper'
:guides="true"
:view-mode="2"
drag-mode="crop"
:auto-crop-area="0.5"
:min-container-width="250"
:min-container-height="180"
:background="true"
:rotatable="true"
:src="imgSrc"
alt="Source Image"
:img-style="{ 'width': '400px', 'height': '300px' }">
</vue-cropper>
</div>
<img :src="cropImg" style="width: 200px; height: 150px; border: 1px solid gray" alt="Cropped Image" />
<br/>
<br />
<button @click="cropImage" v-if="imgSrc != ''" style="margin-right: 40px;">Crop</button>
</div>
</template>
<script>
import VueCropper from 'vue-cropperjs';
export default {
components: {
VueCropper,
},
data() {
return {
imgSrc: '',
cropImg: '',
};
},
methods: {
setImage(e) {
const file = e.target.files[0];
if (!file.type.includes('image/')) {
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');
}
},
cropImage() {
// get image data for post processing, e.g. upload or setting image src
this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL();
},
},
};
</script>
此外,我使用NPM安装该库。
问题出在哪里? 似乎不能同时识别这两个功能,但在哪里可以找到它们?它们应该已经在库中预定义了。
答案 0 :(得分:0)
好像没有加载vue-cropper
。
这只是暗中的一击,虽然应该可以,但是您可以尝试在模板中使用VueCropper
而不是vue-cropper
吗?