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 Code: 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 Code: 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á
Hàm toData url nó có 2 tham số: định dạng ảnh, mặc định là png Chất lượng ảnh, là số từ 0 tới 1, Càng gần 1 thì ảnh càng chi tiết Sẽ thế nào nếu bác sửa đoạn code trên thành như này nhỉ Code: var base64String = canvas.toDataURL('image/jpeg', 1.0); Đọc thêm tại https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL#syntax --- Double Post Merged, Dec 13, 2021, Original Post Date: Dec 13, 2021 --- Bên trên là giải pháp cho câu hỏi của bác thôi, nhưng em thấy cách bác tiếp cận hơi thủ công, mình hoàn toàn có thể vọc xíu xong chôm cách nó tạo ảnh, sau đó lấy hẳn file binary mà, vừa nhanh lại còn nhẹ
cám ơn bác nhiều <3 để mình vọc tiếp --- Double Post Merged, Dec 13, 2021 --- mình đã thử thì file gốc có độ dài là 293 587. để jpeg là 358 067 để png là 613 942 =)) giờ mình làm nén ảnh nữa là đỡ mệt rồi =)
