How can I stop the alpha-premultiplication with canvas imageData?

by

Bleh, this is an acknowledged issue as far as the canvas spec is concerned. It notes:

Due to the lossy nature of converting to and from premultiplied alpha color values, pixels that have just been set using putImageData() might be returned to an equivalent getImageData() as different values.

So this:

var can = document.createElement('canvas');
var ctx = can.getContext('2d');
can.width = 1;
can.height = 1;
var img = ctx.createImageData(1, 1);
img.data[0] = 40;
img.data[1] = 90;
img.data[2] = 200;
var ALPHAVALUE = 5;
img.data[3] = ALPHAVALUE;
console.log(img.data); 
ctx.putImageData(img, 0, 0);
console.log(ctx.getImageData(0, 0, 1, 1).data);

outputs:

[40, 90, 200, 5]
[51, 102, 204, 5]

In all browsers.

So this is a lossy operation, there’s no workaround unless they change the spec to give an option for not using premultiplication. This was discussed as far back as 2008 in the WHATWG mailing list, and they decided that a “round trip”/identity of put/get image data is not a promise the spec is willing to demand.

If you need to “save” the image data, you can’t save it and keep the same fidelity using putImageData. Workarounds by drawing the full-alpha data to a temporary canvas and redrawing to the main canvas with a smaller globalAlpha won’t work, either.

So you’re out of luck. Sorry.

To this day (May 12, 2014) this still gets discussed on the WHATWG list: http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2014-May/296792.html

More Related Contents:

  1. How to clear the canvas for redrawing
  2. Real mouse position in canvas
  3. how to draw smooth curve through N points using javascript HTML5 canvas?
  4. HTML5 Canvas Resize (Downscale) Image High Quality?
  5. Resize image with javascript canvas (smoothly)
  6. CanvasContext2D drawImage() issue [onload and CORS]
  7. Why is requestAnimationFrame better than setInterval or setTimeout
  8. HTML5 Canvas camera/viewport – how to actually do it?
  9. Capture frames from video with HTML5 and JavaScript
  10. I want to do animation of an object along a particular path
  11. Draw border around nontransparent part of image on canvas
  12. How to use Google fonts in Canvas when Drawing DOM objects in SVG?
  13. addEventListener for keydown on Canvas
  14. Load image from url and draw to HTML5 Canvas
  15. Canvas image masking / overlapping
  16. Save canvas as jpg to desktop [duplicate]
  17. How to pixelate an image with canvas and javascript
  18. HTML canvas – drawing disappear on resizing
  19. Draw HTML5/Javascript Canvas Path in Time
  20. Saving canvas to image via canvas.toDataURL results in black rectangle
  21. Resize a Base-64 image in JavaScript without using canvas
  22. canvas getContext(“2d”) returns null
  23. clearing circular regions from HTML5 Canvas
  24. How to detect shape on a transparent canvas?
  25. HTML5 Canvas API – formatting individual words with italics
  26. How to implement SVG’s preserveAspectRatio=”xMinYMin slice” for canvas drawImage method.
  27. How can I animate the drawing of text on a web page?
  28. Scaling an image to fit on canvas
  29. True Isometric Projection with HTML5 Canvas
  30. HTML5 Canvas: Get Event when drawing is finished

Leave a Comment