Trình tạo ảnh bo góc

Điểm khác biệt của công cụ bo góc này: mỗi góc có thể mang bán kính riêng, bán kính có thể được biểu diễn bằng pixel hoặc phần trăm của cạnh ngắn hơn, và bản thân góc có thể là cung bo tròn thông thường, squircle mượt, vát góc thẳng hoặc khoét lõm vào trong. Công cụ cũng in ra quy tắc CSS border-radius tương ứng, nên cùng một hình dạng có thể được tái tạo trong mã thay vì dưới dạng tệp.

Vì sao nên bo góc ảnh?

Cách thêm góc bo tròn cho ảnh

1. Tải ảnh của bạn. Kéo một tệp vào vùng thả hoặc chọn Chọn ảnh. JPG, PNG, WebP, GIF, BMP, AVIF và SVG đều hoạt động miễn là trình duyệt của bạn giải mã được chúng.
2. Đặt bán kính. Kéo một trong các tay cầm góc tròn trên bản xem trước, di chuyển thanh trượt Bán kính góc, hoặc nhập một số chính xác rồi chuyển đơn vị giữa px và %.
3. Chọn kiểu góc. Bo tròn, Squircle, Vát góc hoặc Khoét lõm. Tắt Liên kết tất cả các góc để gán mỗi góc một giá trị riêng, sắp xếp trên màn hình đúng như các góc mà chúng điều khiển.
4. Thêm đệm, nền hoặc viền, nếu bạn muốn. Đệm làm canvas lớn hơn quanh ảnh, nền tô đầy nó, và vòng viền đi theo đường viền bo góc thay vì hình chữ nhật cũ.
5. Tải xuống. Giữ PNG cho các góc nhìn xuyên được, rồi nhấp Tải ảnh xuống. Bảng điều khiển báo kích thước xuất và dung lượng tệp, và hộp CSS hiện quy tắc stylesheet tương đương.

Bán kính theo pixel hoặc theo phần trăm

Bán kính tính bằng pixel là tuyệt đối: 32 px là 32 px dù ảnh rộng 400 hay 4000 pixel, nên cùng một giá trị trông ấn tượng trên hình thu nhỏ nhỏ và hầu như không thấy trên ảnh lớn. Bán kính tính bằng phần trăm được đo theo cạnh ngắn hơn của ảnh, nên nó co giãn theo bức ảnh và trông giống nhau trên mọi bản xuất. 50% là giá trị hữu ích tối đa, và nó tạo hình tròn trên ảnh vuông và hình viên nang trên ảnh chữ nhật.

Bốn kiểu góc

• Bo tròn — một phần tư hình tròn, cùng hình học mà trình duyệt vẽ cho border-radius. Dễ đoán, và là kiểu duy nhất ánh xạ một-một sang CSS.
• Squircle — góc kiểu siêu elip. Đường cong bắt đầu xa hơn dọc mỗi cạnh và chảy vào cạnh thẳng mà không có sự đổi độ cong đột ngột của hình tròn, đó là lý do hướng dẫn biểu tượng ứng dụng trên iOS và Android dùng hình này.
• Vát góc — góc bị cắt bởi một đường chéo thẳng. Sắc và mang tính kỹ thuật hơn đường cong, và vẫn sắc nét ở kích thước nhỏ.
• Khoét lõm — cung cong vào trong, lấy đi một miếng lõm. Hai góc khoét lõm ở hai phía đối diện đọc ngay như một vé hoặc một thẻ.

Chọn định dạng đầu ra

Vì JPG không có kênh alpha, xuất JPG sẽ tô các góc bị cắt bằng màu nền đã chọn thay vì để trống. Đó thường đúng là điều bạn muốn — một ảnh bo góc trắng trên trang trắng — nhưng đó không phải độ trong suốt, và không thể hoàn tác sau này.

Tính năng chính

• Riêng tư theo thiết kế: tệp được đọc bằng FileReader API của trình duyệt và vẽ trên canvas tại chỗ. Nó không bao giờ được tải lên.
• Chỉnh sửa kéo góc: kéo một tay cầm theo đường chéo trên bản xem trước và xem bán kính theo ngón tay hoặc con trỏ của bạn.
• Điều khiển từng góc: chỉ bo hai góc trên, hoặc khoét lõm một phía và để phần còn lại vuông.
• Nền xem trước: chuyển giữa bàn cờ trong suốt, trắng, tối và gradient màu để kiểm tra mép alpha trước khi tải xuống.
• Đệm, tô nền và vòng viền đều đi theo cùng đường viền bo góc.
• Tỷ lệ đầu ra: xuất ở độ phân giải gốc, hoặc thu còn 75%, 50% hoặc 25% trong cùng một lần.
• CSS có thể sao chép: quy tắc border-radius được tạo tái hiện cùng hình dạng trong stylesheet khi tệp không phải câu trả lời đúng.
• Cạnh khử răng cưa: góc được vẽ như đường cắt, nên đường cong giữ mượt thay vì hiện mép răng cưa từng bậc.

Tệp ảnh hay CSS?

Nếu ảnh bo góc sẽ vào bộ slide, PDF, chữ ký email, danh sách trên sàn thương mại hoặc bất kỳ công cụ nào không chạy stylesheet của bạn, bạn cần một tệp thật với độ trong suốt thật — xuất PNG. Nếu nó sẽ lên một trang web bạn kiểm soát, quy tắc CSS nhẹ hơn, giữ sắc nét ở mọi kích thước và dễ đổi sau này; hãy sao chép đoạn mã thay vì xuất tệp. Hai cách không loại trừ nhau: nhiều nhóm gửi PNG cho dùng bên ngoài và CSS cho trang web.

Khắc phục sự cố

• Góc trông răng cưa: nguồn có lẽ đã nhỏ. Bo ở độ phân giải lớn nhất sẵn có, rồi thu nhỏ, thay vì bo một ảnh đã bị phóng to.
• Một quầng sáng mỏng xuất hiện trên nền tối: ảnh đã có lớp trắng nướng sẵn. Thêm một hoặc hai pixel đệm với màu khớp, hoặc tăng bán kính một chút để cắt quầng đi.
• Bản tải xuống mở ra thành hình vuông trắng: định dạng là JPG hoặc nền chưa đặt thành Trong suốt. Chuyển định dạng đầu ra sang PNG.
• Ảnh rất lớn cảm giác chậm: canvas vẽ lại ảnh độ phân giải đầy đủ mỗi lần di chuyển thanh trượt. Thả thanh trượt và cho trình duyệt một lúc, hoặc giảm tỷ lệ đầu ra.
• GIF động mất hoạt ảnh: canvas xuất một khung hình. Chỉ khung đầu tiên được bo và lưu.

Câu hỏi thường gặp

Ảnh của tôi có được tải lên máy chủ không?

Không. Tệp được trình duyệt đọc bằng FileReader API và vẽ lên canvas HTML trên chính thiết bị của bạn. Không có gì được gửi tới miniwebtool, nên ảnh chụp màn hình riêng tư, tác phẩm của khách hàng và ảnh cá nhân không bao giờ rời khỏi máy tính của bạn. Bản thân trang vẫn cần kết nối internet để tải.

Vì sao các góc bo tròn lại trông trắng hoặc đen thay vì trong suốt?

Chỉ PNG và WebP mới lưu được độ trong suốt. Nếu bạn xuất JPG, định dạng này không có kênh alpha, nên các góc bị cắt sẽ được tô bằng màu nền. Chọn PNG trong danh sách Định dạng đầu ra và đặt nền thành Trong suốt. Nếu các góc vẫn trông sai, hãy kiểm tra xem ứng dụng hoặc trang web bạn dán vào có hỗ trợ alpha không, vì một số trình chỉnh sửa làm phẳng độ trong suốt PNG lên nền trắng.

Làm sao để tạo ảnh hình tròn hoàn hảo?

Chuyển đơn vị bán kính sang phần trăm và đặt bán kính thành 50%. Trên ảnh vuông, thao tác này tạo hình tròn hoàn hảo. Trên ảnh chữ nhật, nó tạo hình viên nang hoặc sân vận động, vì bán kính phần trăm được đo theo cạnh ngắn hơn. Dùng cài đặt sẵn Hình tròn để cắt thành hình vuông và bo góc chỉ với một lần nhấp.

Sự khác biệt giữa góc bo tròn, squircle, vát góc và khoét lõm là gì?

Bo tròn là một phần tư hình tròn, cùng hình dạng mà CSS border-radius vẽ. Squircle trải đường cong xa hơn dọc mỗi cạnh để chỗ nối mượt và liên tục, đó là kiểu dùng cho biểu tượng ứng dụng iOS và Android. Vát góc cắt góc bằng một đường chéo thẳng. Khoét lõm cong vào trong thay vì ra ngoài và khoét một miếng lõm ở mỗi góc, phù hợp với vé, phiếu giảm giá và huy hiệu.

Bán kính tính bằng pixel có khớp với CSS border-radius trên trang web của tôi không?

Bán kính được áp dụng theo pixel của chính ảnh, nên chỉ khớp CSS khi ảnh được hiển thị ở kích thước tự nhiên. Một bản xuất rộng 1200 pixel hiển thị trong cột rộng 600 pixel bị thu còn một nửa, nên bán kính 48 pixel trông như 24 pixel trên màn hình. Dùng đơn vị phần trăm để có kết quả độc lập với kích thước, hoặc sao chép đoạn CSS mà công cụ tạo ra, vốn đã báo giá trị tương đương đã được chia tỷ lệ.

Tôi có thể giữ chất lượng ảnh và độ phân giải gốc không?

Có. Bản xuất giữ nguyên kích thước pixel gốc trừ khi bạn đổi tỷ lệ đầu ra hoặc thêm đệm, và PNG không mất dữ liệu nên không bị nén lại. Chỉ các pixel góc thay đổi, từ đục sang trong suốt. WebP và JPG là định dạng mất dữ liệu, nên dùng chúng khi kích thước tệp quan trọng hơn việc sao chép chính xác pixel nguồn.