Hình ảnh & hình ảnh · Trình chỉnh sửa hình ảnh trên mạng xã hội
Cách hoạt động của việc thay đổi kích thước hình ảnh trên trình duyệt: Canvas, drawImage và Resampling
· Cách thức hoạt động
image-resizing vải vẽ browser-processing
Trình duyệt có thể giải mã một bức ảnh, vẽ nó vào khung vẽ ở kích thước mới và mã hóa kết quả, tất cả đều không cần máy chủ. Bài đăng này tuân theo quy trình đó, giải thích chất lượng được hay bị mất ở đâu và cho biết lý do tại sao giới hạn kích thước duy nhất là bộ nhớ thiết bị của bạn.
Không tải lên, không máy chủ, vẫn được thay đổi kích thước — câu hỏi cụ thể về việc công việc diễn ra ở đâu khi một trang thu nhỏ ảnh 20 megapixel
Một bức ảnh có thể trở thành một bức chân dung 1080 của 1350 mà không cần truy cập máy chủ xử lý hình ảnh. Social Image Resizer nhận Tệp từ bộ chọn trình duyệt, xác thực loại và kích thước MIME của nó, đồng thời gọi createImageBitmap. Bitmap được giải mã đó vẫn là nguồn cho mọi đầu ra đã chọn, do đó, một đối tượng cục bộ có thể cung cấp nhiều khung vẽ có hình dạng khác nhau.
Bản xem trước hiển thị không phải là bản xuất cuối cùng ẩn sau yêu cầu mạng. Đó là một bản vẽ canvas nhỏ hơn có cùng trạng thái tạo khung: tỷ lệ mục tiêu, thu phóng, bù đắp, chế độ vừa vặn và nền. Xuất các bản lặp lại sau đó hiển thị ở các kích thước đặt trước, mã hóa Blob và giao Blob cho các điều khiển tải xuống trong trang.
Giải mã mang tính cục bộ nhưng công cụ này cũng thực thi giới hạn đầu vào 40 MB
Kế hoạch cho biết bộ nhớ thiết bị là ranh giới thực tế duy nhất nhưng đường dẫn đầu vào được vận chuyển cũng có giới hạn tệp 40 MB rõ ràng. JPEG, PNG và WebP được chấp nhận; các loại khác bị từ chối trước khi giải mã. Sau cổng đó, createImageBitmap yêu cầu trình duyệt biến byte tệp nén thành chiều rộng, chiều cao và pixel được giải mã có thể sử dụng được bằng canvas.
Các pixel được giải mã có thể chiếm nhiều bộ nhớ hơn so với tệp nén và mỗi khung vẽ đầu ra yêu cầu phân bổ riêng. Do đó, trình kết xuất gọi trình bảo vệ ngân sách pixel được chia sẻ trước khi tạo canvas. Đó là ràng buộc thứ hai, hướng đến thiết bị, không được phép hứa rằng mọi tệp bên dưới 40 MB sẽ phù hợp với mọi đầu ra được yêu cầu trên mọi máy.
drawImage chia tỷ lệ bitmap đầy đủ được định vị trong khi các clip canvas đầu ra bị tràn
ToolAcre không tính toán hình chữ nhật cắt nguồn và chuyển tám đối số nguồn và đích cho drawImage. Nó tính toán tỷ lệ từ các kích thước nguồn và đích, định vị toàn bộ bitmap được chia tỷ lệ và vẽ nó lên một khung vẽ có các cạnh cắt bớt bất kỳ phần tràn nào. Trong chế độ che phủ, việc cắt xén là cắt xén; trong chế độ chứa toàn bộ bitmap vẫn hiển thị.
Sự khác biệt quan trọng vì cắt và thay đổi kích thước không phải là từ đồng nghĩa. Việc thay đổi kích thước sẽ thay đổi kích thước mà bitmap được lấy mẫu. Việc cắt xén sẽ loại bỏ mọi thứ nằm ngoài khung đầu ra hữu hạn. Một lệnh gọi drawImage có thể tham gia vào cả hai hiệu ứng ở đây, nhưng việc cắt xén được tạo ra bằng hình học khung và cắt bớt thay vì bằng cách ghi lại tệp nguồn trước.
Lấy mẫu lại một cách chi tiết — cài đặt làm mượt, gợi ý 'chất lượng cao' yêu cầu trình duyệt thực hiện và tại sao kết quả hơi khác nhau giữa các trình duyệt
Trước khi vẽ, trình kết xuất sẽ bật imageSmoothingEnabled và đặt imageSmoothingQuality ở mức cao. Đó là các điều khiển canvas của trình duyệt, không phải là yêu cầu về Lanczos, bicubic hoặc hạt nhân khác có tên. Việc triển khai không thể đảm bảo các mẫu giống nhau trên các công cụ vì API hiển thị gợi ý về chất lượng thay vì bảng hệ số chính xác của trình duyệt.
Một so sánh hữu ích giúp giữ cố định nguồn, kích thước đầu ra và trình duyệt, sau đó kiểm tra các cạnh chéo, đường nét mảnh và họa tiết lặp lại. Nếu trình duyệt khác hơi khác một chút, điều đó không có nghĩa là tỷ lệ mục tiêu đã thay đổi. Điều đó có nghĩa là cùng một yêu cầu hình học được chuyển qua một triển khai canvas khác, đó chính xác là lý do tại sao bài viết tránh phần trăm hiệu suất hoặc chất lượng được phát minh.
Mã hóa đầu ra - biến khung vẽ trở lại thành tệp hình ảnh được mã hóa và cung cấp nó để tải xuống
Canvas xuất sẽ trở thành Blob thông qua OffscreenCanvas.convertToBlob khi phương thức đó tồn tại hoặc HTMLCanvasElement.toBlob nếu không thì. Người dùng chọn JPEG, PNG hoặc WebP. Giá trị chất lượng được cung cấp cho bộ mã hóa, mặc dù PNG không sử dụng điều khiển giảm chất lượng theo cách JPEG và WebP thực hiện. Số byte kết quả được đo chứ không phải ước tính.
Đối với một số mục tiêu đã chọn, công cụ xây dựng từng Blob theo trình tự, hiển thị kích thước thực và kích thước đo được, đồng thời có thể đóng gói các tệp đã được mã hóa thành ZIP. Bộ lưu trữ ZIP không cải thiện khả năng nén hình ảnh ở đây; nội dung lưu ý rằng các định dạng đó đã được nén. Các bản tải xuống riêng lẻ và bản lưu trữ đều bắt nguồn từ các byte được tạo cục bộ.
Việc triển khai này thực hiện công việc xuất trên luồng chính, không phải trong Web Worker
Sổ làm việc cho biết công việc nặng thường chạy trong Web Worker, nhưng ứng dụng này nhập trực tiếp các hàm cắt và kết xuất vào main.js và lặp qua các mục tiêu ở đó. Không có Worker nào được tạo trong đường dẫn đã kiểm tra. Trang vẫn có thể sử dụng được cho các công việc thông thường, nhưng khả năng phản hồi phải được quan sát thay vì quy cho một kiến trúc không có.
Việc cách ly mạng được hỗ trợ bởi hai loại bằng chứng. Các thử nghiệm cốt lõi cài đặt một bộ bảo vệ mạng và đóng khung mọi cài đặt trước mà không cần thử, trong khi bản ghi sản phẩm đánh dấu quá trình xử lý cục bộ. Kiểm tra bảng điều khiển mạng thời gian chạy có thể thêm bằng chứng triển khai. Nó phải phân biệt việc tải lên hình ảnh với nội dung trang thông thường hoặc phân tích được tiết lộ thay vì xác nhận rằng toàn bộ trang không đưa ra yêu cầu nào.
Điều này không bao gồm những gì - thư viện thay đổi kích thước được tăng tốc GPU và đường dẫn hình ảnh phía máy chủ
Tuyến đường này được cố ý xây dựng trên các nguyên mẫu của trình duyệt thay vì thư viện GPU hoặc đường truyền phương tiện từ xa. Nó không hiển thị hạt nhân lấy mẫu lại có thể lựa chọn, các thuật toán thay thế điểm chuẩn hoặc hứa hẹn xử lý hàng loạt được tăng tốc. Một hình ảnh nguồn tạo ra một số hình ảnh cắt xén; nhiều tệp nguồn không liên quan thuộc về một quy trình công việc khác.
Những loại trừ đó giữ cho lời hứa có thể kiểm chứng được. Mã này chứng minh xác thực tệp, giải mã bitmap, đóng khung số học, vẽ canvas, mã hóa Blob và tập hợp tải xuống. Nó không chứng minh cách nhóm máy chủ sẽ thay đổi kích thước các pixel giống nhau hoặc đường dẫn GPU nào mà trình duyệt có thể chọn nội bộ. Các xác nhận quyền sở hữu dừng lại ở các API Web có thể quan sát được sử dụng.
Bài học rút ra: trình duyệt của bạn đã tích hợp sẵn trình chỉnh sửa lại — Trình chỉnh sửa hình ảnh xã hội điều khiển nó cho bạn, cắt xén và chia tỷ lệ theo tỷ lệ khung hình của nền tảng mà không cần tải tệp lên
Trình duyệt đã cung cấp các thao tác thiết yếu nhưng kết quả hữu ích phụ thuộc vào hình học chính xác xung quanh chúng. Social Image Resizer chọn tỷ lệ tối đa cho bìa, tỷ lệ tối thiểu để chứa, kẹp chuyển động, xem trước hướng dẫn khu vực an toàn một cách riêng biệt và xuất theo kích thước mục tiêu chính xác. Sự phối hợp đó biến bản vẽ cấp thấp API thành quy trình làm việc về tài sản xã hội có thể lặp lại.
Kiểm tra quy trình bằng hình ảnh gốc thay vì bản sao được thu nhỏ trước đó. Chọn tỷ lệ tùy chỉnh hoặc cài đặt sẵn của công cụ hiện tại, di chuyển chủ đề, xuất một lần và kiểm tra kích thước đã tải xuống. Bằng chứng là tệp cục bộ bạn nhận được và đường dẫn mã tạo ra tệp đó, chứ không phải khẳng định rằng mọi trình duyệt đều sử dụng một trình lấy mẫu lại ẩn giống hệt nhau.