image-conversion+canvas图片拼接及压缩

1. 图片拼接用的是canvas 图片压缩用的是image-conversion插件
2. 引入image-conversion插件
   cnpm i image-conversion -S
3. 导入固定拼接的图片
   import defaultHeadPng from ‘@/assets/img/normalPic.png’
4. 拼接图片 js

// 生成符合条件的图片实例
filesToInstances(files, callback){
	const length = files.length; // 图片路径个数
	let instances = []; // 文件实例数组
	let finished = 0; // 转换成功个数
	// 遍历图片路径数组
	files.forEach((file, index) => {
		const image = new Image();
		image.src = file; // 赋值图片路径
		image.onload = () => {
			// 图片实例化成功后存起来
			instances[index] = image;
			finished++;
			if (finished === length) { // 如果全部完成转换，调用回调函数
				callback(instances);
			}
		}
	});
},
// 两张图片高度相加  拼接
draws(images = [], callback) {
	const width = 300;
	// 拼出来的图片的质量，0-1之间，越大质量越好
	const encoderOptions = 1;
	const heights = images.map(item => width / item.width * item.height)
	const canvas = document.createElement('canvas')
	canvas.width = width
	canvas.height = heights.reduce((total, current) => total + current)
	const context = canvas.getContext('2d')
	let y = 0
	images.forEach((item, index) => {
		const height = heights[index]
		context.drawImage(item, 0, y, width, height)
		y += height
	})
	callback(canvas.toDataURL('image/png', encoderOptions))
},
ImgJoin (images = [], callback) {
	this.filesToInstances(images, instance => {
		this.draws(instance,data => {callback(data)})
	})
},
// base64转码为文件；
dataURLtoFile(dataurl, filename) {//将base64转换为文件
	var 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);
	}
	//  将base64转为blob形式，兼容IE下new File 方法报错
	let blob = new Blob([u8arr], {type:mime})
		// var file =blob;
		// var file = new File([blob], filename+'.'+type, {type:mime, lastModified: Date.now()});
		blob.lastModified = Date.now()
		blob.name = filename
	return blob
},

5. 开始拼接压缩
   • 先读取图片
   • 并将两张图片拼接起来
   • 压缩

//获取文件
var file = document.getElementById('activityInfoFile').files[0];
var name = file.name
//创建读取文件的对象
var reader = new FileReader();
//创建文件读取相关的变量
var imgFile;
//为文件读取成功设置事件
reader.readAsDataURL(file)
reader.onload = (e)=>{
	imgFile = e.target.result;
	this.ImgJoin([defaultHeadPng, imgFile], (data)=>{
	let ifile = this.dataURLtoFile(data, new Date().getTime()+".png");
	// 因为size 和width height 不能同时起作用
	imageConversion.compressAccurately(ifile, { // 第一次压缩是width height
		// size: 70,    //The compressed image size is 100kb
		// accuracy: 0.2,//the accuracy of image compression size,range 0.8-0.99,default 0.95;
	    type: ifile.type,
	    width: 350,
	    height: 300,
	}).then(res2=>{
		imageConversion.compressAccurately(res2, { // 第二次压缩是size kb 大小
			size: 60
		}).then(res=>{ // 压缩后的结果是blob类型
			
			})
		})
	})
}

6. 压缩后的图片类型blob如果不符合条件 可以进行转换

//创建读取文件的对象
var reader = new FileReader();
//创建文件读取相关的变量
var imgFile;
//为文件读取成功设置事件
reader.onload=function(e) {
	let height='';
	let width='';
	imgFile = e.target.result;
	let img = new Image();
	img.src = e.target.result;//获取编码后的值,也可以用this.result获取
	imageConversion.dataURLtoFile(imgFile,'image/png').then(res=>{
		console.log(res) // blob 转换为file类型
		self.upload(res,name)
	})
	img.onload = function () { // 获取到凭借及压缩后的图片 imgFile
		height=this.height;
		width=this.width;
		self.imgFile=imgFile
	}
};
//正式读取文件
reader.readAsDataURL(res);

7. 上传图片

upload(files, name){
	let fileFormData = new FormData();
	let file = new window.File([files], name, {type: files.type})
	fileFormData.append('file', file);// formData.append(name, value);
	let requestConfig = {
	  headers: {
	    'Content-Type': 'multipart/form-data'
	  },
	}
	this.$http.post(`file/upload`, fileFormData, requestConfig).then(()=>{
	})
}