Thay đổi kích thước hình ảnh JavaScript

Thật dễ dàng để hiển thị phiên bản đã thay đổi kích thước hoặc cắt xén của hình ảnh trên trang web bằng CSS. Tuy nhiên, điều này không thay đổi dữ liệu hình ảnh gốc. Điều gì sẽ xảy ra nếu bạn muốn tạo một phiên bản hình ảnh đã cắt hoặc thay đổi kích thước thực tế cho khách truy cập hoặc khách hàng của mình?

Chúng tôi đã xuất bản một số hướng dẫn về cách tạo hình thu nhỏ của hình ảnh bằng PHP hoặc áp dụng cắt xén, thay đổi kích thước và các bộ lọc khác bằng PHP. Trong hướng dẫn này, bạn sẽ học cách cắt hoặc thay đổi kích thước hình ảnh bằng JavaScript

Đây là bản trình diễn trực tiếp về mã cắt xén hình ảnh của chúng tôi đang hoạt động

Và đây là một ví dụ về mã thay đổi kích thước

Những điều cần ghi nhớ

Chúng tôi sẽ cần quyền truy cập vào dữ liệu hình ảnh gốc để tạo phiên bản mới của hình ảnh được cắt hoặc thay đổi kích thước theo các kích thước cụ thể. Chúng ta có thể làm điều đó với sự trợ giúp của phần tử

// Referencing an Image loaded in the DOM

Phần tử HTML canvas đã xuất hiện từ lâu và chúng ta có thể sử dụng nó để vẽ tất cả các loại đồ họa. Có hàng trăm thư viện mà bạn có thể sử dụng để tạo biểu đồ, vectơ và hoạt ảnh bằng API canvas. Chúng tôi sẽ sử dụng API trong hướng dẫn này để tạo ảnh cắt và thay đổi kích thước hình ảnh của bạn

Một điều mà bạn cần lưu ý là để có quyền truy cập vào dữ liệu hình ảnh để thao tác với canvas yêu cầu bạn phải có hình ảnh trên cùng một máy chủ hoặc sử dụng thuộc tính

// Referencing an Image loaded in the DOM

1. Tải dữ liệu hình ảnh

Điều đầu tiên chúng ta cần làm là tải dữ liệu hình ảnh của mình. Bạn có thể làm điều đó bằng cách tham chiếu một hình ảnh đã được tải trong DOM hoặc bằng cách tạo một hình ảnh mới bằng cách sử dụng hàm tạo

// Referencing an Image loaded in the DOM

1

const originalImage = document.querySelector("img.puppy");

3

4

// Using the Image() constructor

5

let imagePath = 'images/puppy.jpg';

6

// Referencing an Image loaded in the DOM

// Referencing an Image loaded in the DOM

2. Vẽ hình ảnh trên Canvas

Bây giờ chúng ta sẽ sử dụng trình lắng nghe sự kiện để đợi hình ảnh tải và sau đó lấy chiều rộng và chiều cao ban đầu của nó. Chiều rộng và chiều cao này được sử dụng để xác định tỷ lệ khung hình của hình ảnh. Có quyền truy cập vào tỷ lệ khung hình sẽ cho phép chúng tôi thay đổi kích thước hình ảnh mà không kéo giãn hình ảnh theo bất kỳ hướng nào, để chúng tôi có thể tránh được bất kỳ biến dạng nào

Phương thức

// Referencing an Image loaded in the DOM

1

// Referencing an Image loaded in the DOM

// Referencing an Image loaded in the DOM

3

// Referencing an Image loaded in the DOM

Chúng tôi sẽ sử dụng phiên bản thứ hai cho chức năng thay đổi kích thước và phiên bản thứ ba để thực hiện cắt xén. Tham số đầu tiên là thành phần hình ảnh mà bạn muốn vẽ trên canvas. Các tiền tố

// Referencing an Image loaded in the DOM

// Referencing an Image loaded in the DOM

// Referencing an Image loaded in the DOM

// Referencing an Image loaded in the DOM

// Referencing an Image loaded in the DOM

// Referencing an Image loaded in the DOM

2

Tôi đã đánh dấu các giá trị nguồn trên hình ảnh con chó con từ Pixabay mà chúng tôi sẽ cắt xén để cung cấp cho bạn ý tưởng về ý nghĩa của các tham số này

Góc trên bên trái của hình ảnh được coi là (0, 0) và góc dưới bên phải tương ứng với (

2

2

2

2

// Referencing an Image loaded in the DOM

// Referencing an Image loaded in the DOM

Thay đổi kích thước hình ảnh

Giả sử chúng ta muốn thay đổi kích thước hình ảnh con chó con sao cho nó chỉ rộng 500 pixel. Chúng tôi có thể sử dụng mã JavaScript sau để thay đổi kích thước hình ảnh của mình. Chúng tôi sẽ sửa đổi mã này sau để trở thành một chức năng có thể gọi được để chiều rộng không còn được mã hóa cứng và chiều cao có thể được đặt tùy ý khi người dùng không muốn giữ nguyên tỷ lệ khung hình

1

2

3

2

4

2

5

// Referencing an Image loaded in the DOM

const originalImage = document.querySelector("img.puppy");

const originalImage = document.querySelector("img.puppy");

const originalImage = document.querySelector("img.puppy");

const originalImage = document.querySelector("img.puppy");

const originalImage = document.querySelector("img.puppy");

const originalImage = document.querySelector("img.puppy");

const originalImage = document.querySelector("img.puppy");

const originalImage = document.querySelector("img.puppy");

const originalImage = document.querySelector("img.puppy");

Bên trong trình xử lý sự kiện của chúng tôi, chúng tôi sử dụng thuộc tính

2

2

2

2

Các giá trị này cũng được sử dụng để đặt chiều rộng và chiều cao của canvas. Chúng tôi chỉ cần sử dụng phương pháp

// Referencing an Image loaded in the DOM

Cắt hình ảnh

Bạn có thể nhớ lại từ cuộc thảo luận trước đây của chúng ta rằng việc gọi phương thức

// Referencing an Image loaded in the DOM

// Referencing an Image loaded in the DOM

1

2

3

4

4

5

6

4

const originalImage = document.querySelector("img.puppy");

const originalImage = document.querySelector("img.puppy");

// Using the Image() constructor

const originalImage = document.querySelector("img.puppy");

// Using the Image() constructor

const originalImage = document.querySelector("img.puppy");

Chúng tôi sẽ cải thiện mã này sau để các giá trị không được mã hóa cứng mà được lấy từ một hàm có thể gọi được.

2

2

3. Đang tải xuống hình ảnh

Trừ khi mục tiêu chỉ đơn giản là hiển thị hình ảnh đã cắt hoặc thay đổi kích thước trên trang web, bạn cũng có thể muốn cung cấp cho người dùng khả năng tải xuống hình ảnh. Chúng ta có thể đạt được điều này với nỗ lực tối thiểu bằng cách sử dụng phương pháp

2

Giả sử bạn có một nút tải xuống trên trang web của mình với HTML sau

1

// Using the Image() constructor

Sau đó, chúng tôi có thể sử dụng JavaScript sau để tạo một liên kết giả tạm thời cho phép chúng tôi tải xuống hình ảnh của mình

1

5

2

3

5

4

5

6

// Referencing an Image loaded in the DOM

let imagePath = 'images/puppy.jpg';

const originalImage = document.querySelector("img.puppy");

3

Nhấp vào nút tải xuống ngay bây giờ sẽ bắt đầu tải xuống một tệp có tên là con chó con bị cắt. jpg

4. Tạo chức năng cắt và thay đổi kích thước có thể tái sử dụng

Rất nhiều giá trị trong mã của chúng tôi hiện đang được mã hóa cứng. Điều này hạn chế nghiêm trọng khả năng sử dụng lại của mã. Hãy viết lại nó theo cách cho phép chúng ta gọi một chức năng duy nhất để cắt, thay đổi kích thước và tải xuống hình ảnh. Đây là mã thay đổi kích thước hoặc cắt bất kỳ hình ảnh đã cho nào theo kích thước đã chỉ định và sau đó lưu nó với một tên nhất định

1

let imagePath = 'images/puppy.jpg';

2

let imagePath = 'images/puppy.jpg';

3

6

4

5

6

6

6

// Referencing an Image loaded in the DOM

const originalImage = document.querySelector("img.puppy");

6

const originalImage = document.querySelector("img.puppy");

const originalImage = document.querySelector("img.puppy");

// Referencing an Image loaded in the DOM

const originalImage = document.querySelector("img.puppy");

// Referencing an Image loaded in the DOM

const originalImage = document.querySelector("img.puppy");

const originalImage = document.querySelector("img.puppy");

// Referencing an Image loaded in the DOM

3

3

// Referencing an Image loaded in the DOM

// Referencing an Image loaded in the DOM

// Referencing an Image loaded in the DOM

// Referencing an Image loaded in the DOM

// Referencing an Image loaded in the DOM

// Referencing an Image loaded in the DOM

// Referencing an Image loaded in the DOM

// Referencing an Image loaded in the DOM

// Referencing an Image loaded in the DOM

// Referencing an Image loaded in the DOM

// Referencing an Image loaded in the DOM

// Referencing an Image loaded in the DOM

// Referencing an Image loaded in the DOM

// Referencing an Image loaded in the DOM

// Referencing an Image loaded in the DOM

// Referencing an Image loaded in the DOM

// Referencing an Image loaded in the DOM

// Referencing an Image loaded in the DOM

// Referencing an Image loaded in the DOM

// Referencing an Image loaded in the DOM

// Referencing an Image loaded in the DOM

// Referencing an Image loaded in the DOM

// Referencing an Image loaded in the DOM

// Referencing an Image loaded in the DOM

let imagePath = 'images/puppy.jpg';

// Referencing an Image loaded in the DOM

6

// Referencing an Image loaded in the DOM

// Referencing an Image loaded in the DOM

6

// Referencing an Image loaded in the DOM

6

Suy nghĩ cuối cùng

Trong hướng dẫn này, chúng ta đã học cách cắt và thay đổi kích thước Hình ảnh trong JavaScript bằng API canvas. Tất cả những gì chúng ta cần làm là vẽ hình ảnh trên khung vẽ bằng phương pháp

// Referencing an Image loaded in the DOM

2

Vì chúng tôi đã tải hình ảnh trên khung vẽ, bạn nên thử triển khai chức năng bổ sung như cho phép người dùng chuyển một giá trị phân số để đặt kích thước mới đối với hình ảnh gốc.  

Làm cách nào để cắt hoặc thay đổi kích thước hình ảnh bằng JavaScript?

Làm cách nào để thay đổi kích thước canvas JavaScript?

Làm cách nào để giảm kích thước tệp trong JavaScript?