vue-cropper 截图组件踩坑记

安装

npm install --save vue-cropper

封装组件 

 使用封装的组件

 截图框

预览框

效果图

截图框                                                                                                                                                    预览框

 

效果可以实现了，但是不满足业务需求

现在的效果是预览框图片的大小是由截图框的大小决定的

而现实的业务需求是不管截图框再小，哪怕10 * 10，也要求能够占满预览框400 * 200

经过与组件作者沟通，组件不能 实现此类需求

解决方案：

一、将图片转换为base64，根据坐标计算，生成一张新的图片填充到预览框中，效果可以实现，但是预览框图片卡顿非常明                显， 用户体验不好

二、实现思路，根据预览框与截图框的比例重新计算，图片大小、坐标以及截图框大小

      

if (data.w < 400) {
	// 截取图片宽度
	let h = parseFloat(data.img.height);
	let w = parseFloat(data.img.width);
	// 截图框大小
	let previewWidth = data.w;
	let previewHeight = data.h;
	// 起始点坐标
	let x = data.x;
	let y = data.y;
	// 处理截图框坐标超出图片的情况
	if (x < 0) {
		x = 0;
	}
	if (y < 0) {
		y = 0;
	}
	// 获取scale
	let transRatio = parseFloat(data.img.transform.substring(6, 13));
	// 放大比例 400是预览框宽
	let ratio = 400 / data.w;
	// y放大比例 225是预览框高 225是根据截图框宽高比计算的
	let inversey = 225 / data.h;
	// 拿到transform
	let trans = data.img.transform;
	let transx = parseFloat(trans.substr(trans.indexOf("-") + 1, 8));
	let transy = parseFloat(trans.substr(trans.lastIndexOf("-") + 1, 8));
	// 重新赋值
	data.img.height = ratio * h + "px";
	data.img.width = ratio * w + "px";
	data.x = ratio * x;
	data.y = ratio * y;
	data.img.transform = "scale(" + transRatio + ", " + transRatio + ") translate3d(-" + transx * ratio + "px, -" + transy * ratio + "px, 0px) rotateZ(0deg)";
	// 截图框大小
	data.w = previewWidth * ratio;
	data.h = previewHeight * inversey;
}

 经过计算之后，效果图如下

截图框                                                     预览框

左侧 135 * 76                             右侧 400 * 225 

拖动截图框，页面很流畅，没有卡顿

实现方法，已经贡献给作者，在vue-cropper     0.4.5版本中已经可以实现此功能

 三、图片跨域问题，需要后端配合，设置服务器 access-control-allow-origin: *

四、发现截图坐标误差问题，后经排查发现是，组件默认图片大小不能超过2000像素，根据业务需求改为3000像素