Zusammenfassung der Probleme und Lösungen, die in HTML5 -Leinwand -Synthetikplakat auftreten

Vorwort: Ich habe kürzlich ein mobiles Element mit synthetischen Poster -Bildern von Canvas gemacht. Die Methode fasst wie folgt zusammen:

Problembeschreibung: Da die Breite und Höhe von Canvas nur PX -Werte einstellen und keine REM -Einheiten unterstützen können, ist es schwierig, den Effekt von Leinwand mit vollständigen Bildschirmen zu erreichen, wenn die Bildschirmauflösung des mobilen Geräts kompliziert ist. Lösung: Holen Sie sich den Client -Width -Wert des Mobiltelefonbildschirms über JS und geben Sie ihn der Leinwand, um die Auswirkung der Anpassung des Vollbildes zu erreichen.

 Var clientwidth = document.documentElement.clientwidth; px ');

Problembeschreibung: Es gibt ein vage Problem mit Bildern, die von Leinwand erzeugt werden, insbesondere wenn das Bild QR -Codes enthält, die erkannt werden müssen, können Benutzer es nicht erkennen.

Lösung: 1) Sie können HIDPI-canvas.js-Plug-In zitieren, um dieses Problem zu lösen.

2) Sie können auch die Breite und Höhenwerte im Stil der Leinwand festlegen, um die gewünschte Größe einzustellen, und dann den Wert der Breite und der Höhe der Leinwand vergrößern.

Problembeschreibung: Wenn einige Android -Telefone das Base64 -Bild von Leinwand exportieren, können sie nur die Hälfte des Bildes des Effekts des Effekts anzeigen.

Lösung: Beurteilen Sie das Modell Pixel -Verhältnis. Originalgröße.

 // HIDPI-CANVAs vergrößern die Breite und die Höhenattribute der Leinwand.

Problembeschreibung: Während des Tests wurde festgestellt, dass das iPhone -Mobiltelefon Fotos der Rotation hochgeladen hat und das vom Internet hochgeladene Bild nicht auftritt und Android normal ist.

Lösung: Dieses Problem kann mit dem Exif.js -Plug -in gelöst werden.

 var file = $ (this) [0] .files [0]; ) ;;

Problembeschreibung: Wenn in der Leinwand Bilder von Cross -Domain -Anfragen vorhanden sind, schlägt das Bild der Ausgabe Base64 fehl.

Lösung: Dieser Fehler muss mit dem Rück- und Rückstand -End gelöst werden.

 Var pageQrCodeImg = qrCodecanvas.todaurl ('Image/JPG');

Problembeschreibung: Die weiße Bildschirmsituation erscheint gelegentlich gelegentlich, wenn Leinwand ein Bild zeichnet.

Lösung: Fügen Sie die Onload -Funktion IMG hinzu und führen Sie den Zeichnungsvorgang nach dem Lesen des Bildes durch.

 qrcodeImg.onload = function () {// ein Bild zeichnen}

Problembeschreibung: Das von Canvas generierte Bild kann den QR -Code im WeChat -Browser nicht gespeichert werden.

Lösung: Komprimieren Sie die Bildqualität beim Exportieren des Base64 -Bildes.

 var mycanvas = document.getElementById (main);

PostScript: Die aktuellen Probleme sind im Grunde genommen diese.

Das oben genannte ist der Inhalt dieses Artikels.