文章主要介绍 js 实现压缩上传图片base64长度功能，三大框架（React、Vue、Angular）可借此参考。
逻辑功能包含图片转base64、判断图片大小、图片压缩，这个方法真实可用，已实践。
第1步，调用 FileReader 的 reader.readAsDataURL(img)， 在其onload事件中, 将用户选择的图片读入 Image对象。
第2步，在image对象的 onload 事件中, 通过 canvas 的 canvas.getContext('2d') 的 drawImage 方法, 将Image 改变大小绘制到canvas上.
第3步， 通过 canvas.toDataURL("image/jpeg", 1), 将图片变成base64字符串。
html
<input id="sendImage" title="this is imgUpload" type="file" accept="image/* "onchange="imgChange(this)" />
<img id="img_show" src="">
js
function imgChange(e){
if (e.files.length != 0) {
var file = e.files[0],
fileType = file.type,
reader = new FileReader();
if (!reader) {
e.value = '';
return;
};
reader.onload = function(ev) {
var result = ev.target.result;
var data = img_compress(file, result);
// 接下来可以做图片展示 -》图片上传
img_show(data);
img_upload(data);
};
reader.readAsDataURL(file);
}
}
/**
* 图片大小判断、图片压缩处理
* @param file，图片信息
* @param result，img base64
*/
function img_compress(file, result) {
var size = file.size;
var fileType = file.type;
if(size > 1024 * 5000 ){ // >5M
var img = new Image();
img.src = result;
img.onload = function(e){
var scale = 1;
if((<any>this).width > 300 || (<any>this).height > 300){
if((<any>this).width > (<any>this).height){
scale = 300 / (<any>this).width;
}else{
scale = 300 / (<any>this).height;
}
}
var canvas = document.createElement("canvas"), drawer = canvas.getContext("2d");
if(scale!=1) {//按最大高度等比缩放
img.width *= scale;
img.height *= scale
}
canvas.width = img.width;
canvas.height = img.width * (img.height / img.width);
drawer.drawImage(img, 0, 0, canvas.width, canvas.height);
var tmp_code = result = canvas.toDataURL(fileType);
if(tmp_code!='data:,'){
result = tmp_code;
}
};
}
return result;
}
/**
* 图片展示，处理页面展示图片
* @param result，img base64
*/
function img_show(img_base64){
if(img_base64 != 'data:,'){
$("#img_show").val(image_base64);
}
}
/**
* 图片上传，将base64通过接口上传
* @param result，img base64
*/
function img_upload(image_base64){
// 走接口上传
}
