Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Alpha channel of pasted images (supposed to be transparent) becomes black on Firefox (the same behavior don't happens on Chrome)

  • No replies
  • 1 has this problem
  • 17 views
more options

as posted here: http://stackoverflow.com/q/43618372/5875416

I'm using the following code to paste images from clipboard on a page:

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);
 }

}

<textarea id="pasteArea" placeholder="Paste Image Here"></textarea>

It works fine in all browsers (Chrome, Firefox, Edge and Opera). The problem is: when the image is a PNG or GIF with alpha channel (transparent areas), the alpha becomes black in Mozilla Firefox and MS Edge.

as posted here: http://stackoverflow.com/q/43618372/5875416 I'm using the following code to paste images from clipboard on a page: 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); } } <textarea id="pasteArea" placeholder="Paste Image Here"></textarea> <img id="pastedImage"> It works fine in all browsers (Chrome, Firefox, Edge and Opera). The problem is: when the image is a PNG or GIF with alpha channel (transparent areas), the alpha becomes black in Mozilla Firefox and MS Edge.