JavaScript实现图像压缩的方法

// 获取 canvas 元素
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// 创建 Image 对象
var img = new Image();
img.src = 'image.jpg';
img.onload = function() {
  // 绘制图像到 canvas
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0, img.width, img.height);
  
  // 使用 toDataURL 方法压缩图像
  var dataUrl = canvas.toDataURL('image/jpeg', 0.5);
  
  // 使用新的 Data URL 更新图像
  img.src = dataUrl;
}

var maxSize = 100 * 1024; // 最大文件大小为100KB
var img = new Image();
img.src = base64Image;
img.onload = function () {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var width = img.width;
    var height = img.height;
    canvas.width = width;
    canvas.height = height;
    ctx.drawImage(img, 0, 0, width, height);
    var quality = 0.8;
    var resultBlob;
    do {
        canvas.toBlob(function (blob) {
            resultBlob = blob;
        }, 'image/jpeg', quality);
        quality -= 0.1;
    } while (resultBlob.size > maxSize && quality > 0.1);
    // do something with resultBlob, like create a new image from it or save it.
}

// 计算base64编码图片大小
function getBase64ImageSize(base64) {
    const indexBase64 = base64.indexOf('base64,');
    if (indexBase64 < 0) return -1;
    const str = base64.substr(indexBase64 + 6);
    // 大小单位：字节
    return (str.length * 0.75).toFixed(2);
}


function compressedImage(path, obj, maxSize, callback) {
    let img = new Image();
    img.src = imgPath;
    img.onload = function () {
        const that = this;
        // 默认按比例压缩
        let w = that.width,
            h = that.height,
            scale = w / h;
        w = obj.width || w;
        h = obj.height && obj.height * (w / scale) || h;
        // 生成canvas
        let canvas = document.createElement('canvas');
        let ctx = canvas.getContext('2d');

        canvas.width = w;
        canvas.height = h;

        ctx.drawImage(that, 0, 0, w, h);
        // 图像质量，默认图片质量为0.8
        let quality = 0.8;
        if (obj.quality && obj.quality > 0 && obj.quality <= 1) {
            quality = obj.quality;
        }
        // quality值越小，所绘制出的图像越模糊
        let newBase64Image = canvas.toDataURL('image/jpeg', quality);

        let fileSize = getBase64ImageSize(newBase64Image);
        if (fileSize > maxSize && quality > 0.01) {
            if (quality > 0.05) {
                quality = quality - 0.05;
            } else {
                quality = 0.01;
            }
            compressedImage(imgPath, {
                quality: quality
            }, maxSize, callback);
            return;
        }

        // 回调函数返回压缩后的 base64图像
        callback(newBase64Image);
    }
}

// 在主线程中
var worker = new Worker('worker.js');
worker.onmessage = function(e) {
    var compressedImage = e.data;
    // do something with compressedImage
};
worker.postMessage({
    image: base64Image,
    maxSize: 100 * 1024 // 最大文件大小为100KB
});

// worker.js
self.onmessage = function(e) {
    var image = e.data.image;
    var maxSize = e.data.maxSize;
    var img = new Image();
    img.src = image;
    img.onload = function() {
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        var width = img.width;
        var height = img.height;
        canvas.width = width;
        canvas.height = height;
        ctx.drawImage(img, 0, 0, width, height);
        var quality = 0.8;
        var resultBlob;
        do {
            canvas.toBlob(function(blob) {
                resultBlob = blob;
                self.postMessage(resultBlob);
            }, 'image/jpeg', quality);
            quality -= 0.1;
        } while (resultBlob.size > maxSize && quality > 0.1);
    }
};