Hình ảnh & hình ảnh · Trình chỉnh sửa hình ảnh & bản vẽ của trình duyệt
Cách cắt xén hoạt động trong trình chỉnh sửa hình ảnh của trình duyệt: canvas và pixel
· Cách thức hoạt động
image-editing vải vẽ browser-processing
Việc cắt xén trông có vẻ đơn giản nhưng trình chỉnh sửa trình duyệt phải giải mã tệp, sao chép một hình chữ nhật pixel vào khung vẽ và mã hóa một tệp hoàn toàn mới. Bài đăng này hướng dẫn từng bước và giải thích những gì thay đổi và những gì vẫn giữ nguyên.
Tại sao ảnh đã cắt là tệp mới chứ không phải tệp cũ đã được cắt bớt — việc cắt ảnh không thể đơn giản xóa byte khỏi JPEG hoặc PNG, do đó trình chỉnh sửa sẽ giải mã và mã hóa lại
JPEG lưu trữ dữ liệu hình ảnh đã nén chứ không phải một khoảng byte có thể xóa độc lập trên mỗi hàng hiển thị. Việc cắt bỏ phần cuối của byte sẽ làm hỏng tệp chứ không cắt bớt một bức ảnh. Do đó, trình chỉnh sửa trình duyệt sẽ giải mã hình ảnh, chọn hình chữ nhật và tạo một tệp được mã hóa mới. Bản gốc vẫn còn trên đĩa của bạn. Nếu bạn cần chỉnh sửa có thể đảo ngược, hãy giữ lại nguồn và tọa độ lựa chọn: phần cắt đã xuất không chứa các pixel bị thiếu.
Giải mã hình ảnh thành bitmap - cách trình duyệt biến các byte đã nén thành lưới chiều rộng × chiều cao RGBA pixel trước khi có thể chọn bất kỳ thứ gì
Trình duyệt biến JPEG, PNG hoặc WebP đã nén thành bitmap với các mẫu chiều rộng × chiều cao. Hình ảnh 4000×3000 đại diện cho 12 triệu pixel trước bất kỳ phần cắt nào và vài byte trên mỗi pixel có thể làm cho dấu chân trong bộ nhớ của nó lớn hơn nhiều so với tệp trên đĩa. ToolAcre kiểm tra giới hạn hình ảnh và canvas trước khi phân bổ không gian làm việc rất lớn. Những gì bạn nhìn thấy trên màn hình có thể được phóng to để vừa với khung nhìn; hình chữ nhật cắt vẫn phải được ánh xạ trở lại tọa độ hình ảnh trước khi sao chép pixel.
Chọn một hình chữ nhật: tọa độ nguồn và đích - cách drawImage sao chép một vùng đã chọn vào canvas có kích thước mục tiêu và ý nghĩa của việc làm tròn thành toàn bộ pixel
Hình chữ nhật là gốc (x,y) cộng với chiều rộng và chiều cao, được đo bằng pixel nguồn. ToolAcre ràng buộc hình chữ nhật đó vào giới hạn tài liệu và cắt mọi lớp hiển thị chứ không chỉ là ảnh chụp màn hình của bản xem trước tổng hợp. Đối với mỗi lớp, nó tạo một canvas đích và gọi drawImage với chín đối số: canvas nguồn, hình chữ nhật nguồn, điểm gốc đích và kích thước đích. Với kích thước nguồn và đích bằng nhau, các pixel được chọn mà không cần bước thay đổi kích thước. Vị trí con trỏ phân số được làm tròn hoặc gắn vào các pixel canvas có thể biểu thị.
Mã hóa kết quả trở lại tệp - tại sao bước xuất lại quyết định định dạng và chất lượng cũng như tại sao việc cắt xén lại chính xác trong khi mã hóa có thể không
Xuất khẩu là một hoạt động riêng biệt với trồng trọt. Canvas đã chỉnh sửa có thể được mã hóa thành PNG, JPEG hoặc WebP tùy thuộc vào tùy chọn và sự hỗ trợ của trình duyệt. PNG có thể bảo toàn các pixel được cung cấp cho bộ mã hóa không mất dữ liệu của nó; JPEG loại bỏ một số chi tiết ngay cả khi hình chữ nhật được chọn chính xác và độ trong suốt cần có nền có chủ ý khi sử dụng định dạng không có alpha. Tệp mới cũng có thể bỏ qua siêu dữ liệu nguồn hoặc thông tin màu sắc, vì vậy đừng bao giờ mô tả nó dưới dạng tập hợp con từng byte của tệp gốc.
Ví dụ đã thực hiện: cắt ảnh 4000×3000 thành biểu ngữ 1600×900 — theo số pixel thông qua giải mã, sao chép và xuất
Đối với một blogger có ảnh 4000×3000, biểu ngữ 1600×900 ở giữa bắt đầu tại x=1200 và y=1050. drawImage sao chép các cột 1200 đến 2799 và các hàng 1050 đến 1949 tới đầu ra 1600×900: 1.44 triệu pixel thay vì 12 triệu pixel. Thay vào đó, nếu bạn yêu cầu người chỉnh sửa thu nhỏ toàn bộ bức ảnh thành 1600×900, thì bạn sẽ thay đổi tỷ lệ khung hình và lấy mẫu lại thay vì cắt xén. Trên điện thoại có bộ nhớ hạn chế, trình chỉnh sửa có thể giảm đầu vào rất lớn trước tiên, vì vậy hãy kiểm tra kích thước được hiển thị trước khi lặp lại các tọa độ này.
Những gì một cây trồng xuất khẩu không thể phục hồi từ bức ảnh gốc
Đây không phải là việc cắt xén khối JPEG không mất dữ liệu: ứng dụng sẽ vẽ các pixel và xuất một vùng chứa mới. Tệp 1600×900 đã xuất cũng không thể khôi phục các lề bị loại bỏ sau khi bạn đóng tệp gốc. Một tài liệu chỉnh sửa theo lớp lại khác: việc cắt xén tác động lên các lớp tài liệu trong khi xuất chúng thành hình ảnh đã tải xuống. Đối với tài liệu nhạy cảm, việc cắt bớt lề sẽ an toàn hơn việc chỉ vẽ một lớp phủ mờ, nhưng hãy kiểm tra các pixel đã xuất và giữ riêng tư cho bản gốc.
Bài học rút ra: pixel chính xác, vùng chứa mới - lý do cắt xén trình duyệt là chính xác và cách Trình chỉnh sửa hình ảnh & bản vẽ của trình duyệt thực hiện điều đó mà không cần tải tệp lên
Việc cắt trình duyệt sẽ xác định chính xác những pixel được giải mã nào cần giữ lại, trong khi bộ mã hóa được chọn sẽ kiểm soát tệp đã tải xuống. Trình chỉnh sửa hình ảnh & bản vẽ của trình duyệt thực hiện cả hai bước trên thiết bị của bạn: tải ảnh, chọn hình chữ nhật, áp dụng cắt xén và xuất. Mạng không cần byte ảnh cho cả hai bước nhưng không được nhầm lẫn nội dung trang web và yêu cầu AdSense/analytics được tiết lộ với việc tải tệp lên trong DevTools.