Redimensionner une Base 64 image en JavaScript sans utiliser de toile
J'ai besoin d'un moyen de redimensionner les images en JavaScript sans l'aide d'un élément HTML.
Mon mobile application HTML prend des photos, puis les convertit en base64 des chaînes de caractères. Par la suite, j'ai besoin de les redimensionner avant de les envoyer à l'API afin d'économiser l'espace de stockage.
Je suis à la recherche d'une manière différente et plus moyen de les redimensionner, puis à l'aide d'un élément canvas. Est-il un moyen?
- La toile n'est pas adapté pour la manipulation d'images?
- Vous pouvez créer un écran de toile, sans l'insérer dans le DOM. Je peux faire un exemple si c'est intéressant. Au moins, c'est beaucoup plus rapide que l'encodage en utilisant js seuls que la toile peut le faire en natif le code compilé.
- Sonne bien, Ken, je serais très intéressé par ce que! 🙂
- Fait... 😉 ........
- Je serais intéressé par ce que bien, car voici l'affaire avec de la Toile et mobile ... de la Mémoire. Vous ne pouvez pas charger dans les grandes images et la "plus grande" ces jours est en fait la taille de ce que l'appareil mobile de la caméra, puisque tout le monde aime bourrer de 50 millions de mégapixels dans un téléphone ces jours-ci 🙂
- Tom. Je n'ai jamais trouvé une bonne solution pour ce. Je suis autour de ce problème en définissant simplement la taille de l'image et de la qualité dans le phonegap fonction appareil photo. Regarder dans phonegap caméra docs. Il est également possible lors de l'importation d'images à travers la galerie.
- lire mon post les gars)) @Tom
- Aussi, vous pouvez envoyer l'image redimensionnée, comme un fichier, pas une chaîne base64? Êtes-vous intéressé?
Vous devez vous connecter pour publier un commentaire.
Un moyen d'éviter le principal HTML touché est de créer un écran de toile qui est gardé à l'extérieur de l'arborescence DOM.
Ce sera un bitmap en mémoire tampon et native code compilé pour encoder les données de l'image. Il est simple à faire:
Si vous voulez produire un autre format que le format PNG (par défaut), il suffit de spécifier le type comme ceci:
Vaut la peine de noter que De la SCRO restrictions s'applique à
toDataURL()
.Si votre application est de donner seulement encodées en base64 images (je suppose qu'ils sont les données d'uri avec base64 de données?) ensuite, vous avez besoin de "charger" l'image de la première:
Si la source est pure base-64 string simplement ajouter un en-tête de la rendre un data-uri:
Il suffit de remplacer le
image/png
partie avec le type de la chaîne base64 représente (ie. en faire un argument facultatif).Ken réponse est la bonne réponse, mais son code ne fonctionne pas. J'ai fait quelques ajustements sur elle, et elle fonctionne à la perfection. Pour redimensionner un Data URI :
Oui, vous le pouvez. Ces solutions de bon pour le redimensionnement et pas seulement la conversion de l'image en base64.
Jpg-js et Pica de ne pas utiliser des éléments du dom à tous. Ces libs sont le fait de travailler uniquement avec les données de l'image, sans éléments du dom (toile et de l'image).
Sur la toile, la restriction de taille de voir ce post
Pierrick Martellière est de loin la meilleure réponse, je voulais juste souligner que vous devriez mettre en œuvre qu'avec une fonction async. Une fois que vous seriez en mesure de faire quelque chose comme:
Cela permettra d'attendre le résultat de la fonction avant de passer à l'étape suivante. C'est le moyen le plus propre à l'écriture de code. Ici est la fonction de Pierrick avec le petit edit:
Pour plus de détails, vous pouvez vérifier MDN Docs : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise
Vous pouvez utiliser un raw en Base64 de manipulation de l'image, comme illustré ici.
Semble difficile ( et pour png uniquement ) et pourquoi beaucoup choisissent d'utiliser de la toile
http://blog.calyptus.eu/seb/2009/05/png-parser-in-javascript/