背景
作为一位前端工作人员，置信人人在开辟体系的时刻，常常有碰到须要这么一种需求，就是须要为用户保留上传的图片，许多小白碰到这个题目的时刻，都邑虎躯一震，认为会是一个辣手的题目，当你读完这篇文章的时刻，你会发明都是你瞎操纵了，原形就是这么简朴，下面进入正题：
图片文件上传
如今许多项目实如今体系内保留图片，大多数只是在体系数据库内保留对应图片的url，而现实的图片资本会放在阿里等图片服务器上，固然，也有一些项目会挑选在本身的数据库中保留图片base64花样的字符串，下面讲一些这两种要领的详细完成，完成以一个vue实例来申明：
起首，我们先要从用户那边猎取图片资本，这个时刻，我们须要用到html的<input>标签，type值为file,指定input标签为文件范例的表单输入，并将其 accept属性设置为”image/*”,指定只接收图片资本的文件；
<input type="file" accept="image/*" />接下来，我们就要猎取用户挑选的文件，当用户挑选完文件的时刻，就会触发input标签的change事宜，我们能够经由历程监听该事宜，并猎取事宜对象event，来猎取图片文件：
<input accept="image/*" style="display: none;" :name="'img-'+index" type="file" :id="'img-'+index"
@change="fileChange($event,index)"/>当点击猎取文件后，我们能够经由历程$event对象，猎取$event.target.files[0]来猎取图片资本文件对象，至于为何要加索引值，是由于文件上传input表单是支撑多文件上传的，只须要在input标签上增添multiple属性；我们能够看看下图文件对象的一些属性：
视察后发明，文件对象中存在一个size属性，表明图片的大小，我们能够经由历程考证该属性的值是不是为空，来到达磨练文件是不是已被我们猎取到指定操纵；
fileChange(el, index) {
if (!el.target.files[0].size) return;
}至此，我们已猎取到我们想要的文件对象，接下来，我们完成图片紧缩功用，命名为compress函数：
图片紧缩
起首，我们要对我们的图片资本举行紧缩，第一步肯定是猎取图片资本呐，猎取后对其简朴的校验；
compress(event) {
var file = event.target.files;
var reader = new FileReader(), imgFile = file[0];
if (imgFile.type.indexOf('image') == 0) {
reader.readAsDataURL(imgFile);
} else {
this.$Message.infor('文件范例仅为图片')
}
}这里能够有些人对FileReader对象不相识，FileReader 对象许可Web应用程序异步读取存储在用户盘算机上的文件（或原始数据缓冲区）的内容，运用 File 或 Blob 对象指定要读取的文件或数据，这里我们主假如用于监听onload来推断是不是读取完成，读取完成时，我们把读取的结果赋值给我们新创建的Image对象，作为背面紧缩的对象；这是时刻，我们会发明，我们读取后的结果现实上是一个base64花样的字符串
（很长..,我就意义意义）
此时，我们会发明，base64的字符串在这里就涌现了，它能够作为一个值复制给<img>标签的src属性，一样能够到达衬着图片的目的，因而也有人挑选保留该花样的图片；然则着并不是主流的体式格局，同时也会形成我们数据库过于冗余；
compress(event) {
var file = event.target.files;
var reader = new FileReader(), imgFile = file[0];
if (imgFile.type.indexOf('image') == 0) {
reader.readAsDataURL(imgFile);
} else {
this.$Message.infor('文件范例仅为图片')
}
let img = new Image();
reader.onload = function (e) {
img.src = e.target.result;
};
}图片举行紧缩，我们主假如应用canvas是完成该功用，经由历程canvas.getContext(‘2d’).drawImage()要领从新绘制图片，并应用canvas.toDataURL(type, encoderOptions)要领返回一个包括图片展现的 dataURI，type为图片花样，encoderOptions为图片的清晰度，0到1递增，这个紧缩的历程不难理解，思绪就是猎取图片的高宽，盘算其像素大小，并与以一个本身设定的界限值举行比较，来看一下我们大小是不是须要紧缩，如例子中的ratio示意图片宽高的紧缩比例 ，我们是能够完成不改宽高来修正图片的文件大小，经由历程drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)从新绘制图片，他能够传进九个参数,离别代表着绘制到上下文的元素，源图象的矩形挑选框的左上角 X 坐标，源图象的矩形挑选框的左上角 Y 坐标，源图象的矩形挑选框的宽度，源图象的矩形挑选框的高度，目的画布的左上角在目的canvas上 X 轴的位置，目的画布的左上角在目的canvas上 Y 轴的位置，在目的画布上绘制图象的宽度，在目的画布上绘制图象的高度；
全部函数完成以下：
compress(event) {
var file = event.target.files;
var reader = new FileReader(), imgFile = file[0];
if (imgFile.type.indexOf('image') == 0) {
reader.readAsDataURL(imgFile);
} else {
this.$Message.infor('文件范例仅为图片')
}
let img = new Image();
reader.onload = function (e) {
img.src = e.target.result;
};
var imgP = new Promise((resolve, reject) => {
img.onload = () => {
var canvas = document.createElement("canvas");
var ctx = canvas.getContext('2d');
// 瓦片canvas
var tCanvas = document.createElement("canvas");
var tctx = tCanvas.getContext("2d");
var initSize = img.src.length;
var width = img.width;
var height = img.height;
//图片像素大于400万像素，盘算紧缩到400万以下
var ratio;
if ((ratio = width * height / 4000000) > 1) {
ratio = Math.sqrt(ratio);
width /= ratio;
height /= ratio;
} else {
ratio = 1;
}
canvas.width = width;
canvas.height = height;
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
//假如图片太大则运用瓦片绘制
var count;
if ((count = width * height / 1000000 > 1)) {
count = ~~(Math.sqrt(count) + 1);//盘算分红的瓦片数
var nw = ~~(width / count);
var nh = ~~(height / count);
tCanvas.width = nw;
tCanvas.height = nh;
for (var i = 0; i < count; i++) {
for (var j = 0; j < count; j++) {
tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);
ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh)
}
}
} else {
ctx.drawImage(img, 0, 0, width, height)
}
//举行最小紧缩
var ndata = canvas.toDataURL('image/jpeg', 0.3);
tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
resolve(ndata)
}
})
return Promise.all([imgP])
}图片拼接
须要注重的一点了，上面紧缩的历程运用了瓦片绘制，能够会致使拼接历程当中不紧凑而发作一条间隙，这个只须要调解一下绘制瓦片的坐标位置即可，该头脑一样能够用于处置惩罚图片拼接的题目，可按照上面思绪举行拼接，这里就不再举例子申清楚明了，瓦片绘制就是图片拼接的历程；
图片扭转
紧缩和拼接都讲完啦，在对图片举行处置惩罚，人人都有本身的见解了，也许你们还会这么说，那假如我上传图片的时刻，像把那些横着排的照片，也放成竖起来，要怎样处置惩罚，竟调解图片安排的方向，该怎样处置惩罚，这就须要用到canvas的rotate要领去完成了，老要领，我们先猎取图片对象，由于之前的紧缩是放回一个promise对象，data参数为img的base64花样，所以我们把扭转函数的参数定义为图片泉源；
rotate(imgData) {
var img = new Image();
img.src = imgData;
var imgR = new Promise((resolve, reject) => {
img.onload = ()=>{
console.log(img.width)
console.log(img.naturalWidth)
}
})
},这里须要注重的是，每次我们新建一个image对象，想要猎取其一些相应的属性值，肯定要在onload要领中，确保图片已加载终了，上面的console中输出了两个值，width和naturalWidth，在某中条件下，他们会是相称的，比方我们上面，也会存在不一致的时刻，由于naturalWidth返回的依然是图片的实在尺寸，而width返回的是给img标签划定的尺寸，所以我们须要猎取的是naturalWidth；
rotate(imgData) {
var img = new Image();
img.src = imgData;
var imgR = new Promise((resolve, reject) => {
img.onload = () => {
let degree = 0, drawHeight, drawWidth;
drawHeight = img.naturalHeight;
drawWidth = img.naturalWidth;
let maxSide = Math.max(drawWidth, drawHeight);
if (maxSide === drawWidth) {//推断须要扭转的角度
degree = 90;
} else {
degree = 360;
}
var canvas = document.createElement('canvas');
canvas.width = drawWidth;
canvas.height = drawHeight;
var context = canvas.getContext('2d');
context.translate(drawWidth/2,drawHeight/2)//这一行和下下一行的作用是修正挑选中间
context.rotate(degree*Math.PI/180);//扭转图片
context.translate(-drawWidth/2,-drawHeight/2)//这一行和上上一行的作用是修正挑选中间
context.drawImage(img, 0, 0, drawWidth, drawHeight);
var ndata = canvas.toDataURL('image/jpeg', 1);
context.width = context.height = 0;
resolve(ndata)
}
})
return Promise.all([imgR])
}扭转结果以下，宽大于高的，等于横排的图片，就会发作扭转；
总结
在vue下应用canvas完成上述功用后，发清楚明了canvas在图片处置惩罚这块的壮大功用，关于前端上传图片机能的优化会有很大的协助；经由上述的时候，发明要完成用户的上传图片前的裁剪功用，以及能够应用canvas来完成，主假如应用drawImage掌握裁剪的长度，出发点坐标就能够完成，实在好用！
