programming javascript

Làm cách nào để chỉnh sửa hình ảnh trong JavaScript?

Vẽ hình chữ nhật, hình tròn, đường thẳng, mũi tên và văn bản. Xoay, thay đổi kích thước, sao chép và chú thích theo thứ tự z. Vẽ tự do bằng bút sắc nét. Kiểm soát công cụ nào khả dụng, màu sắc và phông chữ tùy chỉnh nào có thể được chọn, v.v.

Thử nghiệm

Vấn đề thực sự duy nhất của bạn là bạn đang truyền một chuỗi chứ không phải một đối tượng có thuộc tính .src

Một số gợi ý

Sử dụng trình kích hoạt phần tử có thể nhấp tự nhiên, chẳng hạn như
Sử dụng các thuộc tính có tiền tố data- cho dữ liệu sự kiện trên phần tử
Sử dụng các sự kiện bị ràng buộc muộn khi DOM đã sẵn sàng

đánh dấu

JavaScript

Nếu bạn cần hỗ trợ IE và các trình duyệt cũ khác, hãy sử dụng

function clickedButton[btn, event] {
  document.getElementById['img'].src = btn.getAttribute['data-src'];
}

function bindClick[btn] {
  btn.addEventListener['click', clickedButton.bind[null,btn]];
}

// Setup click handler[s] when content is loaded
document.addEventListener["DOMContentLoaded", function[]{
  Array.from[document.querySelectorAll['#thumb_img > button']]
    .forEach[bindClick]];
}];

Chỉnh sửa. Vanilla JS cho các trình duyệt hiện đại

Internet tràn ngập vô số hình ảnh do người dùng tải lên. Điều này đặc biệt đúng đối với các trang web truyền thông xã hội—và rất hiếm khi mọi người đăng ảnh gốc, chưa chỉnh sửa ở bất cứ đâu. Cũng thường cần đăng hình ảnh với kích thước hoặc định dạng cụ thể. Mặc dù ngày nay có rất nhiều ứng dụng chỉnh sửa hình ảnh chính thức trên điện thoại thông minh, nhưng mọi người vẫn có thể gặp một chút bất tiện khi cắt hoặc thay đổi kích thước bất kỳ hình ảnh nào trước khi tải chúng lên

May mắn thay, JavaScript có rất nhiều thư viện nguồn mở và miễn phí có thể giúp bạn chỉnh sửa hình ảnh cơ bản và khá nâng cao. Sử dụng chúng trong các dự án của riêng bạn để cung cấp cho người dùng tùy chọn cắt hoặc chia tỷ lệ bất kỳ hình ảnh nào sau khi họ tải lên

Trong bài đăng này, chúng tôi sẽ cung cấp cho bạn tổng quan ngắn gọn về trình chỉnh sửa hình ảnh JavaScript mã nguồn mở và miễn phí tốt nhất mà bạn có thể thêm vào trang web của mình ngay hôm nay

Trình chỉnh sửa ảnh Filerobot

Filerobot là một trong những trình chỉnh sửa hình ảnh JavaScript miễn phí giàu tính năng nhất mà bạn sẽ tìm thấy. Nó đi kèm với vô số tính năng xử lý hình ảnh. Bạn có thể dễ dàng điều chỉnh độ sáng, độ tương phản, độ bão hòa và độ phơi sáng của hình ảnh. Ngoài ra còn có một số hiệu ứng và bộ lọc tích hợp trong trường hợp bạn muốn thứ gì đó sẽ cho bạn kết quả tương tự như bộ lọc Instagram

Bạn có thể dễ dàng thay đổi hướng xoay của hình ảnh hoặc lật hình ảnh theo chiều ngang và chiều dọc. Hình ảnh có thể dễ dàng cắt theo một số tỷ lệ khung hình đặt trước như biểu ngữ, hình vuông, v.v. Ngoài ra còn có một tùy chọn để chỉ định chiều rộng và chiều cao tùy chỉnh cho hình ảnh

Trình chỉnh sửa đi kèm với khả năng thêm nhãn hiệu của riêng bạn trên các hình ảnh bạn chỉnh sửa bằng hình mờ tùy chỉnh cũng như lớp phủ văn bản và hình dạng. Có hai chủ đề có sẵn được gọi là sáng và tối, nhưng bạn có thể tạo các chủ đề của riêng mình để phù hợp với bảng màu của trang web nơi bạn định tích hợp trình chỉnh sửa

Bạn có thể dùng thử tất cả các tính năng của trình chỉnh sửa trên trang demo. Nó có hai phiên bản. vanilla JS và thành phần React. Tích hợp với các thư viện và khuôn khổ khác cũng được lên kế hoạch trong tương lai

CamanJS

CamanJS là một trình chỉnh sửa hình ảnh dựa trên JavaScript phổ biến khác đi kèm với một bộ tính năng phù hợp. Thư viện đã không được cập nhật trong một thời gian, điều đó có nghĩa là nó sẽ không thêm bất kỳ tính năng mới nào. Tuy nhiên, bạn vẫn có thể sử dụng nó để thực hiện nhiều tác vụ

Nó đi kèm với rất nhiều phương pháp để điều chỉnh độ sáng, độ tương phản, độ bão hòa, độ rung, độ sắc nét, độ nhiễu và nhiều thứ khác. Có rất nhiều bộ lọc cài sẵn nguyên gốc và lấy cảm hứng từ Instagram để bạn sử dụng và hiệu ứng mà chúng tạo ra khá tuyệt vời. Bạn cũng có thể tạo nhiều lớp và áp dụng chế độ hòa trộn cho chúng để tạo ra thứ gì đó phức tạp hơn

Bạn cũng có tùy chọn áp dụng các bộ lọc khác nhau cho các thành phần hình ảnh trên trang web bằng cách sử dụng thuộc tính data-caman. Các bộ lọc sau đó sẽ tự động được áp dụng cho hình ảnh khi tải trang

Điều tôi thích nhất ở thư viện là khả năng mở rộng dễ dàng và quyền kiểm soát mà thư viện mang lại cho người dùng. Bạn có thể đăng ký các bộ lọc và chế độ hòa trộn của riêng mình với thư viện và áp dụng chúng trực tiếp cho các hình ảnh khác nhau. Bạn cũng có thể theo dõi tiến trình của các bộ lọc bằng cách lắng nghe các sự kiện khác nhau do CamanJS kích hoạt. Loạt bài của chúng tôi về cách tạo trình chỉnh sửa hình ảnh với CamanJS bao gồm tất cả các khía cạnh của thư viện rất chi tiết

Toast UI Image Editor

Toast UI Trình chỉnh sửa hình ảnh cũng là một trình chỉnh sửa hình ảnh chính thức và miễn phí có ba loại. Bạn có thể sử dụng phiên bản vanilla JavaScript hoặc sử dụng các thành phần trình bao bọc Vue hoặc React

Nó đi kèm với giao diện người dùng riêng, nhưng bạn cũng có tùy chọn sử dụng API trực tiếp để chỉnh sửa hình ảnh. Có các chủ đề sáng và tối trong trình chỉnh sửa và bạn có thể chọn đặt các điều khiển chỉnh sửa hình ảnh ở bên trái, bên phải, trên cùng hoặc dưới cùng

Người dùng có thể cắt, lật và xoay hình ảnh sau khi hình ảnh được tải vào trình chỉnh sửa. Họ cũng có thể vẽ lên hình ảnh bằng các đường thẳng hoặc tự do. Một số hình dạng và biểu tượng được xác định trước cũng có thể được xếp chồng lên hình ảnh chính. Các tùy chọn chỉnh sửa phổ biến như độ sáng, thang độ xám, pixel và đảo ngược cũng có sẵn. Tuy nhiên, bạn không thể thay đổi độ tương phản hoặc độ bão hòa của hình ảnh, điều này có thể gây khó chịu

Lena. js

Lena. js là một thư viện nhẹ, dễ sử dụng để xử lý ảnh. Sự khác biệt giữa Len. js và các thư viện khác là nó không cung cấp cho bạn quyền kiểm soát chi tiết đối với quá trình chỉnh sửa hình ảnh. Có một số bộ lọc phổ biến được xác định trước mà bạn có thể áp dụng cho hình ảnh của mình

Các bộ lọc chủ yếu được chia thành hai loại. Đầu tiên, bạn có thể sử dụng các bộ lọc pixel-to-pixel để thay đổi độ bão hòa hoặc làm cho hình ảnh có thang độ xám. Danh mục khác bao gồm các bộ lọc phát hiện cạnh. Bạn có thể xem tất cả chúng đang hoạt động trên trang demo của thư viện

cổ điểnJS

Thư viện VintageJS thực hiện đúng như tên gọi của nó. Nó cho phép bạn áp dụng một số hiệu ứng cổ điển tuyệt vời cho hình ảnh. Bạn chỉ cần chuyển nguồn của mình và một đối tượng có tất cả các tùy chọn bộ lọc làm tham số cho hàm vintagejs

Tính linh hoạt trong việc sử dụng thư viện này xuất phát từ thực tế là nguồn có thể là đường dẫn đến hình ảnh thực tế cũng như hình ảnh hoặc thành phần canvas trên trang web. Sau đó, hàm trả về một lời hứa giải quyết thành một đối tượng kết quả. Đối tượng kết quả cũng có 3 phương thức giúp bạn lấy URL dữ liệu của hình ảnh được cập nhật, phần tử canvas hoặc phần tử hình ảnh có dữ liệu hình ảnh được cập nhật

Hãy thử bản demo của thư viện để xem bạn có thích những hiệu ứng cổ điển này không

Lọc 2

Thư viện Filterous 2 là một lựa chọn tuyệt vời khác cho những người chỉ muốn có một thư viện để nhanh chóng áp dụng một số hiệu ứng cài sẵn phổ biến và nổi tiếng trên hình ảnh. Nó đi kèm với khoảng 40 bộ lọc lấy cảm hứng từ Instagram khác nhau để áp dụng cho hình ảnh của bạn

Ngoài ra, nó còn cung cấp cho bạn tùy chọn áp dụng một số hiệu ứng cơ bản như tăng hoặc giảm độ sáng, độ tương phản và độ bão hòa của hình ảnh bằng cách chuyển giá trị từ -1 đến 1. Bạn cũng có thể áp dụng các hiệu ứng như làm mờ, làm sắc nét và phát hiện cạnh cho hình ảnh bằng cách sử dụng ma trận tích chập

Trình chỉnh sửa hình ảnh dựa trên WebGL

Tất cả các thư viện mà tôi đã đề cập cho đến nay đều chạy tất cả mã thao tác hình ảnh trên CPU. Đây không phải là vấn đề khi bạn đang chỉnh sửa các hình ảnh nhỏ hoặc khi người dùng không ngại chờ đợi một chút để xem kết quả cuối cùng. Tuy nhiên, CPU không thể hiển thị kết quả theo thời gian thực khi nó phải thực hiện tất cả các phép tính này cho hàng triệu pixel

Đây là nơi WebGL tỏ ra rất hữu ích. Bạn có thể sử dụng một số thư viện dựa trên WebGL để thực hiện tất cả các tính toán để chỉnh sửa hình ảnh trên GPU. Việc song song hóa tất cả tính toán màu pixel đó trong GPU có nghĩa là bất kỳ hiệu ứng nào bạn áp dụng cho hình ảnh sẽ hiển thị ngay lập tức

Glfx. js

Thư viện đầu tiên mà tôi muốn nói đến trong danh mục này là Glfx. js. Nó cung cấp cho bạn quyền truy cập vào tất cả các chức năng mà bạn cần để điều chỉnh độ sáng, độ tương phản, màu sắc, độ bão hòa, độ rung và nhiễu trong ảnh

Nó cũng hỗ trợ bốn phương pháp làm mờ khác nhau. Điều này bao gồm làm mờ thu phóng, làm mờ ống kính và dịch chuyển độ nghiêng, ngoài làm mờ đồng nhất toàn bộ hình ảnh. Một số hiệu ứng bổ sung được bao gồm trong thư viện, chẳng hạn như thang độ xám hoặc bán sắc màu giúp hình ảnh trông giống truyện tranh. Bạn cũng có thể bóp méo hình ảnh bằng cách sử dụng một loạt các bộ lọc cong vênh có thể tạo ra hiệu ứng phồng lên, xoáy hoặc thay đổi phối cảnh

Không phải tất cả các bộ lọc và hiệu ứng sẽ cho kết quả tốt trên mọi hình ảnh. Ví dụ: hiệu ứng làm mờ ống kính trông tuyệt vời chỉ khi có một số nguồn sáng điểm sáng trong ảnh. Bạn có thể xem các bộ lọc được áp dụng cho hình ảnh nhanh như thế nào với thư viện này trong bản trình diễn

ứng dụng pixel

Pixelapp là một trình chỉnh sửa hình ảnh khác mà bạn có thể sử dụng để chỉnh sửa hình ảnh bằng WebGL. Nó cung cấp cho bạn tùy chọn để điều chỉnh các giá trị về độ sáng, độ tương phản, độ bão hòa, bóng, sắc độ, màu sắc và nhiều thuộc tính khác. Tất cả các hiệu ứng này được chia thành bốn loại được gọi là ánh sáng, màu sắc, chi tiết và hiệu ứng

Nó cũng đi kèm với sự hỗ trợ cho các hành động hoàn tác và làm lại đa cấp trong trường hợp bạn không hài lòng với một số thay đổi trước đây mà bạn đã thực hiện đối với một hình ảnh. Có một dải phân cách mà bạn có thể kéo qua ảnh để xem ảnh gốc và ảnh đã chỉnh sửa cạnh nhau. Bạn cũng có thể lật hình ảnh theo chiều ngang và chiều dọc, chia tỷ lệ hoặc xoay hình ảnh

Hãy thử chỉnh sửa một số hình ảnh của bạn trong trình chỉnh sửa. Bạn sẽ ấn tượng với tốc độ và chức năng của nó

được tài trợ. Trình chỉnh sửa ảnh Pintura

Tất cả các trình chỉnh sửa hình ảnh mà chúng tôi đã trình bày trong hướng dẫn này đều tuyệt vời để chỉnh sửa đơn giản khi bạn phải thực hiện các điều chỉnh đơn giản về độ tương phản, độ sáng hoặc độ bão hòa. Tuy nhiên, sẽ có lúc bạn cần thứ gì đó cao cấp hơn để sử dụng trong môi trường chuyên nghiệp. Đây là nơi Pintura sẽ chứng minh là vô giá

Hàng ngàn công ty sử dụng Pintura cho tất cả các nhu cầu chỉnh sửa hình ảnh của họ và nó đã nhận được xếp hạng 4. 9 từ người dùng của nó. Dưới đây là một số tính năng khiến Pintura trở nên tuyệt vời

1. JS hiện đại không phụ thuộc

Pintura được viết bằng vanilla JavaScript và không yêu cầu bất kỳ thư viện bên thứ ba nào hoạt động. Nó cung cấp các thành phần để tích hợp nhanh chóng và dễ dàng với tất cả các thư viện và khung phổ biến như jQuery, React, Angular và Vue

2. Chỉnh sửa GUI và Chế độ không đầu

Pintura cung cấp giao diện người dùng tuyệt vời để chỉnh sửa hình ảnh. Tuy nhiên, cũng có thể chạy trình chỉnh sửa ở chế độ không đầu và truy cập tất cả các tính năng theo chương trình. Điều này mang lại cho bạn điều tốt nhất của cả hai thế giới

3. Chỉnh sửa cơ bản và Bộ lọc tùy chỉnh

Bạn có thể thực hiện tất cả các thao tác chỉnh sửa hình ảnh thông thường như cắt xén, xoay, lật hoặc chia tỷ lệ. Bên cạnh việc cho phép bạn kiểm soát những thứ như độ tương phản, độ sáng và độ bão hòa của hình ảnh, Pintura còn có các bộ lọc tích hợp để giúp bạn nhanh chóng chỉnh sửa hình ảnh. Bạn thậm chí có thể tạo các bộ lọc tùy chỉnh của riêng mình nếu muốn

4. Cắt xén và chỉnh sửa dễ dàng

Pintura cũng có thể thực thi các tỷ lệ khung hình để cắt xén trong khi cung cấp các hướng dẫn cắt lớp phủ để giúp bạn dễ dàng hình dung kết quả cuối cùng của bất kỳ thao tác cắt xén nào. Cũng có thể loại bỏ thông tin nhạy cảm trong hình ảnh một cách dễ dàng mà trông vẫn đẹp mắt

5. Công cụ chú thích mạnh mẽ

Pintura có một số công cụ chú thích mạnh mẽ trong bộ công cụ của nó. Bạn có thể nhanh chóng vẽ hình chữ nhật, hình tròn, đường thẳng, mũi tên và văn bản trên hình ảnh. Nó cung cấp cho bạn toàn quyền kiểm soát mọi khía cạnh, chẳng hạn như màu sắc và phông chữ có sẵn cho chú thích

6. Trải nghiệm di động tuyệt vời

Pintura có thiết kế đáp ứng và hoạt động trên mọi thiết bị. Nó không chỉ là một giải pháp dành cho máy tính để bàn mà còn có cảm giác tự nhiên trên các thiết bị di động, chiếm 50% web hiện nay

Danh sách các tính năng không kết thúc ở đây. Bạn có thể tìm thấy danh sách đầy đủ hơn 42 tính năng trên trang web Pintura. Hãy dùng thử bản demo trên trang chủ của trang web. Tôi chắc chắn rằng bạn sẽ đánh giá cao tất cả các tính năng mà Pintura cung cấp

Suy nghĩ cuối cùng

Trong bài đăng này, tôi đã cung cấp cho bạn tổng quan ngắn gọn về một số trình chỉnh sửa hình ảnh JavaScript mã nguồn mở và miễn phí tốt nhất. Một số trong số đó, như Filerobot và Toast UI, đi kèm với giao diện người dùng tích hợp sẵn của riêng chúng, trong khi những công cụ khác, như CamanJS, cho phép bạn linh hoạt triển khai giao diện người dùng của riêng mình. Tôi cũng đã đánh dấu một dịch vụ trả phí, Pintura, cung cấp một số tính năng nâng cao hơn. Bạn nên cân nhắc sử dụng một trong các trình soạn thảo dựa trên WebGL nếu muốn thư viện hiển thị kết quả theo thời gian thực

JavaScript có thể sửa đổi hình ảnh không?

JavaScript cần thiết để tự động thay đổi cách hiển thị của hình ảnh . Chẳng hạn, phần tử img HTML cung cấp thuộc tính src để sửa đổi nguồn của hình ảnh. Nguồn của hình ảnh có thể là một hệ thống cục bộ hoặc bất kỳ hình ảnh URL nào.

Làm thế nào chúng ta có thể sửa đổi một hình ảnh?

Cắt hoặc xoay ảnh .

Trên máy tính, đi tới ảnh. Google. com

Mở ảnh bạn muốn chỉnh sửa

Ở trên cùng bên phải, nhấp vào Chỉnh sửa. . Mẹo. Trong khi bạn chỉnh sửa, hãy nhấp và giữ ảnh để so sánh các chỉnh sửa của bạn với ảnh gốc. Để thêm hoặc điều chỉnh bộ lọc, hãy nhấp vào Bộ lọc ảnh. . Nhấp để áp dụng bộ lọc. .

Ở trên cùng bên phải, hãy nhấp vào Xong

Làm cách nào để đặt hình ảnh trong JavaScript?

Tạo phần tử hình ảnh trong JavaScript . Sau đó, đặt URL hình ảnh thành thuộc tính src của nó. Cuối cùng, thêm phần tử image vào hệ thống phân cấp DOM bằng cách thêm nó vào phần tử body. Create an image element using the createElement[] method on the document object. Then, set an image URL to its src attribute. Finally, add the image element to the DOM hierarchy by appending it to the body element.

Hình ảnh [] trong JavaScript là gì?

Image[] Hàm tạo Image[] tạo một phiên bản HTMLImageElement mới . Nó có chức năng tương đương với tài liệu. createElement['img'].