vue.js - TypeError: this.$refs.cropper.getCroppedCanvas 不是函数

Question

我想从图片网址裁剪、旋转照片。我将图像从 url 转换为 base64 字符串。图像显示在组件上。但是当我尝试裁剪图像时出现 TypeError: this.$refs.cropper.getCroppedCanvas is not a function。我通过 https://www.npmjs.com/package/vue-cropperjs 的npm install --save vue-cropperjs安装了它。

我已将其导入以下本地组件：

   <tamplate>
     <VueCropper ref="cropper" :src="imgSrc" alt="Source Image" :modal='true'>
 </VueCropper>
</template> 

<script lang="js">
import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';

export default Vue.extend({
components: { VueCropper} 

     


setImage(path) {
    var that = this;

    function toDataURL(url, callback) {
        var xhr = new XMLHttpRequest();
        xhr.onload = function () {
            var reader = new FileReader();
            reader.onloadend = function () {
                callback(reader.result);
            }
            reader.readAsDataURL(xhr.response);
        };
        xhr.open('GET', url);
        xhr.responseType = 'blob';
        xhr.send();
    }

    toDataURL(path, function (dataUrl) {

        that.imgSrc = dataUrl;

    })


},
cropImage() {
    // get image data for post processing, e.g. upload or setting image src
    this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL();
},
rotate() {
    // guess what this does :)
    this.$refs.cropper.rotate(90);
},
});
</script>

标签： vue.jscropperjs