Anforderungen: HTML5-Inhalte als Bilder speichern
Idee: Base64-Bilder durch Canvas-Zeichnung generieren, lange drücken, um lokal zu speichern
Problem: Canvas verbietet Cross-Domain, langes Drücken von Android WeChat kann keine Base64-Bilder speichern, vom Server gezogene Bilder werden komprimiert
2. Spezifische ProblemeFrage 1: Canvas ist domänenübergreifend verboten. Wenn das Bild von anderen Domänen stammt, wird beim Aufruf von toDataURL() ein Fehler ausgegeben.
Lösung: Das <img>-Tag kann domänenübergreifende Probleme lösen, indem das Attribut crossOrigin=Anonymous oder crossOrigin=* eingeführt wird. Bitte beachten Sie, dass die Einstellung „Anonymous“ in der mobilen Q-Umgebung nicht unterstützt wird und festgelegt werden muss zu '*'. Wenn crossorigin=anonymous verwendet wird, dann entspricht es anonymem CORS
Problem 2: Das <img>-Tag mit gesetztem crossOrigin kann keine domänenübergreifenden Bilder abrufen und img.onload kann nicht ausgelöst werden.
Lösung: Legen Sie für die Hintergrundweiterleitung oder den Nigix-Proxy Access-Control-Allow-Origin fest: wx.qlogo.cn, um statische Ressourcenserverbilder domänenübergreifend zuzulassen. Diese Einstellung löst das Problem des Abrufens domänenübergreifender Bilder. (Das Bild hier zeigt den Benutzer-Avatar-Domänennamen wx.qlogo.cn, der domänenübergreifende Probleme aufweist.)
Frage 3: Base64-Bilder können nicht durch langes Drücken von WeChat h5 auf einem Android-Telefon gespeichert werden
Lösung: Laden Sie das von Canvas gezeichnete Base64-Bild auf den Server hoch und rufen Sie dann das PNG-Bild (jpg) vom Server ab. Dieser Ansatz ist problematischer und wir müssen Wege finden, ihn später zu verbessern.
Problem 4: Auf den Server hochgeladene Bilder sind stark komprimiert
Lösung: Die hochgeladenen Bilder verfügen über mehrere Ressourcen mit unterschiedlichen Komprimierungsstufen. Sie können Bilder mit klareren Pixeln aus dem Verzeichnis „http://img10.360buyimg.com/promotepic/“ erhalten.
Frage 5: Durch langes Drücken auf den gezeichneten QR-Code-Link (//wqs.jd.com/xxx) kann die Seite nicht direkt aufgerufen werden.
Lösung: Wenn Sie den zu zeichnenden QR-Code-Link angeben, müssen Sie http hinzufügen: Andernfalls wird der QR-Code als Text erkannt.
//Leinwand-Zeichnungsteil des Codes: var picurl = http://wx.qlogo.cn/mmopen/OicsrgN57fqDxImI3icnMeSXRfVUQRueHcxRRuWG0O1Ea1bNyBPKKKLeq5FiaXFWOdsltVe1R1PtJ2EtsDHYDjHgQ/0; var img = neues Bild, Leinwand = document.createElement(canvas), ctx = canvas.getContext(2d), //Siehe Frage 2 für den Hintergrund-Nigix-Agenten src = picurl.replace(http://wx.qlogo.cn,//wq.jd.com) ; / /Um das Problem zu lösen, dass toDataURL nicht domänenübergreifend gelesen werden kann, siehe Frage 1 img.crossOrigin = Anonymous; img.width; canvas.height = img.drawImage( img, 0, 0 ); //Das gezeichnete base64-Bild localStorage.setItem( savingImageData, canvas.toDataURL(img) ); src;
Teil des Codes zum Hochladen von Bildern:
// Siehe Frage 3 zum Hochladen von Bildern $.ajax({ type: 'POST', url: loadJs.addToken('http://wq.jd.com/activetmp/promotepic/promoteaddpic', j132), data: { filename : new Date().getTime()+''+Math.floor(Math.random()*10000) + '.jpg', Inhalt: base64pic, active: shotpic20160901 }, dataType: 'json', xhrFields: { withCredentials: true }, success: function(data) { if (picdata.id == 1 && picdata.msg) { //Der Bildpfad dieses Präfixpfads ist am meisten Zur Verdeutlichung siehe Frage 4 var imgPre = 'http://img10.360buyimg.com/promotepic/'; //Vollständiger Adresslink zum Zusammenfügen von Bildadressen var photo = imgPre + picdata.msg; $(#cardImg)[0].onload = function() { //zur Geschäftslogik}; ,photo); } }, error:function(data){ }});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.