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 .
Nội dung chính ShowShow
- Dùng canvas
- 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
- 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
Nội dung chính ShowShowShow
- Dùng canvas
- 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
- 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
Dùng canvas
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
.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.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;
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: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;
void ctx.drawImage[image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight];
- Trong đó:
6,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: là vị trí trên cùng bên trái của ảnh gốc mà chúng ta muốn vẽ lại.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;
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;
8, 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;
0: là kích thước hình ảnh chúng ta muốn vẽ lại từ ảnh gốc.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;
1, 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;
2: là vị trí trên canvas mà chúng ta muốn vẽ lại ảnh gốc.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;
3, 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;
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 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;
3 và 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;
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.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;
Đây là kết quả nè.
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;
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.
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;
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
.
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;
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. 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;
4 có thể có đến 9 parameter:void ctx.drawImage[image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight];
Trong đó:Giờ chúng ta dùng thử xem sao, code như này:
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;
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
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
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;
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 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;
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:
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;
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
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;
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
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;
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 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;
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: //codepen.io/thphuong/pen/qBOeMRb
, code tách file gif thành frame như này nhé.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;
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 .
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;
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