Bài viết này nhận được sự hỗ trợ nhiệt tình của những người bạn thân mến của chúng tôi tại Pixo, những người cung cấp cho người dùng trình chỉnh sửa hình ảnh đẹp, dễ sử dụng và trực quan. Cảm ơn bạn!
Hiện nay có rất nhiều dịch vụ sử dụng ảnh. Ảnh đã chỉnh sửa thường đáp ứng mục đích của chúng tốt hơn nhiều so với ảnh thô. Nếu bạn phát triển một dịch vụ cho phép người dùng tải ảnh lên, việc đưa công cụ chỉnh sửa ảnh vào ngay trong dịch vụ trước khi tải lên có thể giúp người dùng cuối tiết kiệm nhiều thời gian. Mặc dù có rất nhiều phần mềm chỉnh sửa ảnh, cả cho máy tính để bàn, thiết bị di động và trực tuyến, nhưng việc chỉnh sửa ảnh hoặc hàng loạt ảnh trong phần mềm đó có thể chậm hơn so với việc chỉnh sửa ảnh trong giao diện người dùng dịch vụ của bạn.
Hãy tưởng tượng người dùng chọn một bức ảnh, áp dụng một số thay đổi cho bức ảnh đó và chỉ cần tải ảnh lên. Họ không cần sử dụng phần mềm máy tính để bàn hoặc thiết bị di động phức tạp; họ không cần phải tốn thời gian tải ảnh gốc lên công cụ chỉnh sửa ảnh trực tuyến trước, sau đó phải lưu ảnh đã chỉnh sửa cục bộ và cuối cùng tải ảnh lên dịch vụ của bạn.
Một ví dụ hoàn hảo về trường hợp sử dụng như vậy là một thị trường trực tuyến dành cho ô tô đã qua sử dụng. Sẽ rất khó để bán một chiếc ô tô nếu không cung cấp một số bức ảnh về nó, phải không? Bạn có thể muốn chỉnh sửa một số bức ảnh trước khi tải chúng lên, ví dụ như bằng cách che biển số xe hoặc điều chỉnh tông màu. Một ví dụ khác là nền tảng quản lý bất động sản. Một lần nữa, ảnh rất quan trọng khi bán hoặc cho thuê bất động sản và việc chỉnh sửa có thể hữu ích, cũng như thêm một số văn bản vào ảnh để giải thích và làm rõ. Các nền tảng ảnh stock cũng có thể được hưởng lợi khi cho phép người dùng cuối tùy chỉnh ảnh stock đã mua trước khi tải xuống.
Có nhiều giải pháp cho vấn đề này. Khi chọn công cụ tốt nhất cho trang web hoặc ứng dụng của mình, bạn nên cân nhắc những điều sau:
Một trong số đó là chỉnh sửa hàng loạt cho phép quản trị viên/biên tập viên trang web thực hiện một số thay đổi đối với ảnh và sao chép chúng vào toàn bộ lô. Chỉ cần chọn một lô ảnh trong Thư viện phương tiện và chọn Chỉnh sửa hàng loạt. Khi Pixo mở ảnh đầu tiên để chỉnh sửa, trình chỉnh sửa trang web sẽ thực hiện một số thay đổi — chọn bộ lọc, điều chỉnh màu sắc và thêm văn bản. Khi lưu, các thay đổi sẽ được sao chép vào phần còn lại của ảnh từ lô!
[*] Pixo Image Editor cho WordPress
Nhưng điều tuyệt vời hơn nữa là Pixo có thể được tích hợp vào giao diện của trang web WordPress — bất kể chọn chủ đề nào hoặc sử dụng plugin nào. Pixo đính kèm vào trường nhập tệp và lắng nghe lựa chọn hình ảnh; khi người dùng cuối chọn ảnh, Pixo Editor sẽ mở ảnh đó để chỉnh sửa. Sau đó, người dùng có thể thực hiện một số thay đổi và lưu lại vào mục nhập tệp. Việc gửi tệp đầu vào thực tế sẽ gửi ảnh đã chỉnh sửa, không phải ảnh gốc. Về cơ bản, điều này giúp trình chỉnh sửa dễ tích hợp ở bất kỳ đâu.
Bạn có thể đính kèm nó vào mọi trường nhập tệp trên trang hoặc một trường cụ thể thông qua bộ chọn CSS. Trình xử lý gửi biểu mẫu có thể là plugin cửa hàng trực tuyến hoặc plugin biểu mẫu liên hệ. Thực ra không quan trọng miễn là nó in trường nhập tệp trên trang và xử lý việc tải tệp lên khi gửi biểu mẫu.
Vì Pixo là SaaS nên có thể tích hợp ở bất kỳ đâu chỉ bằng vài dòng JavaScript. Nó có thể tải hình ảnh từ DOM hoặc từ URL, chuỗi
Khi hình ảnh đã chỉnh sửa được xuất, bạn có thể quyết định sẽ làm gì với hình ảnh đó trong hàm gọi lại.
Dưới đây là ví dụ về CodeSandbox cho thấy một số tùy chọn đầu vào và đầu ra có sẵn:
Xem thêm tại đây
Một trong những tính năng tuyệt vời nhất là công cụ Nền. Nó cho phép người dùng cuối thay thế nền bằng một màu đồng nhất, một hình ảnh khác từ Unsplash hoặc một hình ảnh tùy chỉnh.
Pixo Editor: Background Tool
Có những công cụ vẽ cho phép người dùng cuối vẽ tự do lên trên hình ảnh. Công cụ Pencil hữu ích để khoanh tròn một số phần của hình ảnh hoặc vẽ các mũi tên để chỉ vào một thứ gì đó. Công cụ Blur rất tuyệt vời để che các phần của ảnh — biển số xe, khuôn mặt hoặc thông tin nhạy cảm khác. Công cụ Erase thực hiện đúng như tên gọi — xóa các phần của nhãn dán đã chèn và các hình ảnh khác. Thật không may, công cụ Erase không hoạt động trên ảnh nguồn.
Một tính năng thú vị khác là khôi phục phiên. Khi người dùng chỉnh sửa ảnh trong Pixo, tải ảnh xuống rồi mở ảnh để chỉnh sửa, tất cả các đối tượng như văn bản và nhãn dán đều có thể chỉnh sửa được, và lịch sử hoàn tác/làm lại cũng có ở đó. Điều này thực sự tuyệt vời vì nếu người dùng mắc lỗi, họ có thể sửa rất dễ dàng. Khôi phục phiên cũng hoạt động nếu người dùng vô tình đóng trình duyệt web. Mở trình chỉnh sửa với cùng một ảnh sẽ nhắc người dùng khôi phục phiên trước đó và công việc của họ sẽ không bị mất.
Giải thích về Khôi phục phiên.
Cuối cùng nhưng không kém phần quan trọng, ảnh đầu ra được nén tuyệt vời mà không làm giảm chất lượng, do đó bạn không phải lo lắng về lưu lượng và dung lượng lưu trữ. Trình chỉnh sửa cũng hỗ trợ định dạng WebP.
Xem thêm tại đây
Bạn có thể tạo mẫu với chỗ giữ chỗ văn bản. Khi người dùng cuối chỉnh sửa các mẫu này, họ có thể thêm văn bản tùy chỉnh của mình vào chỗ giữ chỗ và xuất kết quả cuối cùng dưới dạng hình ảnh.
Sau đây là các ví dụ của JSFiddle:
Có thể sử dụng cách tiếp cận tương tự nếu bạn muốn sửa đổi khung ảnh có sẵn, phông chữ (dành cho công cụ văn bản) và kích thước cắt được xác định trước. Và nếu bạn muốn áp dụng thay đổi cho ảnh hiện tại theo chương trình, bạn có thể thực hiện bằng lệnh
Trong ví dụ trên, chúng tôi ẩn các điều khiển tích hợp bằng CSS
Nhưng API còn có nhiều trường hợp sử dụng khác nữa. Ví dụ: chúng tôi có thể đảm bảo rằng hình ảnh đã chỉnh sửa khớp với tỷ lệ khung hình cụ thể bằng cách cắt hình ảnh khi tải bằng API. Hoặc, chúng tôi có thể chèn hình mờ khi người dùng cuối thực hiện chỉnh sửa, khi xuất:
Có thể triển khai phương pháp tương tự vào ứng dụng Electron trên máy tính để bàn.
Nhưng vì đây là dịch vụ trực tuyến nên có nguy cơ dịch vụ có thể ngừng hoạt động trong một thời gian và trong thời gian này, người dùng cuối của bạn sẽ không thể thực hiện công việc của họ. Giải pháp tự lưu trữ sẽ luôn hoạt động miễn là ứng dụng hoặc trang web chính của bạn vẫn hoạt động. Tuy nhiên, thời gian hoạt động trung bình của Pixo là 99,993% (theo báo cáo tình trạng công khai) không đến nỗi tệ.
Hiện nay có rất nhiều dịch vụ sử dụng ảnh. Ảnh đã chỉnh sửa thường đáp ứng mục đích của chúng tốt hơn nhiều so với ảnh thô. Nếu bạn phát triển một dịch vụ cho phép người dùng tải ảnh lên, việc đưa công cụ chỉnh sửa ảnh vào ngay trong dịch vụ trước khi tải lên có thể giúp người dùng cuối tiết kiệm nhiều thời gian. Mặc dù có rất nhiều phần mềm chỉnh sửa ảnh, cả cho máy tính để bàn, thiết bị di động và trực tuyến, nhưng việc chỉnh sửa ảnh hoặc hàng loạt ảnh trong phần mềm đó có thể chậm hơn so với việc chỉnh sửa ảnh trong giao diện người dùng dịch vụ của bạn.
Hãy tưởng tượng người dùng chọn một bức ảnh, áp dụng một số thay đổi cho bức ảnh đó và chỉ cần tải ảnh lên. Họ không cần sử dụng phần mềm máy tính để bàn hoặc thiết bị di động phức tạp; họ không cần phải tốn thời gian tải ảnh gốc lên công cụ chỉnh sửa ảnh trực tuyến trước, sau đó phải lưu ảnh đã chỉnh sửa cục bộ và cuối cùng tải ảnh lên dịch vụ của bạn.
Một ví dụ hoàn hảo về trường hợp sử dụng như vậy là một thị trường trực tuyến dành cho ô tô đã qua sử dụng. Sẽ rất khó để bán một chiếc ô tô nếu không cung cấp một số bức ảnh về nó, phải không? Bạn có thể muốn chỉnh sửa một số bức ảnh trước khi tải chúng lên, ví dụ như bằng cách che biển số xe hoặc điều chỉnh tông màu. Một ví dụ khác là nền tảng quản lý bất động sản. Một lần nữa, ảnh rất quan trọng khi bán hoặc cho thuê bất động sản và việc chỉnh sửa có thể hữu ích, cũng như thêm một số văn bản vào ảnh để giải thích và làm rõ. Các nền tảng ảnh stock cũng có thể được hưởng lợi khi cho phép người dùng cuối tùy chỉnh ảnh stock đã mua trước khi tải xuống.
Có nhiều giải pháp cho vấn đề này. Khi chọn công cụ tốt nhất cho trang web hoặc ứng dụng của mình, bạn nên cân nhắc những điều sau:
- Dễ tích hợp vào sản phẩm của bạn
Bạn không muốn đọc hàng tấn tài liệu để tích hợp một công cụ như vậy. - Nhiều tính năng khác nhau tùy thích
- Đơn giản
Phần lớn người dùng cuối cần các công cụ dễ sử dụng để chỉnh sửa ảnh của họ. - API phong phú
Bạn càng kiểm soát được trình chỉnh sửa ảnh thì càng tốt. - Hỗ trợ nhãn trắng
Bạn muốn làm cho nó trông giống như một phần thương hiệu của mình. - Hình ảnh đầu ra được tối ưu hóa
Hiệu suất web là rất quan trọng. - Giá cả phải chăng
Một trong số đó là chỉnh sửa hàng loạt cho phép quản trị viên/biên tập viên trang web thực hiện một số thay đổi đối với ảnh và sao chép chúng vào toàn bộ lô. Chỉ cần chọn một lô ảnh trong Thư viện phương tiện và chọn Chỉnh sửa hàng loạt. Khi Pixo mở ảnh đầu tiên để chỉnh sửa, trình chỉnh sửa trang web sẽ thực hiện một số thay đổi — chọn bộ lọc, điều chỉnh màu sắc và thêm văn bản. Khi lưu, các thay đổi sẽ được sao chép vào phần còn lại của ảnh từ lô!
[*] Pixo Image Editor cho WordPress
Nhưng điều tuyệt vời hơn nữa là Pixo có thể được tích hợp vào giao diện của trang web WordPress — bất kể chọn chủ đề nào hoặc sử dụng plugin nào. Pixo đính kèm vào trường nhập tệp và lắng nghe lựa chọn hình ảnh; khi người dùng cuối chọn ảnh, Pixo Editor sẽ mở ảnh đó để chỉnh sửa. Sau đó, người dùng có thể thực hiện một số thay đổi và lưu lại vào mục nhập tệp. Việc gửi tệp đầu vào thực tế sẽ gửi ảnh đã chỉnh sửa, không phải ảnh gốc. Về cơ bản, điều này giúp trình chỉnh sửa dễ tích hợp ở bất kỳ đâu.
Bạn có thể đính kèm nó vào mọi trường nhập tệp trên trang hoặc một trường cụ thể thông qua bộ chọn CSS. Trình xử lý gửi biểu mẫu có thể là plugin cửa hàng trực tuyến hoặc plugin biểu mẫu liên hệ. Thực ra không quan trọng miễn là nó in trường nhập tệp trên trang và xử lý việc tải tệp lên khi gửi biểu mẫu.
Vì Pixo là SaaS nên có thể tích hợp ở bất kỳ đâu chỉ bằng vài dòng JavaScript. Nó có thể tải hình ảnh từ DOM hoặc từ URL, chuỗi
base64 hoặc dataurl, từ hệ thống tệp cục bộ, v.v.
Mã:
var image = document.getElementById('myimage'); // DOM imagevar image = 'https://yourdomain.com/path/to/image.jpg'); // image urlvar image = 'abfdSDFEWwq2332Wdsdsdf435esf345SDfdr4S='; // hình ảnh được mã hóa base64var image = 'data:image/png;base64,abfdSDFEWwq2332Wdsdsdf43..'; // dataurlvar image = '{...}'; // hình ảnh đã xuất trước đó dưới dạng JSONvar constructor_options = { apikey: 'abc123xyz000' }; // phải là khóa API hợp lệ do https://pixoeditor.com cấpnew Pixo.Bridge(constructor_options).edit(image);
Mã:
new Pixo.Bridge({ apikey: 'abc123xyz000', onSave: function(image){ // tải ảnh image.download(); // hoặc đưa ảnh vào DOM document.body.appendChild(image.toImage()); // hoặc tuần tự hóa ảnh dưới dạng JSON image.toJSON(); // hoặc tải ảnh lên var data = new FormData(); data.append('image', image.toBlob()); var request = new XMLHttpRequest(); request.open('POST', 'http://yourdomain.com/path/to/upload.php'); request.send(data); } }).edit('http://yourdomain.com/path/to/imagetoedit.jpg');Xem thêm tại đây
Các tính năng chỉnh sửa ảnh
Pixo Editor triển khai các công cụ chỉnh sửa ảnh phổ biến nhất — cắt và xoay, hiệu chỉnh màu sắc, thêm văn bản có định dạng vào ảnh, bộ lọc và nhãn dán. Có một thư viện nhãn dán có sẵn, nhưng người dùng cuối có thể tải lên một hình ảnh khác và chèn nó dưới dạng nhãn dán.Một trong những tính năng tuyệt vời nhất là công cụ Nền. Nó cho phép người dùng cuối thay thế nền bằng một màu đồng nhất, một hình ảnh khác từ Unsplash hoặc một hình ảnh tùy chỉnh.
Pixo Editor: Background Tool
Có những công cụ vẽ cho phép người dùng cuối vẽ tự do lên trên hình ảnh. Công cụ Pencil hữu ích để khoanh tròn một số phần của hình ảnh hoặc vẽ các mũi tên để chỉ vào một thứ gì đó. Công cụ Blur rất tuyệt vời để che các phần của ảnh — biển số xe, khuôn mặt hoặc thông tin nhạy cảm khác. Công cụ Erase thực hiện đúng như tên gọi — xóa các phần của nhãn dán đã chèn và các hình ảnh khác. Thật không may, công cụ Erase không hoạt động trên ảnh nguồn.
Một tính năng thú vị khác là khôi phục phiên. Khi người dùng chỉnh sửa ảnh trong Pixo, tải ảnh xuống rồi mở ảnh để chỉnh sửa, tất cả các đối tượng như văn bản và nhãn dán đều có thể chỉnh sửa được, và lịch sử hoàn tác/làm lại cũng có ở đó. Điều này thực sự tuyệt vời vì nếu người dùng mắc lỗi, họ có thể sửa rất dễ dàng. Khôi phục phiên cũng hoạt động nếu người dùng vô tình đóng trình duyệt web. Mở trình chỉnh sửa với cùng một ảnh sẽ nhắc người dùng khôi phục phiên trước đó và công việc của họ sẽ không bị mất.
Giải thích về Khôi phục phiên.
Cuối cùng nhưng không kém phần quan trọng, ảnh đầu ra được nén tuyệt vời mà không làm giảm chất lượng, do đó bạn không phải lo lắng về lưu lượng và dung lượng lưu trữ. Trình chỉnh sửa cũng hỗ trợ định dạng WebP.
Hỗ trợ nhãn trắng
Pixo Editor hỗ trợ nhãn trắng đầy đủ. Bạn có thể thay đổi hoàn toàn giao diện của trình chỉnh sửa để phù hợp với thương hiệu của riêng bạn — logo, màu sắc, phông chữ và thậm chí là bố cục. API cung cấp khả năng xác định bảng màu của bạn bằng một vài thuộc tính JavaScript. Nhưng bạn thậm chí có thể tải lên tệp CSS tùy chỉnh có ghi đè và thay đổi về cơ bản mọi thứ. Trình chỉnh sửa đi kèm với sáu chủ đề mặc định mà bạn có thể tự xây dựng trên đó.Xem thêm tại đây
Mẫu
Tạo mẫu là một tính năng tuyệt vời khác của dịch vụ. Với Pixo Editor, bạn có thể áp dụng các thay đổi cho hình ảnh và xuất nó dưới dạng mẫu. Sau đó, khi người dùng cuối chọn mẫu này, mã ứng dụng của bạn có thể tải nó trong Pixo Editor, thay thế hình ảnh nguồn bằng hình ảnh do người dùng chọn. Theo cách này, tất cả các chỉnh sửa, như khối văn bản, bộ lọc và hiệu chỉnh màu sắc, sẽ được áp dụng cho hình ảnh của người dùng cùng một lúc. Điều này rất hữu ích cho hình ảnh áp phích.Bạn có thể tạo mẫu với chỗ giữ chỗ văn bản. Khi người dùng cuối chỉnh sửa các mẫu này, họ có thể thêm văn bản tùy chỉnh của mình vào chỗ giữ chỗ và xuất kết quả cuối cùng dưới dạng hình ảnh.
Sau đây là các ví dụ của JSFiddle:
- Trình tạo mẫu
Một trường hợp Pixo được sử dụng để tạo mẫu và lưu vào localStorage để đơn giản hóa. - Trình tiêu thụ mẫu
Một trường hợp Pixo được sử dụng để chọn một hình ảnh và áp dụng mẫu cho hình ảnh đó.
API
Pixo cung cấp một API cho phép các nhà phát triển định cấu hình trình chỉnh sửa cũng như thực thi các lệnh và áp dụng các thay đổi cho ảnh hiện đang được tải. Ví dụ, bạn có thể mở rộng thư viện nhãn dán có sẵn bằng nhãn dán tùy chỉnh của mình rất dễ dàng:
Mã:
pixo_instance.filterStickers(function (stock_stickers) { // hợp nhất hoặc thay thế hoàn toàn nhãn dán return my_stickers;});exec. Bạn có thể thực hiện hầu hết mọi thứ mà người dùng cuối có thể làm trong trình chỉnh sửa — chỉ bằng cách thực hiện lệnh tương ứng. Điều này bao gồm áp dụng bộ lọc, chèn nhãn dán, xóa nền, hiệu chỉnh màu, cắt, chuyển đổi, v.v. Kết hợp với một số CSS tùy chỉnh, bạn có thể nhanh chóng triển khai các điều khiển của riêng mình và chỉ sử dụng canvas và logic nghiệp vụ từ Pixo:Trong ví dụ trên, chúng tôi ẩn các điều khiển tích hợp bằng CSS
(display: none) và chỉ để canvas hiển thị. Và với một số HTML, CSS và JavaScript gọi API exec, về cơ bản chúng tôi triển khai các điều khiển tùy chỉnh của riêng mình. Điều này có thể hữu ích nếu vì lý do nào đó, chúng tôi không thể tùy chỉnh hoàn toàn UI theo cách chúng tôi muốn chỉ bằng CSS.Nhưng API còn có nhiều trường hợp sử dụng khác nữa. Ví dụ: chúng tôi có thể đảm bảo rằng hình ảnh đã chỉnh sửa khớp với tỷ lệ khung hình cụ thể bằng cách cắt hình ảnh khi tải bằng API. Hoặc, chúng tôi có thể chèn hình mờ khi người dùng cuối thực hiện chỉnh sửa, khi xuất:
REST API
Pixo cũng cung cấp điểm cuối REST. Bạn có thể gọi đó là đăng tệp nhị phân hình ảnh hoặc với URL tới hình ảnh hoặc biểu diễn base64 của hình ảnh đó và áp dụng các thay đổi giống như người dùng cuối có thể thực hiện trong trình chỉnh sửa:
Mã:
curl -X POST -F 'apikey=yourapikey' -F 'filter=Sepia' -F '[email protected]' https://pixoeditor.com/api/image > output.jpegTích hợp Pixo vào các ứng dụng di động gốc
Pixo là một dịch vụ dựa trên JavaScript được thiết kế cho các trang web hoặc ứng dụng web, nhưng nó cũng có thể được tích hợp vào các ứng dụng di động gốc nhờ thành phần WebView, được hỗ trợ bởi cả iOS và Android. Luồng rất đơn giản:- Người dùng chọn một bức ảnh để chỉnh sửa bằng thành phần Image Picker gốc;
- Ảnh được mã hóa thành chuỗi base64;
- Pixo được tải bên trong thành phần WebView;
- Chuỗi base64 được gửi đến Pixo bằng API nhắn tin WebView;
- Người dùng chỉnh sửa ảnh bằng trình chỉnh sửa;
- Người dùng hài lòng với ảnh đã chỉnh sửa và xuất ảnh đó;
- Pixo gọi lại một hàm gốc thông qua API WebView và truyền ảnh đã chỉnh sửa dưới dạng chuỗi base64;
- Chuỗi base64 được chuyển đổi thành ảnh gốc.
Ưu và nhược điểm
Sử dụng dịch vụ chỉnh sửa hình ảnh của bên thứ ba rất tuyệt vì nó tích hợp rất dễ dàng. Thêm SDK chỉnh sửa hình ảnh hoặc thậm chí tự mình triển khai trình chỉnh sửa như vậy đòi hỏi nhiều nỗ lực hơn. Ngoài ra, dịch vụ "tự động cập nhật", tức là bạn sẽ nhận được các tính năng mới nhất, tuyệt vời nhất và thú vị nhất, các bản sửa lỗi và cải tiến, cũng như hỗ trợ trình duyệt mới tự động — mà không cần phải thay đổi bất kỳ điều gì về phía bạn. Tuy nhiên, điều này làm tăng nguy cơ phát sinh lỗi mới nếu phiên bản mới hơn không được nhà cung cấp kiểm tra đúng cách.Nhưng vì đây là dịch vụ trực tuyến nên có nguy cơ dịch vụ có thể ngừng hoạt động trong một thời gian và trong thời gian này, người dùng cuối của bạn sẽ không thể thực hiện công việc của họ. Giải pháp tự lưu trữ sẽ luôn hoạt động miễn là ứng dụng hoặc trang web chính của bạn vẫn hoạt động. Tuy nhiên, thời gian hoạt động trung bình của Pixo là 99,993% (theo báo cáo tình trạng công khai) không đến nỗi tệ.
