canvas drawImage quality

Question

Đây là hình ảnh .png (bên phải) và phần tử canvas mà tôi đã vẽ hình ảnh (ở bên trái). Bạn có thể nhận thấy sự khác biệt về chất lượng không? Canvas làm cho hình ảnh bị mất chất lượng đáng chú ý. Chúng ta có thể làm gì?

Tôi đã quan sát kết quả này trên Chrome và IE9. Những người khác có thể sẽ làm điều tương tự. Làm thế nào tôi làm cho hình ảnh khá thông thường: Trong kịch bản tôi có thể tạo một đối tượng mới Image(), sau khi nó được nạp tôi gọi
context.drawImage(myimage, x, y);

EDIT:

Đây là hình ảnh ban đầu tôi quan sát trên canvas:

Và đây là những gì canva s làm cho sau khi tôi đã viết:
context.drawImage(myimage,parseInt(x),parseInt(y));

tôi có thể nói gì, người đàn ông câu trả lời tuyệt vời. Sharpshooting lúc tốt nhất của nó. Chiếc mũ là tắt cho bạn.

EDIT2:

tôi đã cố gắng context.drawImage(myimage, parseInt(x) + 0.5, parseInt(y)+ 0.5);, đây là kết quả:

Tôi nghĩ đó là tồi tệ hơn lần thứ nhất. Tôi quan sát điều này trên chrome, trên IE9 nó hơi giống xấu.

Answer 1

Tôi vừa tạo một lớp phủ của cả hai hình ảnh để chúng trung hòa lẫn nhau. Nó không hoạt động, tôi gặp khó khăn với các cạnh.

Hãy kiểm tra xem tọa độ của bạn x, y là các số nguyên. Sử dụng số điểm nổi đây có thể làm mờ hình ảnh của bạn như một số triển khai cố gắng để làm cho nó "giữa các điểm ảnh"

context.drawImage(myimage, parseInt(x), parseInt(y)); 

Nếu điều này không làm việc, hoặc, cố gắng sử dụng các giá trị số nguyên + 0,5
tôi biết để triển khai OpenGL, bạn phải sử dụng tọa độ với 0,5 để đạt được trọng tâm của pixel.

context.drawImage(myimage, parseInt(x)+0.5, parseInt(y)+0.5); 

---

EDIT:

Check-out this page trên HTML5Rocks!

Answer 2

Tôi biết điều này đã được trả lời, nhưng tôi muốn cung cấp thêm thông tin để nói về những gì đang xảy ra ở đây và những gì có thể được thực hiện.

---

này là vì làm mịn hình ảnh, mặc định là mịn các thuật toán như Bilinear/trilieaner/bicubic trên vải theo mặc định, trong khi những gì bạn muốn được biết đến như khu vực gần hàng xóm.

Đặc điểm kỹ thuật gần đây đã thêm thuộc tính được gọi là imageSmoothingEnabled, mặc định là true và xác định xem hình ảnh được vẽ trên tọa độ không nguyên hoặc được chia tỷ lệ sẽ sử dụng thuật toán mượt mà hơn. Nếu được đặt thành false thì người hàng xóm gần nhất được sử dụng, tạo ra hình ảnh kém mịn hơn và thay vào đó chỉ tạo các pixel có kích thước lớn hơn.

Làm mịn hình ảnh chỉ vừa mới được thêm vào đặc điểm canvas và không được tất cả các trình duyệt hỗ trợ, nhưng một số trình duyệt đã triển khai phiên bản tiền tố của nhà cung cấp này. Trên ngữ cảnh có tồn tại mozImageSmoothingEnabled trong Firefox và webkitImageSmoothingEnabled trong Chrome và Safari và việc đặt các cài đặt này thành false sẽ ngừng chống răng cưa xảy ra. Thật không may, tại thời điểm viết bài, IE9 và Opera chưa triển khai thuộc tính này, nhà cung cấp có tiền tố hoặc ngược lại.

Nói chung bạn chỉ cần thực hiện theo hai quy tắc:

1. Nếu bạn đang mở rộng quy mô các canvas, bạn cần phải vô hiệu hóa hình ảnh mịn hoặc quy mô nó bằng cách sử dụng gần nhất, hàng xóm suy. Có một vài thuật toán để làm điều này bằng tay ngay bây giờ và đây là những gì các tùy chọn trên đang làm.
2. Nếu bạn không vẽ trên tọa độ số nguyên, bạn sẽ nhận được cùng một vấn đề và nó có cùng một giải pháp. Nếu các tùy chọn ở trên không tồn tại trên trình duyệt của bạn, bạn sẽ cần phải trở lại nguyên phối (x | 0, y | 0)

đâu x | 0 tầng x một cách nhanh chóng, tuy nhiên sẽ không làm việc với những con số lớn hơn 2,147,483,647: Lớn nhất ký số nguyên 32 bit.

Hy vọng rằng tọa độ của bạn không lớn hơn!

Answer 3

Tôi nghĩ rằng điều này link sẽ được trợ giúp đầy đủ. Tôi đã làm tương tự nhưng trong trường hợp của tôi, tôi cho trọng lượng vải và chiều cao tự động bằng cách sử dụng javascript. Sau đó, tôi đã cho chiều cao và chiều rộng để vải khi tôi tuyên bố nó. Điều đó giải quyết vấn đề.