Get base64 của Image javascript

chào các bác Hiện tại vì vài lý do mà mình phải chờ ảnh load xong mới download base64 của ảnh về được. nhưng cái khó là ảnh của mình lấy về dung lượng gấp 10 lần ảnh gốc. các bác ơi giúp mình với :( ảnh gốc -> size 216 KB

https://cdn.tgdd.vn/Files/2020/06/08/1261696/moi-tai-bo-hinh-nen-asus-rog-2020-moi-nhat-5_800x450.jpg

sau khi mình dùng canvas để xuất base64 -> size 560 KB

    var img = document.getElementById('Img1');
    var canvas = document.createElement('canvas');
    canvas.height=img.naturalHeight;
    canvas.width=img.naturalWidth;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight);
    var base64String = canvas.toDataURL();
  
    console.log(canvas);

thì dung lượng nó tăng gấp x2. nhưng những ảnh mình test 3M thì nó lên tận 30M luôn. nên mình lên đây xin thêm cách tối ưu :( lẫy sẵn trên google chrome thì base -> data:image/jpeg;base64,/9j/4RByRXhpZgAATU0AKgAAAAgABwESAAMAAAABAAEAAAEaAAUAAAABAAAAYgEbAAUAAAABAAAA... còn mình lấy thì data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAAHCCA nên nó ra số byte khác nhau quá