Skalieren einer Leinwand schön mit CSS
Ich versuche, ein Bild auf einer Leinwand zu zeichnen, und verwende dann css, um die Leinwand in einer bestimmten Größe anzupassen. Es stellt sich heraus, dass viele Browser die Leinwand nicht sehr schön skalieren. Firefox unter OS X scheint einer der schlechtesten zu sein, aber ich habe nicht sehr viele getestet. Hier ist ein minimales Beispiel für das Problem:
HTML
%Vor%CSS
%Vor%JS
%Vor%Wird in einem Codepen ausgeführt: Ссылка
Hier ist das Ergebnis in Firefox (Screenshot von einem Retina-Display):
Was passiert, ist, dass sowohl <img> als auch <canvas> bei gleicher Größe beginnen und vom Browser mit css verkleinert werden (die Bildbreite beträgt 783px). Anscheinend macht der Browser eine schöne Glättung / Interpolation auf <img> , aber nicht auf <canvas> .
Ich habe es versucht:
-
image-rendering, aber die Standardeinstellungen scheinen bereits zu sein. - Hacky-Lösungen wie skalieren das Bild in Schritten , aber das tat es nicht helfe nicht: Ссылка .
-
Context2D.imageSmoothingEnabled, aber die Standardeinstellungen beschreiben wieder, was ich möchte.
Wie kann ich das Bild auf der rechten Seite wie das Bild auf der linken Seite aussehen lassen? Vorzugsweise in so wenig Code wie möglich (ich würde z. B. lieber nicht selbst bikubische Interpolation implementieren).
4 Antworten
Sie können das Pixelierungsproblem beheben, indem Sie den Hintergrundspeicher des Arbeitsbereichs um den Wert window.devicePixelRatio skalieren. Leider scheint die schäbige Bildfilterung zu diesem Zeitpunkt eine Browserbeschränkung zu sein, und die einzige zuverlässige Lösung besteht darin, eigene Fotos zu erstellen .
Ersetzen Sie Ihr aktuelles Onload mit:
%Vor%Ergebnisse:
Getestet unter Firefox 35.0.1 unter Windows 8.1. Beachten Sie, dass Ihr aktueller Code keine Browser-Zoom-Ereignisse verarbeitet, die die Pixelierung wieder einleiten könnten. Sie können dies beheben, indem Sie das resize-Ereignis behandeln.
Canvas ist nicht so konzipiert, dass es css-gezoomt werden soll: Versuchen Sie es mit Überabtastung: Verwenden Sie zweimal die erforderliche Zeichenfläche, und die CSS-Skalierung macht eine gute Arbeit beim Herunterskalieren der Zeichenfläche Auf Hi-DPI-Geräten sollte man noch einmal die Auflösung verdoppeln, um das zu erreichen gleiche Qualität.
(selbst auf einem Standard-Display scheint X4 ein bisschen mehr).
(Bild, Leinwand 1X, 2X und 4X)
Es ist keine gute Idee, die Zeichenfläche zu skalieren und zu denken, dass Sie das Bildskalierungsproblem gelöst haben. Sie können Ihren dynamischen Wert an die Zeichenfläche übergeben und dann mit dieser Größe zeichnen, was Sie wollen. Hier ist der Link von Canvas doc: Ссылка
Einfache Antwort, Sie können es nicht tun. Die Leinwand ist wie eine Bitmap, nicht mehr.
Meine Idee: Sie sollten die gesamte Fläche beim Zoomen neu zeichnen und sicherstellen, dass Sie das Bild, das Sie zeichnen, skalieren. Da es eine Vektorgrafik ist, sollte dies funktionieren. Aber du wirst die Leinwand sicher neu zeichnen müssen.