Hướng dẫn javascript library resize image - thư viện javascript thay đổi kích thước hình ảnh
Bạn có biết là mình có thể resize ảnh ngay trên browser mà không cần dùng đến tool hay thư viện nào không . Show
Nội dung chính ShowShow
Nội dung chính ShowShowShow
Dùng canvasDùng const img = new Image(); img.onload = function() { const canvas const canvas = newCanvas(width, height); const ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 301, 450); document.body.appendChild(canvas); }; img.src = url; 7 .Nội dung chính ShowShow Canvas API cho phép chúng ta vẽ đồ họa 2D theo ý muốn trên trình duyệt. Nghĩa là chúng ta hoàn toàn có thể vẽ lại một hình nào đó với kích thước mong muốn. Hay nói cách khác là resize đó . Chúng ta hãy cùng xem method dùng để vẽ lại một hình ảnh trên canvas drawImage. 4 có thể có đến 9 parameter:
8, 0: là kích thước hình ảnh chúng ta muốn vẽ lại từ ảnh gốc. 1, 2: là vị trí trên canvas mà chúng ta muốn vẽ lại ảnh gốc. 3, 4: là kích thước trên canvas mà chúng ta muốn vẽ lại ảnh gốc.Vậy là chỉ cần set 3 và 4 thành kích thước mà chúng ta muốn resize là sẽ resize được ảnh. Hãy làm thử xem nhé. Ví dụ mình có hình này.
Đây là kết quả nè. 4Hmm, trông không ổn lắm nhỉ . Hình khá thiếu sắc nét so với ảnh gốc. Đó là do API này vốn không được thiết kế để resize ảnh với những thuật toán xịn như những tool chỉnh sửa ảnh hay thư viện phía server vì lý do performance. Vậy nên khi resize với kích thước khác biệt quá nhiều sẽ khiến cho hình ảnh bị răng cưa như vậy. Để hạn chế, chúng ta sẽ resize từ từ mỗi lần 1 tí để tránh kích thước mỗi lần resize cách nhau quá nhiều. Resize nhiều lần cũng có thể khiến chất lượng giảm đi, nhưng sẽ tránh được tình trạng răng cưa như trên. Mình sửa code 1 tí như này, mỗi lần sẽ resize còn 1 nửa, dần dần tới kích thước mình muốn. .Nội dung chính ShowShow Canvas API cho phép chúng ta vẽ đồ họa 2D theo ý muốn trên trình duyệt. Nghĩa là chúng ta hoàn toàn có thể vẽ lại một hình nào đó với kích thước mong muốn. Hay nói cách khác là resize đó . Chúng ta hãy cùng xem method dùng để vẽ lại một hình ảnh trên canvas drawImage. 4 có thể có đến 9 parameter:.Dùng const img = new Image(); img.onload = function() { const canvas const canvas = newCanvas(width, height); const ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 301, 450); document.body.appendChild(canvas); }; img.src = url; 7. 4 có thể có đến 9 parameter:. Chúng ta hãy cùng xem method dùng để vẽ lại một hình ảnh trên canvas drawImage. 4 có thể có đến 9 parameter: Trong đó:Giờ chúng ta dùng thử xem sao, code như này: 4Đây là kết quả: Trông khá hơn nhiều nhỉ . Cũng có 1 tính năng thử nghiệm hiện mới có trên Chrome có thể tùy chỉnh chất lượng resize là option imageSmoothingQuality của canvas context 2D. Mình thử dùng thì được kết quả ảnh như này: Cũng không khác cái trên là mấy nhỉ, mình thấy cái trên còn đẹp hơn ấy . Dùng const img = new Image(); img.onload = function() { const canvas const canvas = newCanvas(width, height); const ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 301, 450); document.body.appendChild(canvas); }; img.src = url; 7Vẫn là Canvas API nhưng lần này chúng ta có một method khác, vẫn là chỉ support trên chrome (Firefox có support nhưng lại là crop thay vì resize ). createImageBitmap cho phép tạo 8 để lưu dữ liệu ảnh từ ảnh gốc (image hoặc canvas). Trong quá trình tạo còn support tính năng resize nữa. Và đặc biệt là nó return một 9 nên chúng ta không phải lo nó sẽ làm browser bị lag khi đang render. Resize 1 cái ảnh thì vẫn chưa thấy gì khác biệt, nhưng bạn sẽ thấy sự khác biệt ở đoạn sau khi chúng ta resize một lúc nhiều ảnh. Chắc cũng nhờ vậy nên nó cho phép sử dụng những thuật toán resize xịn hơn.Giờ chúng ta dùng thử xem sao, code như này: 4Đây là kết quả:Trông khá hơn nhiều nhỉ . Cũng có 1 tính năng thử nghiệm hiện mới có trên Chrome có thể tùy chỉnh chất lượng resize là option imageSmoothingQuality của canvas context 2D. Mình thử dùng thì được kết quả ảnh như này: Cũng không khác cái trên là mấy nhỉ, mình thấy cái trên còn đẹp hơn ấy .Dùng const img = new Image(); img.onload = function() { const canvas const canvas = newCanvas(width, height); const ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 301, 450); document.body.appendChild(canvas); }; img.src = url; 7 8Vẫn là Canvas API nhưng lần này chúng ta có một method khác, vẫn là chỉ support trên chrome (Firefox có support nhưng lại là crop thay vì resize ). createImageBitmap cho phép tạo 8 để lưu dữ liệu ảnh từ ảnh gốc (image hoặc canvas). Trong quá trình tạo còn support tính năng resize nữa. Và đặc biệt là nó return một 9 nên chúng ta không phải lo nó sẽ làm browser bị lag khi đang render. Resize 1 cái ảnh thì vẫn chưa thấy gì khác biệt, nhưng bạn sẽ thấy sự khác biệt ở đoạn sau khi chúng ta resize một lúc nhiều ảnh. Chắc cũng nhờ vậy nên nó cho phép sử dụng những thuật toán resize xịn hơn.Đây là ảnh mình thử resize với một tool chỉnh sửa ảnh xịn để thấy chất lượng cũng không khác gì lắm. . Đây là code của tất cả các cách trên để bạn so sánh. Bạn mở full example lên so sánh cho dễ nhé. Kết quả có thể khác nhau tùy browser bạn dùng. Link codepen: https://codepen.io/thphuong/pen/qBOeMRb , code tách file gif thành frame như này nhé. 7Resize GIF Đây là kết quả:Trông khá hơn nhiều nhỉ . Cũng có 1 tính năng thử nghiệm hiện mới có trên Chrome có thể tùy chỉnh chất lượng resize là option imageSmoothingQuality của canvas context 2D. Mình thử dùng thì được kết quả ảnh như này: Cũng không khác cái trên là mấy nhỉ, mình thấy cái trên còn đẹp hơn ấy . 7Dùng const img = new Image(); img.onload = function() { const canvas const canvas = newCanvas(width, height); const ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 301, 450); document.body.appendChild(canvas); }; img.src = url; 7 Vẫn là Canvas API nhưng lần này chúng ta có một method khác, vẫn là chỉ support trên chrome (Firefox có support nhưng lại là crop thay vì resize ). createImageBitmap cho phép tạo |