Wenn ich ein 775 x 775-Bild zu einem fabricjs-Canvas hinzufüge und es auf etwa 90 x 90 verkleinere, verliert das Bild stark an Qualität.
Aber wenn ich das gleiche Bild als <img/>
hinzufüge und es verkleinere, behält es seine Qualität.
Warum wird das Leinwandbild so schlecht? Wie kann ich sicherstellen, dass das Canvas-Bild seine ursprüngliche Qualität beibehält, wie das <img/>
?
Es sollte wahrscheinlich für einen Kommentar gehen, aber leider bin ich neu hier und ich kann keine Kommentare hinzufügen. Allerdings sieht es für mich wie ein Antialiasing-Problem aus. Canvas ist nur ein Haufen Pixel - es liegt an Ihnen, ob Sie Antialiasing machen oder nicht. Browser jedoch machen Antialiasing bei der Bildskalierung (siehe hier Deaktivieren der Antialiasing beim Skalieren von Bildern ).
Diese Frage könnte ein Duplikat sein von:
Html5 canvas drawImage: wie man Antialiasing anwendet
>HTML5 Canvas und Anti-Aliasing
Ich hoffe, es hilft.
Tags und Links html image html5 html5-canvas fabricjs