在上传图片预览时,可以使用这个包来进行预览
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配置对象中还有很多属性,在这里只是使用到了比较常见的属性。