Javascript常用方法 — 图片压缩机制

/**

* 图片压缩机制

* @name imgBase64

* */

function imgBase64(file, callback) {

    // 看支持不支持FileReader

    if (!file || !window.FileReader) return;

    // 创建一个 Image 对象

    let image = new Image();

    // 绑定 load 事件处理器，加载完成后执行

    image.onload = function () {

        // 创建 canvas DOM 对象

        let canvas = document.createElement("canvas");

        // 返回一个用于在画布上绘图的环境, '2d' 指定了您想要在画布上绘制的类型

        let ctx = canvas.getContext("2d");

        // 如果高度超标 // 参数，最大高度

        let MAX_HEIGHT = 3000;

        if (image.height > MAX_HEIGHT) {

            // 宽度等比例缩放 *=

            image.width *= MAX_HEIGHT / image.height;

            image.height = MAX_HEIGHT;

        }

        // 获取 canvas的 2d 环境对象,

        // 可以理解Context是管理员，canvas是房子

        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // 重置canvas宽高

        canvas.width = image.width;

        canvas.height = image.height;

        // 将图像绘制到canvas上

        ctx.drawImage(image, 0, 0, image.width, image.height);



        let maxSize = 1 * 1024; // 2M (单位KB)

        let fileSize = file.size / 1024; // 图片大小 (单位KB)

        let uploadSrc, uploadFile;

        if (fileSize > maxSize) {

            // 如果图片大小大于maxSize，进行压缩

            uploadSrc = canvas.toDataURL('image/jpeg', maxSize / fileSize);

        } else {

            uploadSrc = image.src;

        }

        callback(uploadSrc);

    };

    if (/^image/.test(file.type)) {

        // 创建一个reader

        let reader = new FileReader();

        // 将图片将转成 base64 格式

        reader.readAsDataURL(file);

        // 读取成功后的回调

        reader.onload = function () {

            // 设置src属性，浏览器会自动加载。

            // 记住必须先绑定事件，才能设置src属性，否则会出同步问题。

            image.src = this.result;

        };

    }

}