js压缩图片base64长度

最新推荐文章于 2025-05-08 11:48:25 发布

挑灯流浪

最新推荐文章于 2025-05-08 11:48:25 发布

阅读量6.3k

点赞数 1

CC 4.0 BY-SA版权

文章标签：函数图片压缩

本文链接：https://blog.youkuaiyun.com/yuhaowan/article/details/53502129

本文介绍了一种使用JavaScript实现的图片压缩方法，并将压缩后的图片以Base64格式进行上传的技术细节。通过调整图片的高度和宽度比例，确保图片在保持清晰度的同时减小文件大小。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var myCanvas=$('.img-container > img').cropper('getCroppedCanvas');
(function (base64){
    var image = new Image(),newBase64,MAX_HEIGHT = 160;
    image.onload = function(){
        var canvas = document.getElementById("myCanvas");
        if(image.height > MAX_HEIGHT) {
            image.width *= MAX_HEIGHT / image.height;
            image.height = MAX_HEIGHT;
        }
        var ctx = canvas.getContext("2d");
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        canvas.width = image.width;
        canvas.height = image.height;
        ctx.drawImage(image, 0, 0, image.width, image.height);
        newBase64=canvas.toDataURL('image/jpeg',0.4);
　　　　　　//上传base64编码
        $.ajax({
            type: "post",
            url: '地址',
            data: {
                
            },
            success: function (msg) {
               42             },
            error: function (msg) {
                tips.error('上传图片服务出错，请稍候再试。')
            }
        });
        console.log('base64Size',newBase64.length/1024);50     };
    image.src = base64;
})(myCanvas.toDataURL('image/jpeg'));