图片裁剪插件cropper.js

cropperjs的github

中文文档

安装

npm install cropperjs

引入

import 'cropperjs/dist/cropper.css';
import Cropper from 'cropperjs';

使用

const letImg: any = document.querySelector("#cropImg");
(<any>state.cropper) = new Cropper(letImg, {
    
    viewMode: 1,
    dragMode: "none",
    initialAspectRatio: 1,
    aspectRatio: 1,
    preview: ".before",
    background: false,
    autoCropArea: 0.6,
    zoomOnWheel: false,
    crop: () => {
    
        state.cropperImgBase64 = (<any>state.cropper)
            .getCroppedCanvas()
            .toDataURL("image/jpeg");
        console.log(state.cropperImgBase64);
    },
});

注意：

• 不能直接用本地图片
• 可以用上传预览的图片