Erfahren Sie mehr darüber, wie Sie das Problem der verschwommenen Leinwandzeichnung auf mobilen Endgeräten lösen können

Aus Gründen der mobilen Kompatibilität erfordert eines unserer Projekte, dass das Frontend PDF in eine Schnittstelle konvertiert, die direkt auf der mobilen Seite angezeigt werden kann. Um die Lösung zu erleichtern, verwenden wir das Plugin pdf.js, mit dem PDF in Canvas konvertiert und auf der Seite gezeichnet werden kann. Während des Testvorgangs wurde jedoch festgestellt, dass der gezeichnete Inhalt im mobilen Browser sehr verschwommen war (wie unten gezeigt). Nach der Analyse wurde festgestellt, dass dies durch den hochauflösenden Bildschirm des mobilen Endgeräts verursacht wurde. Halten Sie nach der Lösung des Problems die Gründe und Erkenntnisse schriftlich fest

Bevor Sie das Problem erklären, müssen Sie zunächst einige Grundkenntnisse über mobile Anzeige und Cavans verstehen, um die weitere Erkundung zu erleichtern. Wenn Sie die Ergebnisse direkt sehen möchten, können Sie bis zum Ende scrollen.

Physische Pixel werden auch Gerätepixel genannt. Wir hören oft, dass die Auflösung von Mobiltelefonen physische Pixel ist. Die physische Auflösung des iPhone 7 beträgt beispielsweise 750 * 1334. Der Bildschirm besteht aus Pixeln, was bedeutet, dass der Bildschirm in horizontaler Richtung 750 Pixel und in vertikaler Richtung 1334 Pixel hat.

Auch als logische Pixel bezeichnet, betragen die Größen von Iphone4 und Iphone3GS beide 3,5 Zoll. Die physikalische Auflösung von iphone4 beträgt 640 * 980, während 3gs nur 320 * 480 beträgt. Wenn wir ein Bild mit einer Breite von 320 Pixeln zeichnen Echtes Layout, im iPhone4 hat nur die Hälfte des Bildschirms Inhalt und die restliche Hälfte ist leer. Um dieses Problem zu vermeiden, haben wir logische Pixel eingeführt und die logischen Pixel beider Mobiltelefone auf 320 Pixel eingestellt, um das Zeichnen zu erleichtern.

Die oben genannten geräteunabhängigen Pixel dienen letztendlich der Vereinfachung der Berechnung, aber die von jedem logischen Pixel dargestellten physischen Pixel sind nicht sicher, um die Beziehung zwischen physischen Pixeln und logischen Pixeln ohne Skalierung zu bestimmen. , wir haben das Konzept des Gerätepixelverhältnisses (DPR) eingeführt.

 Gerätepixelverhältnis = Gerätepixel / logische Pixel DPR = DP / DIP

Es gibt viele oben erwähnte Theorien. Hier ist ein Bild zur Erklärung.

Wie aus der obigen Abbildung ersichtlich ist, verfügt ein hochauflösender Bildschirm bei gleicher Größe logischer Pixel über mehr physische Pixel. Bei einem normalen Bildschirm entspricht 1 logisches Pixel 1 physischem Pixel, während bei einem hochauflösenden Bildschirm mit dpr = 2 1 logisches Pixel aus 4 physischen Pixeln besteht. Dies ist auch der Grund, warum hochauflösende Bildschirme empfindlicher sind.

Dies ist ein Wissenspunkt, den jeder kennen sollte, der sich mit Canvas auskennt, und er ist auch der Kern des Problems, das wir als Nächstes analysieren werden.

Wir werden die Erklärung von Bitmaps später verlassen. Jetzt müssen wir nur noch wissen, dass das von Canvas gezeichnete Bild eine Bitmap ist.

Bei den Breiten- und Höhenattributen der Leinwand können Anfänger leicht Fehler machen. Diese beiden Eigenschaften werden in CSS oft mit den Eigenschaften width und height verwechselt.

Wir haben zum Beispiel den folgenden Code (1):

 <canvas width=600 height=300 style=width: 300px height: 150px></canvas> 

• Die Breite und Höhe im Stil stellen jeweils die Breite und Höhe dar, die das Canvas-Element auf der Schnittstelle einnimmt, dh die Breite und Höhe im Stil.
• Die Breite und Höhe im Attribut stellen die Breite und Höhe der tatsächlichen Pixel der Leinwand dar.

Wenn Sie es immer noch nicht verstehen können, können Sie es sich als folgenden Code (2) vorstellen:

 <!-- Die Pixel von logo.png sind 600 * 300 --><img style=width: 300px height: 150px src=logo.png />

Die Standardbreite und -höhe der Leinwand beträgt 300 * 150. Nach dem Festlegen von CSS wird die Leinwand entsprechend der festgelegten CSS-Breite und -Höhe skaliert (beachten Sie, dass sie nicht zugeschnitten ist) . Dies ist dasselbe wie das img-Tag.

Der obige Code (1) kann tatsächlich auf eine populärere Weise erklärt werden, das heißt, ein logisches Pixel wird tatsächlich von zwei Leinwandpixeln gefüllt.

Das Obige ist eine Einführung in einige erforderliche Grundkenntnisse, und die formale Erkundung beginnt weiter unten.

Zunächst haben wir erwähnt, dass die Verwendung von Canvas zum Zeichnen von Bildern eine Bitmap ist und dass die von uns normalerweise verwendeten JPG- und PNG-Dateien ebenfalls Bitmaps sind. Was ist also eine Bitmap?

Bitmap, auch Pixelkarte oder Rasterkarte genannt, speichert und zeigt Bilder an, indem die Farbe, Tiefe, Transparenz und andere Informationen jedes Punkts im Bild aufgezeichnet werden. Konkreter ausgedrückt kann man sich eine Bitmap als ein riesiges Puzzle vorstellen. Dieses Puzzle besteht aus unzähligen Teilen, und jedes Teil stellt ein einfarbiges Pixel dar. Theoretisch entspricht ein Bitmap-Pixel einem physischen Pixel . Was aber, wenn Sie zum Betrachten eines Bildes einen hochauflösenden Bildschirm wie den Retina-Bildschirm von Apple verwenden?

Angenommen, wir haben den folgenden Code, der auf dem Retina-Bildschirm des iPhone 4 angezeigt wird:

 <canvas width=320 height=150 style=width: 320px height: 150px></canvas>

Die physischen Pixel des iPhone 4 selbst sind 640 * 980, während die geräteunabhängigen Pixel 320 * 480 sind, was bedeutet, dass 1 CSS-Pixel tatsächlich aus 4 physischen Pixeln besteht. Die Pixel der Leinwand sind 320 * 150 und die CSS-Pixel sind es 320 * 150. Dies bedeutet, dass 1 CSS-Pixel aus 1 Canvas-Element besteht, sodass die Konvertierung abgeschlossen ist. Auf einem Retina-Bildschirm füllt ein Leinwandpixel (oder ein Bitmap-Pixel) 4 physische Pixel. Da ein einzelnes Bitmap-Pixel nicht weiter unterteilt werden kann, kann es nur die nächstgelegene Farbe annehmen, wodurch das Bild unscharf wird.

Wenn Sie immer noch verwirrt sind, kann das folgende Bild veranschaulichen, wie die Bitmap auf dem Retina-Bildschirm gefüllt wird:

Die linke Seite des Bildes oben zeigt die Anzeigeregeln auf einem normalen Bildschirm. Es ist zu erkennen, dass es 4 Bitmap-Pixel gibt, während der hochauflösende Bildschirm auf der rechten Seite 16 Pixel hat. Da die Pixel nicht geschnitten werden können, ändert sich die Farbe.

Es wurde jedoch nicht klar erklärt, warum das Bild die nächstgelegene Farbe annimmt, anstatt direkt den Originalwert anzunehmen. Dies ist auch der Grund für die Unschärfe.

Das Folgende hat mir einer meiner älteren Klassenkameraden erklärt. Gerade haben wir gesagt, dass jedes Bitmap-Element tatsächlich ein Volltonpixel ist. Nehmen wir nun an, wir müssen eine Zahl 0 auf einem normalen Bildschirm mit einer CSS-Größe von 4px * 4px und einem dpr von 1 zeichnen. Dann sollte das, was wir zeichnen, wie das folgende Bild aussehen, wobei 1 schwarze Pixel und 0 weiße Pixel darstellt.

Es ist ersichtlich, dass unser 0-Muster bei relativ kleinem DPR immer noch relativ offensichtlich ist. Wenn unsere CSS-Größe unverändert bleibt, das Bild jedoch auf dem Retina-Bildschirm gezeichnet wird, wie wird der Effekt sein?

Wir wissen, dass ein CSS-Pixel unter dem Retina-Bildschirm 4 physische Pixel darstellt. Wenn wir keine Verarbeitung durchführen, direkt gemäß der obigen Matrix anordnen und die Matrix erweitern, werden wir feststellen, dass unser Muster unter dem Retina-Bildschirm ein hat Sehr deutliches, zackiges Gefühl. Dem Bild fehlt eindeutig ein Hauch von Farbton.

Wenn wir das Bild geringfügig ändern, ändern Sie es in das folgende Bild

Das Bild fühlt sich sofort weicher an, aber die Stelle, die mit 4 Nullen hätte gefüllt werden sollen, ist zu 3 Einsen plus 1 0 geworden. Dies ist eigentlich der sogenannte Bildglättungsprozess. Um das gezackte Gefühl zu lösen, wird die ursprüngliche Farbe geändert, um mehr Natürlichkeit zu erzielen erklärt, warum beim Füllen der Farbe oben nicht die Originalfarbe, sondern die ungefähre Farbe verwendet wird.

Lassen Sie uns nach der obigen Erklärung nun die folgenden Schlussfolgerungen zusammenfassen. Da mobile Endgeräte beliebt sind und hochauflösende Bildschirme grundsätzlich populär geworden sind, repräsentiert ein 1-Pixel-CSS-Pixel tatsächlich 4 oder mehr physische Pixel. Aufgrund unseres Codeproblems sind jedoch unser 1-Pixel-CSS-Pixel und 1 Canvas-Pixel gleich, was dazu führt, dass 1 Canvas-Pixel tatsächlich mit 4 oder mehr physischen Pixeln gefüllt werden muss, um eine reibungslose Bildverarbeitung zu gewährleisten Pixel verwenden eine Annäherung an die Originalfarbe, was zu einem unscharfen Bild führt.

Sobald Sie die Ursache des Problems verstanden haben, ist es einfach, das Problem zu lösen. Das Wichtigste zur Lösung des Problems besteht darin, ein Leinwandpixel und ein physisches Pixel auszugleichen.

Unter dem Fensterobjekt von Browsern höherer Versionen hängt ein devicePixelRatio-Attribut, das oben erwähnte dpr.

Wenn die CSS-Breite und -Höhe des Canvas-Elements bestimmt sind, können wir dies tun

 let canvas = document.getElementById('canvas');let ctx = canvas.getContext('2d');let dpr = window.devicePixelRatio // Angenommen, dpr ist 2// Ermitteln Sie die Breite und Höhe von CSS let { width: cssWidth, height: cssHeight } = canvas.getBoundingClientRect();// Erweitern Sie laut dpr die Pixel der Leinwand, sodass ein Leinwandpixel einem physischen Pixel entspricht Canvas wird ebenfalls erweitert. Wenn der Zeichnungsinhalt auf dem ursprünglichen Koordinatensystem basiert, wird der Inhalt verkleinert // sodass der Zeichnungsmaßstab vergrößert werden muss ctx.scale(dpr,dpr);

Wenn wir ein Problem finden, können wir uns oft nicht auf die Lösung des Problems konzentrieren. Stattdessen sollten wir die Ursache des Problems genau verstehen, damit wir besser vorankommen können.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.