react hook使用cropperjs截图

古城微笑少年丶 2022-11-12 08:21 122阅读 0赞

## react hook使用cropperjs截图 ##

之前用react-cropper的时候遇到了各种各样的问题，头炸了，只能换了，终于用cropperjs解决了之前遇到的问题，哭liao！

直接上代码：

import Cropper from 'cropperjs';
    import 'cropperjs/dist/cropper.css';
    const Screenshot = (props) => { 
    	const options = { 
            zoomTo: 0.1,
            initialAspectRatio: 1,
            autoCropArea: 0.8,
            preview: ".tailoring-img-preview",  // 这个是用来预览的，className
            viewMode: 1,
            guides: true,
            minCropBoxHeight: 100,
            minCropBoxWidth: 100,
            background: true,
            responsive: true,
            checkOrientation: false,
            crop: cropper,
            crop(event) { 
                console.log(event.detail.x);
            },
        }
        // 这里我的做法是Modal窗打开时就开启裁剪框
        useEffect(() => { 
            if (isAvatarVisible) { 
                setImage(defaultImg);
                changeCrop(document.getElementById('image1'), defaultImg);
                setishandleCancel(false);
            }
        }, [isAvatarVisible])
        // Modal窗关闭时就销毁裁剪框(这里是为了防止打开多个裁剪框的时候，图片还是之前的)
        useEffect(() => { 
            if (ishandleCancel) { 
                cropper.destroy();
                setCropper('');
                setishandleCancel(false);
            }
        }, [ishandleCancel])
        // 更换图片，可能要注意一下，别人用的jQuery，用的.attr，这里不行
        const onChange = (e) => { 
            e.preventDefault();
            let files;
            if (e.dataTransfer) { 
                files = e.dataTransfer.files;
            } else if (e.target) { 
                files = e.target.files;
            }
            if (!(files[0].size && files[0].size / 1024 / 1024 < 100)) { 
                message.error('上传失败：超过100M');
            } else { 
                changeCrop(document.getElementById('image1'), URL.createObjectURL(files[0]));
            }
        };
        const changeCrop = (img, url) => { 
            const image1 = img;
            if (cropper) { 
                cropper.destroy();
            }
            image1.src = url;
            const cropper1 = new Cropper(image1, options);
            setCropper(cropper1);
        }
    }

上面是大致的代码，可以结合我的另一篇文章一起看：[这里][Link 1]

[Link 1]: https://blog.csdn.net/Z_0926/article/details/115000220?spm=1001.2014.3001.5501