图片裁剪croppr在angular中的使用

在上传图片预览时，可以使用这个包来进行预览

目录

一、下载cropper.js包

二、使用步骤

1.在ts文件中引入Cropper

2.创建cropper实例

总结

---

一、下载cropper.js包

 npm install cropperjs

二、使用步骤

1.在ts文件中引入Cropper

import Cropper from 'cropperjs';

2.创建cropper实例

  @ViewChild('imgCropper') imgCropper!: ElementRef;//获取裁剪区域
  @ViewChild('previewEelemnt') previewEelemnt!: ElementRef;//获取预览元素

    cropperIfy = {
        cropper: <any>null,
        onGetCropper: () => {
           this.cropperIfy.cropper = new Cropper(this.imgCropper.nativeElement, {
                /* 定义裁剪器的视图模式 默认味0 如果设置 viewMode 为 0,则裁剪框可以延伸到图片容器之外, 如果值是 1, 2,
                或 3 会将裁剪框限制为图片容器的大小。viewMode 的值为 2 或 3 时会限制图片容器在裁剪容器范围内。
                当图片容器比例和裁剪容器比例一致时，2和3没有区别。 */
                viewMode: 0,
                dragMode: 'move', //图片容器可移动
                aspectRatio: 26 / 32, //定义裁剪框的固定宽高比。默认是自由比例
                autoCropArea: 0.65, //定义裁剪区域占图片的大小(百分比)
                restore: false, //在窗口大小变化后，恢复被裁剪区域
                guides: true, //是否展示裁剪框的虚线
                center: true, //是否显示裁剪框中心指示器
                highlight: false, //是否显示裁剪框上面的白色蒙版(突出显示裁剪框)
                cropBoxResizable: false, //是否允许拖动来调整裁剪框大小
                toggleDragModeOnDblclick: false, //是否允许双击切换图片容器拖拽模式("crop"和"move")
                preview: this.previewEelemnt.nativeElement, //添加额外的元素（容器）预览裁剪后的结果。 一个元素或元素数组或节点列表对象或Document.querySelectorAll的有效选择器
            });
        },
    };

css:

.main {
    display: flex;
    flex-direction: column;
}
.img {
    width: 500px;
    height: 460px;
    border: 1px solid #eee;
    .img_info {
        width: 100%;
        height: 100%;
    }
}
.preview {
    width: 98px;
    height: 121px;
    overflow: hidden;
}

图片效果：

---

总结

cropper配置对象中还有很多属性，在这里只是使用到了比较常见的属性。