Exigences : enregistrer le contenu HTML5 sous forme d'images
Idée : générer des images base64 via le dessin Canvas, appuyer longuement pour enregistrer en local
Problème : Canvas interdit le cross-domain, un appui long sur Android WeChat ne peut pas enregistrer les images base64, les images extraites par le serveur sont compressées
2. Questions spécifiquesQuestion 1 : Canvas est interdit sur plusieurs domaines. Si l'image provient d'autres domaines, l'appel à toDataURL() générera une erreur.
Solution : La balise <img> peut résoudre les problèmes inter-domaines en introduisant l'attribut crossorigin, c'est-à-dire crossOrigin=Anonymous ou crossOrigin=*. Veuillez noter que le paramètre « Anonyme » dans l'environnement mobile Q n'est pas pris en charge et doit être défini. à '*'. Si crossorigin=anonymous est utilisé, alors équivalent à CORS anonyme.
Problème 2 : la balise <img> avec l'ensemble crossOrigin ne peut pas extraire les images inter-domaines et img.onload ne peut pas être déclenché.
Solution : pour le transfert en arrière-plan ou le proxy nigix, définissez Access-Control-Allow-Origin : wx.qlogo.cn pour autoriser les images de serveur de ressources statiques à traverser les domaines. Ce paramètre résout le problème d'obtention d'images inter-domaines. (L'image ici est le nom de domaine de l'avatar de l'utilisateur wx.qlogo.cn, qui présente des problèmes inter-domaines)
Question 3 : Les images Base64 ne peuvent pas être enregistrées en appuyant longuement sur WeChat h5 sur un téléphone Android
Solution : Téléchargez l'image base64 dessinée par Canvas sur le serveur, puis obtenez l'image png (jpg) sur le serveur. Cette approche est plus problématique et nous devrons trouver des moyens de l'améliorer plus tard.
Problème 4 : les images téléchargées sur le serveur sont sévèrement compressées
Solution : Les images téléchargées auront plusieurs ressources sur le serveur, avec différents niveaux de compression. Vous pouvez obtenir des images avec des pixels plus clairs à partir du répertoire « http://img10.360buyimg.com/promotepic/ ».
Question 5 : Un appui long sur le lien du code QR dessiné (//wqs.jd.com/xxx) ne permet pas d'accéder directement à la page.
Solution : Lors de la spécification du lien du QR code à dessiner, vous devez ajouter http : sinon le QR code sera reconnu comme du texte.
// dessin sur toile d'une partie du code : var picurl = http://wx.qlogo.cn/mmopen/OicsrgN57fqDxImI3icnMeSXRfVUQRueHcxRRuWG0O1Ea1bNyBPKKKLeq5FiaXFWOdsltVe1R1PtJ2EtsDHYDjHgQ/0; var img = new Image, canvas = document.createElement(canvas), ctx = canvas.getContext(2d), //Voir la question 2 pour l'agent nigix d'arrière-plan src = picurl.replace(http://wx.qlogo.cn,//wq.jd.com) ; / /Pour résoudre le problème selon lequel le canevas inter-domaines toDataURL ne peut pas être lu, voir la question 1 img.crossOrigin = Anonymous; //Préchargement des ressources d'image img.onload = function() { canvas.width = img.width; canvas.height = img.height; ctx.drawImage( img, 0, 0 ); //L'image base64 dessinée localStorage.setItem( savingImageData, canvas.toDataURL(image/png) } src = src;Une partie du code pour télécharger des images :
// Voir la question 3 pour télécharger des images $.ajax({ type : 'POST', url : loadJs.addToken('http://wq.jd.com/activetmp/promotepic/promoteaddpic', j132), data : { nom de fichier : new Date().getTime()+''+Math.floor(Math.random()*10000) + '.jpg', contenu : base64pic, actif : shotpic20160901 }, dataType : 'json', xhrFields : { withCredentials : true }, success : function(data) { if (picdata.id == 1 && picdata.msg) { //Le chemin d'image de ce chemin de préfixe est le plus Voir la question 4 pour plus de clarté var imgPre = 'http://img10.360buyimg.com/promotepic/'; //Lien d'adresse complète pour l'épissage d'adresse d'image var photo = imgPre + picdata.msg; $(#cardImg)[0].onload = function() { //pour faire une logique métier}; ,photo); } }, erreur:fonction(données){ }});Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.