javascript - Transparent pixels using HTML5 canvas and getImageData? - Stack Overflow

In my application I need to get some images, process them, and save for later use. So I'm drawing them to a temporary canvas, then getting with getImageData function. But in output transparency is lost...

Here is my code:

var tempCanvas = document.createElement('canvas');
var tempContext = tempCanvas.getContext('2d');

tempContext.drawImage(image, 0, 0);
var imageData = tempContext.getImageData(0, 0, image.width, image.height);

My image has some transparent pixels but after this there are no transparent pixels in imageData how can I solve this issue?

Is there any way to convert Html Image to ImageData, so I can process it and then draw to canvas?

In my application I need to get some images, process them, and save for later use. So I'm drawing them to a temporary canvas, then getting with getImageData function. But in output transparency is lost...

Here is my code:

var tempCanvas = document.createElement('canvas');
var tempContext = tempCanvas.getContext('2d');

tempContext.drawImage(image, 0, 0);
var imageData = tempContext.getImageData(0, 0, image.width, image.height);

My image has some transparent pixels but after this there are no transparent pixels in imageData how can I solve this issue?

Is there any way to convert Html Image to ImageData, so I can process it and then draw to canvas?

• javascript
• image
• html
• canvas

Share Improve this question Follow edited Mar 10, 2013 at 15:47 Drew Noakes 312k170170 gold badges698698 silver badges765765 bronze badges asked Jul 23, 2012 at 11:23 shift66shift66 12k1313 gold badges5353 silver badges8383 bronze badges 2

• How are you testing to see if your alpha transparency exists? imageData contains the alpha value for each pixel. – Loktar Commented Jul 23, 2012 at 16:55
• I'm trying to draw that images to canvas again (with putImageData) and transparency is lost. – shift66 Commented Jul 26, 2012 at 6:02

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

your imageData should contain alpha channel.

However, putImageData will replace the pixel value in the context. It won't merge it with the previous value of the pixel in the context, it will replace it. So, what you should see is the pixel behind the canvas (in most of cases, the pixel color of the body tag of your html page).

What you have to do:

• use a temporaty canvas to get image data is the good way
• modifiy the imageData as you need
• don't try to put this imageData back in the conetext with a putImageData, it won't behave as you wish
• but create a new Image object and give it the imageData as source (yes, it works :))
• use drawImage to draw back the image

example of code:

var tempCanvas = document.createElement('canvas');
var tempContext = tempCanvas.getContext('2d');

tempContext.drawImage(image, 0, 0);
var imageData = tempContext.getImageData(0, 0, image.width, image.height);

//modify here the imageData as you need

var img = new Image();
img.src = imageData;
context.drawImage(img, 0, 0); //the true context of the canvas

It should works.