js压缩图片base64长度

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'));

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用 JavaScript 的 FileReader 和 Canvas API 实现图片压缩并转换为 base64。 首先,使用 FileReader 将图片读取为 Blob 对象,然后使用 Canvas API 将图片压缩为指定的宽度和高度,最后将压缩后的图片转换为 base64。 以下是一个示例代: ``` function compressAndConvertToBase64(file, maxWidth, maxHeight, callback) { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(event) { const img = new Image(); img.src = event.target.result; img.onload = function() { const canvas = document.createElement('canvas'); let width = img.width; let height = img.height; if (width > height) { if (width > maxWidth) { height *= maxWidth / width; width = maxWidth; } } else { if (height > maxHeight) { width *= maxHeight / height; height = maxHeight; } } canvas.width = width; canvas.height = height; const ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0, width, height); const compressedBase64 = canvas.toDataURL('image/jpeg', 0.7); callback(compressedBase64); } } } ``` 其中,参数 `file` 是要压缩图片文件,`maxWidth` 和 `maxHeight` 分别是压缩后的图片最大宽度和高度,`callback` 是压缩完成后的回调函数压缩后的图片质量可以通过 `toDataURL` 方法的第二个参数来控制,值越小表示压缩后的图片质量越低。 使用示例: ``` const fileInput = document.querySelector('#file-input'); fileInput.addEventListener('change', function() { const file = fileInput.files[0]; compressAndConvertToBase64(file, 800, 600, function(base64) { console.log(base64); }); }); ``` 以上代可以将选择的文件压缩为最大宽度为 800、最大高度为 600 的图片,并将压缩后的图片转换为 base64输出到控制台。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值