5

I'm using a code from here to paste images from clipboard on a page. 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 Firefox and Edge.

Here's the code snippet (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">

Here's the source image I use in the next demonstration:

source pic

This is what happens in Chrome/Opera (good output):

transsourcearrowtranssource

This is what happens in Firefox/Edge (bad output):

transsourcearrowenter image description here

I also see this bad behavior (black alpha when pasted) in other softwares like Adobe Illustrator and Corel Draw, where you need to 'Open' or 'Place/Import' the file instead of 'Paste' to avoid the black alpha.

System info: Windows 10 (anniversary update) 32bits; Chrome 58.0.3029.81, Opera 44.0, Firefox 53.0, Microsoft Edge 38.14393.0.0

My question is: How can I avoid the black alpha on images pasted in webpages on Mozilla Firefox/MS Edge?

Community
  • 1
  • 1
L777
  • 7,719
  • 3
  • 38
  • 63
  • I don't have the faintest idea of what it depends on but I cannot reproduce it in two different Windows 10 x64 computers with Firefox/53.0—however it does happen in Edge/38.14393.1066.0. The resulting image in Edge is 2 KB smaller. – Álvaro González Apr 26 '17 at 18:47
  • Additional info: I'm on Windows 10 32bits; Chrome 58.0.3029.81, Opera 44.0, Firefox 53.0, Microsoft Edge 38.14393.0.0 – L777 Apr 26 '17 at 19:34
  • 1
    Alpha is already missing at `items[i].getAsFile()`. I suspect it's related to the fact that clipboard may store data in several formats. I don't have a clipboard viewer at hand but when I paste the picture into a word processor I'm given three different choices and one of them lacks alpha channel. I don't know if you can choose when using this API. – Álvaro González Apr 27 '17 at 09:40
  • very interesting @ÁlvaroGonzález thanks for the info; by the way, a friend of mine in a 64bits system got the same black alpha output on Firefox. – L777 Apr 27 '17 at 09:53

1 Answers1

1

You won't be able to work around this yourself. The only way your users can avoid this is to upload or download the images instead of using the clipboard to import or export them.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356