Question

我要裁剪图像，并旋转图像网址中的照片。我将图片从url转换为base64字符串。图像显示在组件上。但是当我尝试裁剪图像时 TypeError：this。$ refs.cropper.getCroppedCanvas不是函数。我通过 npm install --save vue-cropperjs 从https://www.npmjs.com/package/vue-cropperjs安装了它。

Imported it to local component 

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

import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';
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);
},

TypeError：this。$ refs.cropper.getCroppedCanvas不是一个函数

0 个答案: