Remarque: cela ne fonctionne que si l'image provient du même domaine que la page ou a l' crossOrigin="anonymous"
attribut et que le serveur prend en charge CORS. Cela ne vous donnera pas non plus le fichier d'origine, mais une version ré-encodée. Si vous avez besoin que le résultat soit identique à l'original, voir la réponse de Kaiido .
Vous devrez créer un élément de canevas avec les dimensions correctes et copier les données d'image avec la drawImage
fonction. Ensuite, vous pouvez utiliser la toDataURL
fonction pour obtenir une donnée: url qui a l'image encodée en base 64. Notez que l'image doit être entièrement chargée, sinon vous récupérerez simplement une image vide (noire, transparente).
Ce serait quelque chose comme ça. Je n'ai jamais écrit de script Greasemonkey, vous devrez donc peut-être ajuster le code pour qu'il s'exécute dans cet environnement.
function getBase64Image(img) {
// Create an empty canvas element
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
// Copy the image contents to the canvas
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
// Get the data-URL formatted image
// Firefox supports PNG and JPEG. You could check img.src to
// guess the original format, but be aware the using "image/jpg"
// will re-encode the image.
var dataURL = canvas.toDataURL("image/png");
return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}
Obtenir une image au format JPEG ne fonctionne pas sur les anciennes versions (environ 3,5) de Firefox, donc si vous voulez prendre en charge cela, vous devrez vérifier la compatibilité. Si l'encodage n'est pas pris en charge, il sera par défaut "image / png".
Matthew Crumley
la source
drawImage
ne fera rien et vous vous retrouverez avec une toile vierge et l'image résultante.Cette fonction prend l'URL puis retourne l'image BASE64
Appelez ça comme ceci:
getBase64FromImageUrl("images/slbltxt.png")
la source
img.src =
aprèsimg.onload =
, car dans certains navigateurs, comme Opera, l'événement ne se produira pas.getBase64FromImageUrl(url)
etimg.onload = function ()
leur sortie sont img est inaccessible et les ordures collectées. Autre que IE 6/7 et c'est ok.Venant longtemps après, mais aucune des réponses ici n'est entièrement correcte.
Lorsqu'elle est dessinée sur un canevas, l'image transmise est non compressée + toutes pré-multipliées.
Lorsqu'il est exporté, il est non compressé ou recompressé avec un algorithme différent et non multiplié.
Tous les navigateurs et les appareils auront des erreurs d'arrondi différentes se produisant dans ce processus
(voir Empreinte digitale de Canvas ).
Donc, si l'on veut une version base64 d'un fichier image, il faut la demander à nouveau (la plupart du temps elle proviendra du cache) mais cette fois en Blob.
Ensuite, vous pouvez utiliser un FileReader pour le lire soit en tant que ArrayBuffer, soit en tant que dataURL.
la source
XMLHttpRequest cannot load data:image/jpeg;base64,/9j/4AA ... /2Q==. Invalid response. Origin 'https://example.com' is therefore not allowed access.
Une version plus moderne de la réponse de kaiido utilisant fetch serait:
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
Edit: Comme indiqué dans les commentaires, cela renverra une URL d'objet qui pointe vers un fichier dans votre système local au lieu d'une DataURL réelle, donc selon votre cas d'utilisation, cela pourrait ne pas être ce dont vous avez besoin.
Vous pouvez consulter la réponse suivante pour utiliser l'extraction et une URL de données réelle: https://stackoverflow.com/a/50463054/599602
la source
URL.revokeObjectURL()
si votre application utilise cette méthode depuis longtemps, sinon votre mémoire sera encombrée.shiv / shim / sham
Si vos images sont déjà chargées (ou pas), cet "outil" peut être utile:
.. mais pourquoi?
Cela a l'avantage d'utiliser les données d'image "déjà chargées", donc aucune demande supplémentaire n'est nécessaire. De plus, cela permet à l'utilisateur final (programmeur comme vous) de décider du CORS et / ou
mime-type
etquality
-OU- vous pouvez omettre ces arguments / paramètres comme décrit dans la spécification MDN ici .Si vous avez chargé ce JS (avant qu'il ne soit nécessaire), la conversion en
dataURL
est aussi simple que:exemples
HTML
JS
Empreinte digitale du GPU
Si vous êtes préoccupé par la «précision» des bits, vous pouvez modifier cet outil en fonction de vos besoins, comme indiqué dans la réponse de @ Kaiido.
la source
Utilisez l'
onload
événement pour convertir l'image après le chargementAfficher l'extrait de code
la source
En HTML5 mieux utiliser ceci:
la source