Background
As of now, whenever browser load a RGBA image, it premultiplies the RGB channels if alpha is not 255; the original RGB values would be completely lost in case alpha is 0.
This weird behavior would apply to all img and canvas elements, and most browser implement image loading in this way. It seems that this was some sort of web standard, although I could not find where states such standard.
Problem Formulation
I am working on a simple web tool that removes background from a image then outputs transplant RGBA image using opencv-js. The background removing algorithm from opencv would require heavily manual annotations, thus I plan to support loading images with alpha channel so that user could load work-in-progress images from the previous output.
The problem is the loading process. I am following opencv-js guide and load images via:
document.getElementById("image").src = file; // Load image file to a <img> element.
cv.imread(document.getElementById("image")); // Load image from the <img> element.
However, this only works when there is no alpha channel in the image. Because of the weird behavior that how browser loads the image, some pixels could lose their RGB values if the image contains an alpha channel.
My problem is that:
- Is there any way to get the original RGB values from a loaded file without writing an external image loader?
- Is there any way to ignore the alpha channel of the loaded file?
Many thanks.