Organisez le document, recherchez un code d'instance pour H5 pour appeler l'appareil photo pour prendre des photos et compresser l'image, et le régler et le rationaliser.
arrière-planRécemment, je veux faire une page H5.
Les principaux points de fonction de l'extrémité avant sont:
La façon la plus simple d'appeler l'appareil photo est d'utiliser la propriété Fichier d'entrée [Caméra]:
<entrée type = file capture = carera accepte = image / *> // caméra <Type d'entrée = fichier accepte = image / *> // album
Cette compatibilité de la méthode est toujours problématique. J'ai recherché beaucoup de bonnes solutions sur Internet, et je ne pouvais continuer à écrire. Essence Essence
Compression d'image La compression d'image est utilisée pour utiliser FileReader et <canvas> .
L'objet FileReader permet aux applications Web de lire le contenu du fichier stocké sur l'ordinateur de manière asynchrone et d'utiliser le fichier ou l'objet BLOB pour spécifier le fichier ou les données que vous souhaitez lire.
<Emanvas> est un élément HTML qui peut utiliser des scripts pour dessiner des graphiques, qui peuvent dessiner des graphiques et des animations simples.
La compression de l'image doit compresser la résolution et la qualité de l'image. de l'image.
Var max_wh = 800; var image = new image (); ; / DataUrl obtenu via FilereReader
Ensuite, il y a la qualité de la compression de l'image. Créez dynamiquement une balise <lebvas> puis compressez l'image:
Var Quality = 80; , 0, image.width, image.height);
Ensuite, le résultat du téléchargement sur le serveur et de l'affichage du serveur, mais les choses ne sont pas si lisses. Essence Essence Une fois le téléphone mobile iOS compressé, l'image est inexplicablement tournée et continue de résoudre le problème.
Résoudre la rotation de l'image iOSCitez d'abord exif.js et obtenez les informations de direction photo via exif.getData et exif.gettg.
// file obtient exif.getData (fichier, fonction () {orientation = exif.gettg (fichier, 'orientation');});La signification de chaque valeur d'orientation correspond au téléphone mobile iPhone pour prendre des photos:
| Orientation | décrire |
|---|---|
| 3 | La prise de vue de l'écran horizontal de l'iPhone, à ce moment le bouton d'accueil est à gauche, l'image tourne à 180 degrés par rapport à la position d'origine |
| 6 | L'iPhone tire verticalement, à l'heure actuelle, le bouton d'accueil est ci-dessous (la direction du téléphone mobile), et l'image peut tourner à 90 degrés par rapport à la position d'origine. |
| 8 | L'iPhone tire un écran vertical, à ce moment, le bouton d'accueil est au-dessus, et l'image tourne à 90 degrés dans le sens des aiguilles d'une montre par rapport à la position d'origine. |
Commutateur (orientation) {cas 6: cas 8: cvs.width = hauteur; À ce moment-là, les clés de la maison sur le cas de gauche 3: // 180 degrés à gauche Rotation Context.Translate (largeur, hauteur); Prendre la direction du téléphone mobile 6: contextuel.rotate (0,5 * Math.pi); 8: // inverse dans le sens horaire de 90 degrés Context.rotate (-0.5 * Math.pi);Téléchargez ensuite l'image et trouvez que l'image sous iOS est normale.
Le code complet est donné ci-dessous:
$ ('input [type = file]'). /I.test (file.type) {exif.getData (file, function () {orientation = exif.getTag (File, 'orientation');}); max_wh = 800; var image = new image (); ; 80; .HEight = largeur; 180 degrés vers la gauche Connected.Translate (largeur, hauteur); du téléphone. Context dans le sens antihoraire.ROTATE (-0.5 * Math.PI); Image / JPEG ', Question / 100); )}});Ce qui précède est tout le contenu de cet article.