Phương pháp hay nhất để xuất canvas với hình ảnh chất lượng cao là gì?

Question

Tôi cần sự giúp đỡ của bạn. Tôi giải thích trường hợp của mình: Tôi đang sử dụng thư viện fabric.js để đặt hình dạng, văn bản, v.v. trong ứng dụng của tôi. Kích thước canvas của tôi có 1000x1000 pixel (khoảng 26,45x26,45 cm). Tôi chỉ có một tập lệnh tải lên hình ảnh để tải hình ảnh lên với chất lượng cao, như 300 dpi.

Về cơ bản những gì tôi làm là như sau: - vẽ canvas (tải lên hình ảnh, đặt văn bản, v.v ...); - thay đổi kích cỡ canvas nhân với hệ số tỷ lệ để có thể ở cuối để có hình ảnh với 300dpi; - lưu canvas ở định dạng PNG; - sử dụng php/ajax và Imagick, đặt canvas với chất lượng 300 dpi, lưu ở định dạng jpg.

Vấn đề là: khi tôi lưu canvas, chất lượng của hình ảnh được tải lên sẽ là nghị định, vì tôi thay đổi kích cỡ canvas là 72 dpi (tại thời điểm tôi lưu ở PNG).

Tôi nghĩ giải pháp có thể là: khi tải lên hình ảnh, lưu vị trí vào mảng có vị trí và kích thước x và y vào cuối toàn bộ quá trình, thay thế hình ảnh bằng JPG. Nếu đây là cách tốt nhất, bạn có thể tạo nó bằng thư viện Imagick hoặc bằng PHP?

Tôi muốn biết ý kiến ​​của bạn về điều đó.

Cảm ơn bạn.

Answer 1

DPI không quan trọng chút nào khi xử lý hình ảnh. Hình ảnh được đo bằng pixel vì vậy đây là những gì bạn cần điều chỉnh. Bạn có thể bỏ qua DPI một cách an toàn vì nó không có ý nghĩa trong ngữ cảnh này.

Mở rộng quy mô sẽ không giúp bạn ở đây - hãy nhớ rằng bạn đang làm việc với thiết bị pixel, chứ không phải vectơ, vì vậy canvas cần phải có kích thước bạn muốn sử dụng để in vv hoặc bạn sẽ giảm chất lượng do nội suy khi mở rộng nó.

Đây là cách thực hiện:

Bạn cần tính toán trước kích thước canvas theo pixel theo kích thước bạn muốn trong giai đoạn cuối cùng.

Cho phép nói rằng bạn muốn in hình ảnh 15 x 10 cm (hoặc khoảng 6 x 4 inch) @ 300DPI. Sau đó bạn tính toán các điểm ảnh: (! 4 = 10 cm do đó, một chút kết quả khác nhau, số chọn vì đơn giản)

Width : 10 cm * 300/2.54 = 1181 pixels 
Height: 15 cm * 300/2.54 = 1772 pixels 

Đối inch chỉ đơn giản là nhân với DPI:

Width : 4 in * 300 = 1200 pixels 
Height: 6 in * 300 = 1800 pixels 

Đối với bạn hình ảnh ở 26,45 cm @ 300 DPI canvas sẽ cần phải là:

26.45 cm * 300 DPI/2.54 inches = 3124 pixels. 

Để hiển thị canvas đó trong một khu vực nhỏ hơn trên màn hình bạn sử dụng CSS để hiển thị t yếu tố của anh ấy, ví dụ -

<canvas width="3124" height="3124" style="width:600px;height:600px;"></canvas> 

Bây giờ bạn có thể vẽ lên canvas ở vị trí thực tế của nó và nó sẽ hiển thị trên màn hình (nhưng giữ lại tất cả thông tin trên chính khung hình). Nếu bạn sử dụng tọa độ chuột, bạn chỉ cần tỷ lệ vị trí chuột tương ứng (canvas pos = điều phối chuột * 3124px/600px).

Để thu phóng, v.v. trở nên phức tạp hơn, nhưng nguyên tắc vẫn là: kích thước cuối cùng của hình ảnh phải là kết quả cuối cùng.

Giới thiệu về DPI: nếu hình ảnh này là 72 DPI hoặc 300 DPI, số lượng pixel sẽ giống hệt nhau. Lý do như đã đề cập là hình ảnh được đo bằng pixel.

DPI là giá trị tùy ý khi nói đến thiết bị pixel (bitmap, màn hình, máy ảnh, v.v.) và chỉ được sử dụng cho phần mềm DTP để có gợi ý về kích thước cho bản in cuối cùng. chia tỷ lệ hình ảnh liên quan đến trang bạn đang sử dụng để đặt in.