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 .

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

Hướng dẫn javascript library resize image - thư viện javascript thay đổi kích thước hình ảnh

.

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.
  • 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 đó:
  • 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;
    
    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;
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;

Kích thước ảnh gốc là 1207 x 1800. Giờ mình sẽ resize thành 301 x 450 nhé. Code của chúng ta như này:

Đâ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;
4

Hmm, 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;
8

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.

Đâ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é.
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

Resize 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;
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

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