Vorwort: Ich habe kürzlich ein mobiles Element mit synthetischen Poster -Bildern von Canvas gemacht. Die Methode fasst wie folgt zusammen:
1. Mobile -End -Canvas -Projektanpassung VollbildproblemProblembeschreibung: 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 ');2. Das Bild der Leinwandsynthese erscheint verschwommenes Phänomen
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.
3. Wenn die synthetischen Bilder synthetisch sind, sind einige Modellbilder chaotischProblembeschreibung: 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.4. Das iPhone -Mobiltelefon -Upload -Bild hat ein Rotationsproblem
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]; ) ;;5. Leinwand zeichnet Cross -Domain
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'); 6. Weißer Bildschirm erscheint beim Zeichnen von Bildern von LeinwandProblembeschreibung: 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} 7, WeChat Browser, lange drücken Sie das Bild, kann nicht gespeichert werdenProblembeschreibung: 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.