PNG ou JPG (non rgb) sur websocket avec ArrayBuffer sans base64

Question

Existe-t-il un moyen de convertir une image PNG en canvas sans avoir à l'encoder en base64?

Le serveur envoie un fichier PNG en binaire, le client le reçoit dans un ArrayBuffer et l'affiche sur le canevas. Le seul moyen d'obtenir ce résultat est d'encoder les données en base64 - côté serveur - car j'en ai besoin pour être rapide. Du côté client, j'ai créé un obj d'image avec le tag data:image/png;base64. Je sais que vous pouvez créer un blob et un lecteur de fichiers, mais je n'ai pas réussi à faire fonctionner ça.

Ceci est la version blob:

var blob = new Blob([image.buffer],{type: "image/png"}); 
var imgReader = new FileReader(); 

imgReader.onload = function (e) { 
    var img = new Image(); 
    img.onload = function (e) { 
    console.log("PNG Loaded"); 
    ctx.drawImage(img, left, top); 
    window.URL.revokeObjectURL(img.src);  
    img = null; 
    }; 

    img.onerror = img.onabort = function() {   
    img = null; 
    }; 
    img.src = e.target.result;    
    imgReader = null; 
} 
imgReader.readAsDataURL(blob); 

image est Uint8Array. Je crée un blob à partir de celui-ci. Le reste est explicite.

Les images sont des images PNG correctes et valides. Quand je l'envoie depuis le serveur, je les ai écrits dans un fichier du côté serveur et ils s'affichent correctement dans un visualiseur d'images.

Answer 1

Vous pouvez créer une URL blob avec createObjectURL sans avoir à faire un encodage base64, il suffit de passer le blob vous en caisse à lui et vous aurez une URL que vous pouvez définir comme img.src

var blob = new Blob([image],{type: "image/png"}); 
    var img = new Image(); 
    img.onload = function (e) { 
    console.log("PNG Loaded"); 
    ctx.drawImage(img, left, top); 
    window.URL.revokeObjectURL(img.src);  
    img = null; 
    }; 

    img.onerror = img.onabort = function() {   
    img = null; 
    }; 
    img.src = window.URL.createObjectURL(blob); 

Answer 2

Je l'ai seulement vu utilisé de cette façon. Si vous ne souhaitez pas envoyer le base64 via le réseau, vous pouvez utiliser le btoa pour convertir les données binaires en base64 côté client. En regardant MDN, drawImage prend un CanvasImageSource objet. CanvasImageSource représente tout objet de type HTMLImageElement, ImageBitmap et quelques autres.

Lors d'une autre recherche, j'ai trouvé quelques informations liées à ImageBitmap, mais, pas assez pour fournir une solution.

J'aurais pu ajouter ceci au commentaire, mais, il serait devenu un commentaire massif et perdrait toute la clarté.