Trình xoay hình ảnh miễn phí

90/180/270 và mọi góc khác, ranh giới không mất mát

Có hai loại xoay ảnh hoàn toàn khác nhau. Xoay đúng 90°, 180° hoặc 270° là không mất mát: mỗi pixel nguồn rơi vào đúng một pixel đích nguyên, bitmap được hoán vị chứ không phải tính lại, và không có nội suy, không pha trộn, không mất chất lượng dù chỉ một chút. Xoay 90° theo chiều kim đồng hồ ánh xạ pixel (x, y) trong ảnh W × H tới vị trí (H − 1 − y, x) trong đầu ra H × W mới. Xoay 180° ánh xạ (x, y) tới (W − 1 − x, H − 1 − y). Đây là các phép hoán vị bộ nhớ thuần túy.

Bất kỳ góc nào khác đều cần lấy mẫu lại: với mỗi pixel đích, thuật toán tính xem pixel đó sẽ đến từ đâu trong nguồn (bằng phép xoay ngược), thấy vị trí nguồn thường là phân số, và kết hợp các pixel nguồn xung quanh bằng nhân nội suy. Các nhân phổ biến:

• Láng giềng gần nhất: chọn pixel nguồn gần nhất duy nhất. Nhanh, giữ nguyên cạnh sắc, nhưng tạo ra các «jaggies» rõ ràng dọc theo đường xoay.
• Song tuyến tính: trung bình có trọng số của bốn pixel nguồn gần nhất. Mượt mà, nhanh, mặc định cho hầu hết các triển khai canvas trình duyệt.
• Song khối: trung bình có trọng số của 16 pixel nguồn gần nhất bằng nhân khối mượt mà. Sắc nét hơn song tuyến tính; mặc định trong tùy chọn song khối của Photoshop.
• Lanczos: hàm sinc cửa sổ trên vùng lân cận 6×6 hoặc 8×8. Nhân chất lượng cao nhất đang được sử dụng phổ biến; chậm hơn đáng kể; có thể tạo nhiễu vòng trên cạnh sắc.

Mỗi nhân đánh đổi giữa bảo toàn chi tiết và nhiễu vòng hay làm mờ, và tất cả đều có chung một sự thật: bất kỳ phép xoay không bội 90 nào cũng loại bỏ một phần thông tin nguồn. Chi tiết tần số cao tinh tế (đường một pixel, cạnh chữ định vị dưới pixel, pixel art aliased sạch) không thể sống sót qua phép xoay 30° hoặc 45° qua bất kỳ nhân nào mà không bị làm mềm. Trực giác hữu ích: xoay 1°, rồi ngược −1°, và bạn không thu được ảnh gốc mà là bản sao mềm hơn. Xoay 90° rồi −90° và bạn thu được đúng bitmap gốc.

EXIF Orientation: lý do thầm lặng khiến ảnh của bạn bị nghiêng

Vấn đề «trình duyệt hiển thị ảnh tôi bị lộn ngược» có nguyên nhân cụ thể. Smartphone hiện đại không xoay ảnh về mặt vật lý khi bạn chụp điện thoại nằm ngang, chúng lưu hướng cảm biến gốc và thêm thẻ EXIF Orientation (được JEIDA giới thiệu khoảng năm 1995) báo cho trình xem biết cách hiển thị ảnh. Thẻ có 8 giá trị có thể: 1=bình thường, 3=180°, 6=90° theo chiều kim đồng hồ, 8=90° ngược chiều kim đồng hồ, cộng thêm bốn biến thể phản chiếu.

Trước khoảng năm 2010, thiết bị ghi pixel đã xoay và Orientation = 1; từ đó trở đi, điện thoại hiện đại lưu pixel gốc và đặt Orientation thay thế, tiết kiệm bộ nhớ và pin. Điểm quan trọng: trình duyệt trước đây không tôn trọng EXIF Orientation bên ngoài các phần tử <img>. Kéo ảnh chụp điện thoại dọc vào công cụ dựa trên canvas, canvas sẽ vẽ nó nằm ngang trừ khi công cụ đọc và áp dụng thẻ Orientation rõ ràng. Thuộc tính CSS image-orientation thêm vào năm 2017 đã sửa điều này cho HTML; createImageBitmap() hiện đại với imageOrientation: 'from-image' sửa nó cho canvas. Chrome 81 (tháng 4 năm 2020) đặt image-orientation: from-image làm mặc định cho các phần tử <img>.

Nếu bạn từng xoay ảnh trong trình duyệt và nó xuất hiện «đã được xoay», hoặc bị xoay hai lần: bạn đã gặp vấn đề này. Cách sửa trung thực là công cụ xoay phải đọc thẻ EXIF, áp dụng hướng đó trước, rồi cộng thêm góc xoay người dùng chọn.

Canvas thực hiện ra sao

Phương thức rotate(angle) của Canvas xoay hệ tọa độ quanh gốc canvas (0, 0). Vì gốc là góc trên trái, gọi ngây thơ ctx.rotate(angle) rồi ctx.drawImage(img, 0, 0) xoay ảnh quanh góc trên trái của nó, đẩy hầu hết pixel đã xoay ra ngoài canvas về phía trên trái. Cách thông thường để sửa là kẹp dịch-xoay-dịch:

ctx.save();
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(angle * Math.PI / 180);   // canvas takes radians
ctx.translate(-image.width / 2, -image.height / 2);
ctx.drawImage(image, 0, 0);
ctx.restore();

Với phép xoay 90/180/270, canvas đích cần được kích thước để vừa với chiều đã hoán đổi (90/270) hoặc gốc (180). Với góc tùy ý, hình chữ nhật bao quanh ảnh đã xoay lớn hơn chiều nguồn, với ảnh W × H xoay θ, hộp bao mới rộng |W·cos(θ)| + |H·sin(θ)| và cao |W·sin(θ)| + |H·cos(θ)|. Ảnh 1.000 × 800 xoay 45° do đó cần canvas khoảng 1.273 × 1.273 để chứa mọi pixel đã xoay. Nút bật/tắt «Crop to fit» quyết định có mở rộng canvas (giữ mọi pixel, với các góc tam giác trong suốt hoặc trắng) hay thu về kích thước gốc (cắt nội dung đã xoay).

Đầu ra PNG so với JPG, vấn đề góc

Khi phép xoay không bội 90 mở rộng canvas, bốn góc tam giác cần được điền bằng thứ gì đó. PNG có thể kết xuất các khoảng trống đó thành pixel hoàn toàn trong suốt (alpha = 0), hoàn hảo để chồng ảnh đã xoay lên nền khác. JPG không có kênh alpha và kết xuất các pixel chưa điền bằng màu xóa của canvas, mà JPEG làm phẳng thành màu đen đục. Người dùng tải JPG của ảnh đã xoay rồi ngạc nhiên vì có hình nêm đen ở góc đã gặp đúng vấn đề này.

Công cụ này kết hợp đầu ra JPG lên nền trắng trước khi mã hóa để tránh vấn đề góc đen. Đầu ra PNG giữ nguyên độ trong suốt. Lựa chọn giữa các định dạng: PNG cho bất cứ thứ gì có độ trong suốt hoặc khi bạn sẽ chỉnh sửa thêm, JPG cho ảnh hướng đến đích cuối cùng nơi kích thước file quan trọng.

Còn một sắc thái nữa với JPG. Xoay JPEG không mất mát về mặt kỹ thuật là có thể, tiện ích jpegtran sắp xếp lại ranh giới khối JPEG (các khối hệ số DCT 8×8) mà không giải mã ảnh, nên phép xoay 90/180/270 có thể giữ nguyên dữ liệu nén gốc và xuất JPEG chất lượng bit-identical với bản gốc. Điểm hạn chế là ràng buộc cạnh iMCU: kích thước ảnh phải là bội số của kích thước khối, nếu không phép xoay hoặc cắt vài pixel cạnh hoặc để lại khối không hoàn chỉnh. Trang này dùng API canvas thay vì thao tác khối kiểu jpegtran, nên đầu ra JPG ở đây luôn được mã hóa lại, ở chất lượng tối đa, nhưng với mất mát thế hệ nhỏ vốn có trong bất kỳ lần mã hóa lại JPEG nào.

Khi nào bạn dùng công cụ xoay trình duyệt

• Ảnh smartphone bị nhập nghiêng vào ứng dụng desktop không tôn trọng EXIF Orientation.
• Tài liệu quét bị xoay 90° vì tính năng tự động phát hiện của máy quét bị sai.
• Hướng in: chuẩn bị ảnh cho in dọc so với in ngang.
• Bố cục nghệ thuật và thiết kế: xoay ảnh để thử các hướng hình ảnh khác nhau.
• Sửa nhanh trước khi tải lên mạng xã hội khi tính năng tự động xoay của nền tảng bị nhầm.
• Nội dung nhạy cảm: tài liệu công việc, ảnh CMND, ảnh gia đình, mà bạn không muốn tải lên dịch vụ bên thứ ba.

Câu hỏi thêm

Ảnh của tôi có mất chất lượng nếu tôi chỉ xoay 90° không?

Không, không mất mát trong bước xoay, các phép xoay 90/180/270 là hoán vị không mất mát. Rủi ro chất lượng là bộ mã hóa. Nếu bạn tải JPEG lên, công cụ này giải mã, xoay mảng pixel, rồi mã hóa lại. Việc mã hóa lại thêm một lượng nhỏ mất mát thế hệ (thường vô hình ở chất lượng tối đa) vì JPEG là lossy. Để tránh điều đó, tải xuống PNG, hoặc dùng công cụ chuyên dụng như jpegtran sắp xếp lại khối DCT mà không giải mã.

Tại sao xoay SVG vẫn giữ ảnh sắc nét?

Vì SVG là vector, nó lưu hình dạng dưới dạng đường toán học thay vì lưới pixel. Xoay SVG qua transform="rotate(angle)" chỉ sửa tọa độ đường; không có bước lấy mẫu lại và không mất chất lượng ở bất kỳ góc nào. Trình duyệt rasterize lại các đường đã xoay mỗi lần vẽ lại, luôn ở mức thu phóng hiện tại. Công cụ này xử lý ảnh raster (PNG, JPG, WebP) nên gặp chi phí lấy mẫu lại; SVG tốt nhất nên được xoay bằng cách chỉnh trực tiếp thuộc tính transform hoặc dùng trình chỉnh sửa vector như Inkscape hay Illustrator.

Tại sao các góc màu trắng thay vì trong suốt?

Bạn đang tải xuống đầu ra JPG. JPG không có kênh alpha, nên các khoảng trống tam giác do phép xoay không bội 90 để lại được điền trắng trước khi mã hóa (hoặc đen, với các công cụ không kết hợp lên nền, đây là sự ngạc nhiên góc tối quá phổ biến). Chuyển sang tải PNG và các góc sẽ trong suốt đúng cách.

Tôi có thể xoay theo bước 1° không?

Có. Thanh trượt trên cùng di chuyển theo bước 1°; trường nhập liệu chấp nhận bất kỳ số thập phân nào (45,5° hoạt động tốt). Với công việc căn chỉnh rất chính xác (ví dụ, làm thẳng đường chân trời nghiêng trong ảnh) độ chính xác dưới một bậc có thể quan trọng. Mỗi phép xoay không bội 90 tốn một lượng nhỏ chất lượng, vì vậy với tinh chỉnh lặp đi lặp lại hãy xem xét thực hiện một phép xoay duy nhất đến góc đích cuối cùng thay vì nhiều điều chỉnh tăng dần.

Có dữ liệu nào được gửi lên máy chủ không?

Không. Ảnh được giải mã bởi trình duyệt của bạn, vẽ lên canvas qua Canvas 2D API, và mã hóa lại để tải xuống, tất cả trong tiến trình trình duyệt của bạn. File không bao giờ rời khỏi thiết bị của bạn. Công cụ cũng hoạt động ngoại tuyến sau khi trang đã tải.