J'utilise un code from here pour coller des images du presse-papier sur une page. Cela fonctionne très bien dans tous les navigateurs (Chrome, Firefox, Edge et Opera).Alpha devient noir en provenance de presse-papier sur Mozilla Firefox et MS Edge
Le problème est le suivant: lorsque l'image est au format PNG ou GIF avec un canal alpha (zones transparentes), l'alpha devient noir dans Firefox et Edge.
est ici l'extrait de code (or jsfiddle if you prefer):
document.getElementById('pasteArea').onpaste = function (event) {
// use event.originalEvent.clipboard for newer chrome versions
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
console.log(JSON.stringify(items)); // will give you the mime types
// find pasted image among pasted items
var blob = null;
for (var i = 0; i < items.length; i++) {
if (items[i].type.indexOf("image") === 0) {
blob = items[i].getAsFile();
}
}
// load image if there is a pasted image
if (blob !== null) {
var reader = new FileReader();
reader.onload = function(event) {
console.log(event.target.result); // data url!
document.getElementById("pastedImage").src = event.target.result;
};
reader.readAsDataURL(blob);
}
}body {
background-color: skyblue;
}<textarea id="pasteArea" placeholder="Paste Image Here"></textarea><br>
<img id="pastedImage">est ici l'image source que j'utilise dans la prochaine manifestation:
C'est ce qui se passe dans Chrome/Opéra (bonne sortie):
C'est ce qui se passe dans Firefox/Bord (mauvaise sortie):
Je vois aussi ce mauvais comportement (alpha noir après collage) dans d'autres logiciels comme Adobe Illustrator et Corel Draw, où vous devez 'Ouvrir' ou 'Placer/Importer' le fichier au lieu de 'Coller' pour éviter l'alpha noir.
Informations système: Windows 10 (mise à jour anniversaire) 32 bits; Chrome 58.0.3029.81, Opera 44.0, Firefox 53.0, Microsoft bord 38.14393.0.0
Ma question est: Comment puis-je éviter l'alpha noir sur les images empâtées dans les pages Web sur Mozilla Firefox/MS Edge?
Je n'ai pas la moindre idée de ce dont il dépend, mais je ne peux pas le reproduire dans deux ordinateurs Windows 10 x64 différents avec Firefox/53.0, mais cela arrive dans Edge/38.14393.1066.0. L'image obtenue dans Edge est 2 Ko plus petite. –
Infos supplémentaires: Je suis sur Windows 10 32bits; Chrome 58.0.3029.81, Opera 44.0, Firefox 53.0, Microsoft Edge 38.14393.0.0 –
Alpha est déjà manquant dans 'items [i] .getAsFile()'. Je suppose que c'est lié au fait que le presse-papier peut stocker des données dans plusieurs formats. Je n'ai pas de presse-papiers à portée de la main, mais lorsque je colle l'image dans un traitement de texte, trois choix différents me sont donnés et l'un d'entre eux manque de canal alpha. Je ne sais pas si vous pouvez choisir en utilisant cette API. –