1

我正在尝试使用下面的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>

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

未捕获的类型错误：无法在 Caman.render (camanjs.min.js:54) 读取 Renderer.Caman.Renderer.Renderer.execute (camanjs.min.js:160) 处未定义的属性“长度”

任何帮助，请提供想法

4

0 回答 0