camanjs裁剪图像无法读取未定义的属性“ length”

时间:2019-01-28 09:43:38

标签: javascript camanjs

我正在尝试使用下面的camanjs裁剪图像

<input type="file" id="file">
<div id="image-editor-preview"></div>

<script>
    document.querySelector('#file').addEventListener('change',function(){
        loadImage(this);
    });

    function loadImage($el){
        if ($el.files && $el.files[0]) {
            let $reader = new FileReader();

            $reader.onload = function(e) {
                let $image = new Image();
                $image.src = e.target.result;
                if( document.querySelector('#image-editor-preview img') != null ){
                    document.querySelector('#image-editor-preview img').remove();
                }
                $image.onload = function(){
                    cropCenter(this.width,this.height);
                }
                document.querySelector('#image-editor-preview').appendChild($image);
            }

            $reader.readAsDataURL($el.files[0]);
        }
    }
    function cropCenter($w,$h){
        let caman = Caman('#image-editor-preview img');

        let $x = ( $w - 300 ) / 2; // get the center
        let $y = ( $h - 300 ) / 2; // get the center

        caman.crop(
            300,
            300,
            $x,
            $y
        );

        caman.render();
    }
</script>

不幸的是,它给了我这个错误

  

未捕获的TypeError:无法读取未定义的属性'length'       在Renderer.Caman.Renderer.Renderer.execute(camanjs.min.js:160)       在Caman.render(camanjs.min.js:54)

有什么帮助,有想法请

0 个答案:

没有答案