前端压缩图片

//压缩图片
function render(src) {
    // 需要压缩的最大尺寸
    var MAX_SIZE = 500;
    //创建Image对象
    var image = new Image();
    image.onload = function () {
        console.log("old:"+image.width,image.height);
        //通过固定的宽高比压缩
        //宽大于高的情况
        if (image.width > MAX_SIZE && image.width >= image.height) {
            image.height *= MAX_SIZE / image.width;
            image.width = MAX_SIZE;
        }
        //宽小于高的情况
        if (image.height > MAX_SIZE && image.height > image.width) {
            image.width *= MAX_SIZE / image.height;
            image.height = MAX_SIZE;
        }
        console.log("new:"+image.width,image.height);
        var canvas = document.createElement("canvas");
        //获取2d画布
        var ctx = canvas.getContext("2d");
        canvas.width = image.width;
        canvas.height = image.height;
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        //绘制图片
        ctx.drawImage(image, 0, 0, image.width, image.height);
        //生成base64码
        base64Code = canvas.toDataURL("image/png");
        console.info(base64Code);
        //把base64码放入input
        $("#imgbase").val(base64Code);
        //预览图片
        $("#id_img_pers").attr("src",base64Code);
        sFileName=canvas.filename;
    };
    image.src = src;
}

$(function () {
    $("#imgInput").change(function (e) {
        var file = e.currentTarget.files[0];

        //创建一个文件读取的工具类
        var reader = new FileReader();
        //这里利用了闭包的特性，来保留文件名
        (function (x) {
            reader.onload = function (e) {
                //调用压缩文件的方法，具体实现逻辑见下面
                render(this.result, x);
            }
        })(file.name);
        //告诉文件读取工具类读取那个文件
        reader.readAsDataURL(file);
    });

});

注意：如果要存入数据库中，base64码中的“data:image/png;base64,”需要去掉

//截取data:image/png;base64,
sBaseImg=sBaseImg.substring(sBaseImg.indexOf(",") + 1);