基于jq的图片裁剪工具cropper.js基本使用

<link rel="stylesheet" type="text/css" href="cropper.css"/>
<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="cropper.min.js" type="text/javascript" charset="utf-8"></script>

//基本结构，父容器img-box规定裁剪器的大小，设置img高宽没有用
<div>
	//图片路径自己选择，这里顺带一提，如果是异步的src插入，需要单独处理，后面会细说
	<img src>
</div>

//裁剪器初始化
$('#image').cropper({
	aspectRatio: 16 / 9,//裁剪选择框比例
	viewMode: 1,//图片布局格式 0-无限制 1-最小为裁剪选择框 2-强制性半铺满无法缩小 3-强制性全铺满无法缩小
	guides: true,//是否显示框内虚线，默认false不显示
});

//获取裁剪后的数据
var cas = $('#image').cropper('getCroppedCanvas', {
	//裁剪后高宽
	width: 98,
	height: 98,
	minWidth: 98,
	minHeight: 98,
	maxWidth: 4096,
	maxHeight: 4096,
	
	fillColor: '#fff',//空白填充
	imageSmoothingEnabled: true,//平滑处理
	imageSmoothingQuality: 'medium',//裁剪后质量
});
var base64url = cas.toDataURL('image/jpeg');//将值转换为data格式
$('#cavans-img-view').html(cas)//这里的$('#cavans-img-view')是生成的cavans标签容器，然后将数据绘制到canvas
 
//可以通过监听cropper中的cropmove事件，监听裁剪框移动触发事件，来达到移动裁剪框时实时生成canvas展示
$('#image').on('cropmove', () => {
	...//这里可以把上面的内容做为一个函数调用
});

//由于前端上传图片一般以files的格式传递，所以这里做了转义处理。将blob格式转换为File
$('#image').cropper('getCroppedCanvas').toBlob(function(blob) {
	const files = new File(//创建File对象且配置
		[blob],//内容
		'test.jpeg', {//名称
			type: blob.type//type
		}
	);
	//这里请求因为各有不同，就以axios代表，注意axios需要单独下载，可自行搜索File图片上传
	var param = new FormData();//创建formdata对象
	param.append('data', files);//将files值放入formdata对象中取名为data
	const config = {//创建axios文件上传需要的配置
		headers: {
			'Content-Type': 'multipart/form-data'
		}
	};
	axios.post('请求地址', param, config).then(res => {
 
	})
})