Divers problèmes liés au téléchargement d'images locales en HTML5

Il s'agit d'un projet que j'ai récemment écrit pour une entreprise. Les exigences du projet sont à peu près les suivantes :
1.Télécharger des images de téléphone portable, puis recadrer (exigences). ajouté plus tard)
2. Capable de faire pivoter les images pour les recadrer (exigences ajoutées plus tard)
3. Remplissez divers textes, sélectionnez les couleurs, puis filigranez le texte et 2 images associées sur l'image recadrée, et téléchargez-les sur le serveur pour générer une adresse photo, la renvoyer, la partager.

Les fonctions sont à peu près celles ci-dessus, et les autres sont diverses petites fonctions. Je ne les mentionnerai pas. Dans l'ensemble, utilisez Vue (y compris le routeur, la ressource. webpack, etc.)

Alors, comment répondre à ces exigences :
1. Téléchargement local, utilisez le Fichier Api de html5. pour obtenir l'image L'encodage base64 est attribué au src de l'img (pit 1, 2), puis un calque apparaît pour le recadrage. Le premier recadrage consiste à mettre un p au-dessus de l'img pour calculer les coordonnées après le calcul. est terminé, utilisez canvas pour capturer l'image puis obtenir la valeur (fosse 3).
2. Cette fonction est résolue en utilisant le canevas pour faire pivoter les images. Il convient de noter que le rapport hauteur/largeur doit être conservé lors de la rotation, et qu'il faut prêter attention à la largeur et à la hauteur (fosse 4).
3. Utilisez une toile pour superposer des filigranes et des images. L'essentiel est de faire attention aux coordonnées.

Parlons des pièges :
1. Obtenir l'encodage base64 de src ne semble poser aucun problème, mais en fait il y a un énorme problème. De nombreuses images s'affichent verticalement sur le téléphone mobile, mais après. en obtenant l'encodage Base64, après l'avoir directement attribué au src de img, il a été constaté que l'écran était horizontal. Lorsque j'ai découvert cette situation pour la première fois, je pensais qu'il s'agissait d'un phénomène isolé. Finalement, après des tentatives répétées, j'ai découvert qu'il s'agissait d'une situation très courante, notamment sur les téléphones iPhone. Elle divise également les dossiers d'images que vous choisissez en une seule image dans le fichier. album et flux de photos, et un écran horizontal, un écran vertical. Je n'arrive tout simplement pas à comprendre pourquoi ? ? ? En gros, une après-midi a été consacrée à cette question.

Jusqu'à ce que je rentre le soir et demande à un de mes amis qui est un maître du développement IOS, @叶 Gucheng, il m'a dit que parce que la caméra de l'iPhone est maintenant horizontale, la raison pour laquelle le mobile Le téléphone affiche un écran vertical, c'est qu'iOS l'a traité lui-même. Ils peuvent juger les problèmes horizontaux et verticaux en fonction de la valeur de l'angle de prise de vue de l'image, mais cette valeur n'est vraiment pas disponible sur notre site Web, ce qui est très embarrassant. Alors comment résoudre ce problème ? ? ------- La solution que j'utilise : la rotation des images permet aux utilisateurs de faire pivoter activement les images et de sélectionner les angles. Il existe une autre solution, également utilisée dans la fosse 2, dont nous parlerons plus tard.

2. En plus de cet écran horizontal, certains téléchargements depuis les téléphones mobiles android n'ont pas eu lieu après la sélection de l'image. J'ai d'abord pensé que la raison était que l'API de fichier html5 n'était pas disponible. pris en charge, donc l'image téléchargée n'est pas affichée et divers débogueurs sont utilisés plus tard. La raison en est que l'événement change de la balise d'entrée n'est pas déclenché et il n'y a aucun moyen de le faire. déclenchez-le quoi qu'il arrive. Afin de résoudre ce problème, après avoir consulté divers documents officiels et stackoverflow, j'ai trouvé que deux attributs peuvent être ajoutés à l'entrée du type="file". " pour représenter les images téléchargées depuis le téléphone mobile.

 <input type="file" name="image" class="file-choose" id="file" accept="image/*" v-on:change="chooseFileChange($event)" capture/>

Après avoir ajouté l'acceptation et la capture de cette manière, le téléphone Android en question dispose de plusieurs dossiers qui peuvent être sélectionnés lors de la sélection des images. Certains d'entre eux peuvent être téléchargés, et d'autres ne le peuvent pas. les images sur la carte SD ne peuvent pas être obtenues et l'événement de changement ne sera pas déclenché car il n'y a pas d'autorisation root pour obtenir les données du fichier. C'est un autre problème insoluble, car votre site Web est dans le navigateur et les autorisations sont faibles (je dois me plaindre du problème des autorisations Web, bon sang) Comment résoudre le problème ? ? ? Contournez, c'est-à-dire que si votre page est imbriquée dans la propre application de votre entreprise, laissez l'application vous aider. Ensuite, notre projet est diffusé par WeChat et doit être dans le navigateur WeChat, vous pouvez donc appeler l'option JSSDK de WeChat. L'image L'interface peut contourner ces autorisations, et un autre avantage est qu'elle résout le problème de Pit 1. Elle peut gérer le problème de l'écran horizontal, c'est-à-dire que lors du téléchargement de l'écran vertical, l'écran horizontal réel est téléchargé. écran vertical, mais le coût n'est pas minime. Vous devez sélectionner l'image, obtenir une clé, puis continuer à appeler le SDK pour transférer vers le serveur WeChat, obtenir un identifiant de serveur et transmettre cet identifiant à votre propre serveur, laissez-les accéder à WeChat pour télécharger des images sur leur propre serveur via cet identifiant et vous renvoyer une URL. Le processus est très tortueux et le nombre de téléchargements est limité (vous pouvez demander des restrictions de chargement avec WeChat ) ;

Référence : WeChat js sdk select image interface

3. Continuons à parler des pièges après avoir résolu les problèmes ci-dessus, nous les recadrerons au début, la solution que j'ai utilisée était comme celle-ci. la base64, attribuez une valeur à une img, puis déplacez le cadre sur l'img, calculez les coordonnées puis recadrez. Il n'y a aucun problème du côté PC et l'efficacité est très élevée. Cependant, lorsqu'il est testé sur WeChat, 3. des problèmes ont été trouvés (putain, le côté téléphone portable est un piège), une fonction, 3 questions différentes), la première question est que tout le monde sait qu'aujourd'hui les téléphones portables ont des pixels élevés et que les images ne sont pas petites. Après les avoir téléchargées, la base64. n'est pas petit non plus. Le mettre dans le src de img est en fait dans la mémoire, ce qui fait que l'ensemble de WeChat est particulièrement facile à planter (il plante, il plante, WeChat plante --- trois fois). activé pour lier l'événement tactile. La réponse est très lente et le mouvement n'est pas fluide du tout. Et il plante également, oui, plante à nouveau. Le troisième problème est que vous devez utiliser la conversion du canevas pour la rotation. Vous devez d'abord accéder aux données de l'image. Une fois la conversion terminée, vous devez attribuer une valeur au src de l'image, ce qui est très gênant.

Solution : utilisez Canvas uniformément, n'utilisez plus img, jusqu'à ce que le recadrage soit terminé, récupérez simplement la base64 de img, et lors de l'exportation, utilisez jpeg au lieu de png, ce qui réduira un peu la qualité de l'image. Je pense que c'est complètement Il n'y a aucun impact, c'est-à-dire que le recadrage et la rotation de l'image sont tous des canevas. Il est recommandé de lier l'événement directement de manière native.

4. Le piège de la rotation. Le problème est que nous devons d'abord enregistrer les données de l'image originale, faire pivoter le canevas, puis drawImage, sinon les données d'image du canevas lui-même ne peuvent pas être pivotées. il semble qu'il n'y ait aucun moyen de le faire pivoter. J'essaie. La méthode matricielle ne semble pas fonctionner (peut-être que je ne suis pas bon en mathématiques !!! Si quelqu'un le sait, veuillez faire une démonstration).

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!