vue-cropper的使用

链接: 文档.
链接: 实例.

1. 安装npm install vue-cropper
2. 简单的示例：

// 组件内使用
<template>
<vueCropper
	ref="cropper"
	:img="option.img"
	:outputSize="option.size"
	:outputType="option.outputType"
	:autoCrop="option.autoCrop"
></vueCropper>
</template>
<script	>

</script>	
import { VueCropper }  from 'vue-cropper' 
export default{
	data:{
		return{
			option:{
			img:"",//图片链接,绝对路径
			size:1,//裁剪生成图片的质量
			outputType:"png",//裁剪生成图片的格式
			autoCrop:true,//是否默认生成截图框
			},
		}
	},
	components: {
		VueCropper,
	},
}
	

图片跨域问题

因为我的图片是本地上传到服务器，服务器返回图片的链接，在显示要截取的图片时遇到了跨域问题，解决办法是将图片转换为base64格式。
（注）获取本地上传的文件将其转化为base64格式，再获取截取后的图片，其格式也为base64，将其转化为File格式，发送给服务器即可。

1. 图片转base64

//file为图片文件
function filetoBase64(file){
	let reader = new FileReader();
	let base64 = "";
	reader.readAsDataURL(file);
	reader.onload=()=>{
		base64 = reader.result;
	}
	return base64;
}

2. base64转图片

function dataURLtoFile(dataurl, filename = 'file') {
  let arr = dataurl.split(',')
  let mime = arr[0].match(/:(.*?);/)[1]
  let suffix = mime.split('/')[1]
  let bstr = atob(arr[1])
  let n = bstr.length
  let u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new File([u8arr], `${filename}.${suffix}`, {
    type: mime
  })
}

3. file格式转成文件流，以图片转换为例：

function fileToFormData(file){
	const fd = new FormData();
	fd.append("字段名",file,"file的文件名");
	//还可以附带其他参数：
	fd.append("字段名2",[参数2]);
	//...
	return fd;
}

4. 使用elemen-ui的上传组件与vue-cropper插件结合，实现如下：

<template>
<el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-change="imgChange"
  :auto-upload="false">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
<vueCropper
	ref="cropper"
	:img="option.img"
	:outputSize="option.size"
	:outputType="option.outputType"
	:autoCrop="option.autoCrop"
></vueCropper>
<el-button size="small" type="primary" @click="startCrop">确定</el-button>
</template>
<script	>

</script>	
import { VueCropper }  from 'vue-cropper' 
export default{
	data:{
		return{
			option:{
			img:"",//图片链接,绝对路径
			size:1,//裁剪生成图片的质量
			outputType:"png",//裁剪生成图片的格式
			autoCrop:true,//是否默认生成截图框
			},
		}
	},
	components: {
		VueCropper,
	},
	methed:{
	filetoBase64(file){
		let reader = new FileReader();
		let base64 = "";
		reader.readAsDataURL(file);
		reader.onload=()=>{
			base64 = reader.result;
		}
		return base64;
	},
	imgChange(file){
		const {raw} = file;
		this.option.img = this.filetoBase64(raw);
	},
	startCrop(){
	//获取截图的 base64 数据
		this.$refs.cropper.getCropData(data=>{
			console.log("这就是截图后图片的base64数据:",data);
		});
	},
	},
}