1
votes

Javascript: comment obtenir une image sous forme d'octets à partir d'une page (sans retélécharger)

Étant donné une page de navigateur existante avec des images, y a-t-il un moyen d'obtenir les octets d'un élément en utilisant Javascript?

Je ne vois aucune méthode dans HTMLImageElement qui permettrait d'obtenir un tableau d'octets à partir de l'image élément.

J'ai essayé l'approche suivante mais celle-ci renvoie un tableau d'octets vide.

var img = document.querySelector('.my_image');
var body = document.querySelector('body');
var canvas = document.createElement('canvas');
canvas.height = img.height;
canvas.width = img.width;
var context = canvas.getContext('2d');
context.drawImage(img, 0, 0);
body.appendChild(canvas);
var imageBytes = context.getImageData(img.width, img.height, 1, 1).data;
console.log(imageBytes);

javascript arrays image

0 commentaires

3 Réponses :

1
votes

J'ai trouvé une autre contribution sur StackOverflow avec la même intention.

Comment convertir une image en tableau d'octets en utilisant javascript uniquement pour stocker l'image sur un serveur sql?

Voici le code pertinent:

var url;
var canvas = document.createElement("canvas");
var img1=document.createElement("img"); 

function getBase64Image(){     
    url = document.getElementById("fileUpload").value;
    img1.setAttribute('src', url); 
    canvas.width = img1.width; 
    canvas.height = img1.height; 
    var ctx = canvas.getContext("2d"); 
    ctx.drawImage(img1, 0, 0); 
    var dataURL = canvas.toDataURL("image/png");
    alert("from getbase64 function"+dataURL );    
    return dataURL;
}

1 commentaires

Cette solution télécharge à nouveau l'image. Cela rendrait le code plus lisible si vous renommiez p en url .

1
votes

Existe-t-il un moyen d'obtenir les octets d'un élément en utilisant Javascript?

Pas vraiment, mais vous pouvez utiliser fetch():
(async () {
  const arrayBuffer = await (await fetch("img-url")).arrayBuffer();
})();
Cela ne devrait pas retélécharger l'image car elle est toujours en cache.

1 commentaires

Merci, cela fonctionne avec es5 js: fetch (img.src) .then (response => response.arrayBuffer ()). Then (buf => {console.log (buf);});


                        
                                            
                            
                                
                                    2
 votes
                                
                            
                            
                                
                                     Le code js suivant récupérera une image d'un élément   existant en tant que base64  sans re-télécharger  l'image ( en supposant qu'il y a un image avec le sélecteur donné sur la page et qu'il n'y a pas de  violation de cors de toile  , ce qui sera le cas lorsque vous cliquerez sur le bouton Exécuter ci-dessous ): 
 


<img src="http://placekitten.com/40/40">
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var img = document.querySelector('img');
canvas.height = img.naturalHeight;
canvas.width = img.naturalWidth;
context.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight);
var base64String = canvas.toDataURL();
console.log(base64String);


 REMARQUE: l'exécution de ce code directement à partir de l'extrait de code échouera avec un message d'erreur indiquant un  violation de plusieurs domaines . Si vous le copiez sur votre propre serveur, vous obtiendrez le contenu encodé en base64. Si vous ne pouvez pas éviter le problème interdomaine, vous devrez utiliser la  solution @ DPardal . Cela fonctionne également sur un domaine tiers si, par exemple, vous injectez au script quelque chose comme le sélénium. 

                                

                                                                    
                                    
                                    
                                        0 commentaires


            
                
		    
                    Articles qui pourrait vous intéresser :
                                            
                            Impossible d'importer le module "@ angular / material"                        
                        
                                            
                            Interaction profonde avec break and catch                        
                        
                                            
                            Utilisation de node.js comment renommer tous les fichiers d'un dossier                        
                        
                                            
                            Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO