Teilen Sie ein mobiles Projekt mithilfe der Leinwand, um Posterbilder zu synthetisieren.

Kürzlich habe ich ein mobiles Projekt durchgeführt, bei dem Leinwand zur Synthese von Posterbildern verwendet wurde. Da ich keine Leinwandbasis hatte, suchte ich im Internet nach einer Demo von einem Senior, stieß dabei jedoch auf viele Probleme Der Entwicklungsprozess. Die aufgetretenen Probleme und ihre Lösungen werden wie folgt zusammengefasst:

Das Problem der Anpassung von Vollbild-Projekten für mobile Leinwand

Problembeschreibung: Da die Breite und Höhe der Leinwand nur auf px-Werte eingestellt werden kann und keine rem-Einheiten unterstützt, ist es schwierig, den Effekt zu erzielen, dass die Leinwand den gesamten Bildschirm ausfüllt, wenn die Die Bildschirmauflösung mobiler Geräte ist komplex.

Lösung: Rufen Sie den clientWidth-Wert des Mobiltelefonbildschirms über js ab und weisen Sie ihn der Leinwand zu, um den Effekt der Anpassung an den Vollbildmodus zu erzielen >

var clientWidth = document.documentElement.clientWidth;
var canvasWidth = Math.floor(clientWidth);
var canvasHeight = Math.floor(clientWidth*(1334/750));
$("#main").css('width',canvasWidth+'px');
$("#main").css('height',canvasHeight+'px');

2. Die von Canvas synthetisierten Bilder erscheinen verschwommen

Problembeschreibung: Die von Canvas erzeugten Bilder erscheinen verschwommen, insbesondere wenn ein QR-Code auf dem Bild Diejenigen, die erkannt werden müssen, können von Benutzern überhaupt nicht erkannt werden Lösungen: 1) Sie können auf das Plug-in hidpi-canvas.js zurückgreifen, um dieses Problem zu lösen; 2) Sie können auch die Breite und Breite im Leinwandstil ändern. Stellen Sie den Höhenwert auf die gewünschte Größe ein und vergrößern Sie dann die Breiten- und Höhenwerte der Leinwand jeweils um das X-fache Um Bilder oder Texte in die Leinwand zu zeichnen, sollten die entsprechenden Werte ebenfalls um das X-fache vergrößert werden.

3. Beim Zusammenstellen von Bildern sind die Bilder einiger Modelle ungeordnet

Problembeschreibung: Bei einigen Android-Telefonen ist dies der Fall Exportieren von Canvas Bei Verwendung von Base64-Bildern kann nur die Hälfte des Bildes mit dem gewünschten Effekt angezeigt werden. Eine vorläufige Analyse zeigt, dass es sich um einen Fehler handelt, der durch das Pixelverhältnis des Geräts verursacht wird. Lösung: Holen Sie sich das Pixelverhältnis PR und bestimmen Sie das Modell. Hier habe ich nur festgestellt, ob es sich um ein iPhone oder ein Android handelt. Beim Zusammenstellen des Bildes gibt es noch keine Probleme ​auf ihre Originalgrößen.

//hidpi-canvas将canvas的width和height属性放大pr倍
if (navigator.userAgent.match(/iphone/i)) {
    canvas.width = width ;//恢复为原先的大小
    canvas.height = height ;
}else{
    canvas.width = width / pr;//恢复为原先的大小
    canvas.height = height / pr;
}

4. Beim Hochladen von Bildern auf das iPhone gibt es ein Rotationsproblem

Problembeschreibung: Während des Tests wurde festgestellt, dass die vom iPhone hochgeladenen Fotos gedreht waren. Beim Hochladen von aus dem Internet gespeicherten Bildern trat dieses Problem jedoch nicht auf und Android war normal. Lösung: Dieses Problem kann mit dem Plug-in exif.js gelöst werden. Dieses Plug-in ruft den Winkel und andere Informationen ab, wenn das Foto aufgenommen wurde, hauptsächlich das Ausrichtungsattribut, um entsprechende Vorgänge auszuführen ; 　

var file = $(this)[0].files[0];
EXIF.getData(file, function() {  
    EXIF.getAllTags(this);     
    Orientation = EXIF.getTag(this, 'Orientation');  
});

5. Auf Leinwand gezeichnete domänenübergreifende Bilder können keine Base64-Bilder exportieren

Problembeschreibung: Wenn im Canvas domänenübergreifend angeforderte Bilder vorhanden sind, schlägt der Export von Base64-Bildern aufgrund des Sicherheitsmechanismus des Canvas selbst fehl. Lösung: Dieser Fehler muss durch die Front-End- und Back-End-Kooperation behoben werden. Stellen Sie zunächst das Bild auf dem Back-End ein, um domänenübergreifend zuzulassen, und legen Sie dann Img.crossOrigin = „Anonymous“ fest "; auf der Vorderseite.

var pageqrcodeimg = qrcodecanvas.toDataURL('image/jpg');
var qrcodeImg = new Image();
qrcodeImg.crossOrigin = "Anonymous"; 
qrcodeImg.src = pageqrcodeimg;
qrcodeImg.onload=function(){
        //绘制图片
}

6. Beim Zeichnen von Bildern auf Leinwand erscheint ein weißer Bildschirm

Problembeschreibung: Beim Zeichnen von Bildern auf Leinwand erscheint gelegentlich ein weißer Bildschirm. Die vorläufige Analyse zeigt, dass der Zeichenvorgang ausgeführt wird, bevor das Bild gelesen wird. Lösung: Fügen Sie die Onload-Funktion zu img hinzu und führen Sie dann den Zeichenvorgang aus, nachdem das Bild gelesen wurde.

qrcodeImg.onload=function(){
        //绘制图片
}

7. Langes Drücken auf das Bild während des Surfens auf WeChat kann nicht gespeichert werden

Problembeschreibung: Über Canvas generierte Bilder können nicht gespeichert werden oder der QR-Code kann nicht erkannt werden, wenn im WeChat-Browser lange gedrückt wird. Dies passiert bei einigen Bildern auf Android, aber eine vorläufige Analyse ist, dass die Bildqualität nicht stimmt zu hoch. Lösung: Komprimieren Sie die Bildqualität beim Exportieren von Base64-Bildern.

Nachtrag: Dies sind im Grunde die bisher aufgetretenen Probleme. Sollten in Zukunft Probleme auftreten, werden wir diese weiterhin aktualisieren.

Das obige ist der detaillierte Inhalt vonTeilen Sie ein mobiles Projekt mithilfe der Leinwand, um Posterbilder zu synthetisieren.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!