图片转base64、判断图片大小、图片压缩、图片上传

文章主要介绍 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字符串。

注：图片转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;
    // 图片大小超过 5M ，压缩处理
    if (size > 1024 * 5000 ) {
   
        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; 
                }  
            }
            // 生成canvas
            var canvas = document.createElement("canvas"), drawer = canvas.getContext("2d");
            //按最大高度等比缩放
            if (scale != 1) {
   
                img.width *= scale;
                img.height *= scale;
            }
            // 复制canvas宽高
            canvas.width = img.width;
            canvas.height = img.width * (img.height / img.width);
            // 绘制图像
            drawer.drawImage(img, 0, 0, canvas.width, canvas.height);
            // 使用toDataURL生成图片base64
            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){
   
    // 走接口上传
}