CropperJS封装的图片剪辑器

最新推荐文章于 2023-07-09 00:47:10 发布

smile、暖冬

最新推荐文章于 2023-07-09 00:47:10 发布

阅读量209

点赞数

分类专栏： web技能

本文链接：https://blog.csdn.net/smile_ycm/article/details/87721043

版权

web技能专栏收录该内容

11 篇文章 0 订阅

订阅专栏

引言

现在SPA（单页面网站）发展正火，项目开发过程中难免遇到图片上传的需求，图片上传前肯定需要剪切，以方便后续的处理与展示；此次分享一个图片剪切的组件！

yarn add react-cropper

使用例子说明：

	    import CropperJS from 'react-cropper';
	    import 'cropperjs/dist/cropper.css';
	   <CropperJS
				ref={cropper => {
					this.cropperjs = cropper; // ref绑定次组件方便接下来操作
				}}
				viewMode={2}
				dragMode="none"
				zoomable={false}
				zoomOnTouch={false}
				zoomOnWheel={false}
				src={this.state.img_url || require('assents/images/thumbnail.svg')} // 上传的图片路径（需要转换）
				style={{ height: 300, width: 500 }} // 设置上传图片底图的大小
				aspectRatio={1 / 1} // 设置配置选中的区域比例
				crop={this._crop.bind(this)} //返回上传照片选中区域的Base64码
			/>

使用_crop函数获取并处理选中的图片Base64码

		_crop = () => {
    		this.fileData(this.cropperjs.getCroppedCanvas().toDataURL()); 
    	};

现在获取到Base64码转成图片格式，通过fileData函数

 fileData = dataurl => {
		let arr = dataurl.split(','),
			mime = arr[0].match(/:(.*?);/)[1],
			bstr = atob(arr[1]),
			n = bstr.length,
			u8arr = new Uint8Array(n);
		while (n--) {
			u8arr[n] = bstr.charCodeAt(n);
		}
		let file = new File([u8arr], this.state.img_name, { type: mime }); // 这里img_name是为了设置上传图片的名字
		return file；// 此时的file就是File格式的文件
	};

为了可以实时预览选中的区域，我们需要file转换为浏览器可以支持的格式，fileData函数修改

 	fileData = dataurl => {
		...
		this.setState({
			eye_url: this.getBase64(file)
		});
		...
	};

不难发现咱们多次使用getBase64函数，为了file格式转换为浏览器可以解析的地址格式

	getBase64 = file => {
		var url = null;
		if (window.createObjectURL != undefined) {
			url = window.createObjectURL(file);
		} else if (window.URL != undefined) {
			url = window.URL.createObjectURL(file);
		} else if (window.webkitURL != undefined) {
			url = window.webkitURL.createObjectURL(file);
		}
		return url;
	};

自此CropperJs使用心得分享完结，此文章仅供参考，如有不足请指教！

小结：展示一下预览的效果（图片选择区域可以放大与缩小，设置了比例，因此不能随便修改选择比例）