i wonder, how i could figure out if an image has a transparency effect applied. Is there any way in JavaScript or HTML5? I have a Base64-coded image. Is there a way to read out the transparency-information (alpha-channel). For example, if i load a PNG-Image, then convert it to base64, then drop it to html5-canvas, now how can i know if this has transparency-effect activated?
thanx alot
okyo
When you say 'drop it to html5-canvas', I assume you mean using an image element with the 'data:' URI scheme. Also, let's take it as given that you don't want to write javascript code to parse the image files.
You could do something like this pseudo-code:
create 2 off-screen canvases
color one opaque white and the other opaque black
draw the image on both of them
call getImageData on each canvas, using the image bounds
compare the image data
If the image has any transparent or partially-transparent pixels, then presumably the two canvases will end up at least a little different. One exception would be if the image has the transparency feature enabled but is entirely opaque anyway. Another would be if the non-opaque pixels are only very slightly transparent - not enough to alter a white or black background. But this technique would catch images where transparency is noticeable.
Related
Does anyone know how I could trim a UIImageView of some image with surrounding transparency down to just barely fit the content by cropping off the edges?
You can try using this category:
https://github.com/Clstroud/UIImage-Trim
Here is a usage example from their docs:
UIImage-Trim Category for trimming transparent pixels of an UIImage
object.
How to use
Add the UIImage+Trim files to your project. Include UIImage+Trim.h in
the files where you want to trim your images.
Trimming is pretty straightforward:
[yourImage imageByTrimmingTransparentPixels];
Optionally, you may want to consider any non-opaque pixels as being
transparent (for instance, cropping out a light drop shadow). This can
be achieved by using the alternate method:
[yourImage imageByTrimmingTransparentPixelsRequiringFullOpacity:YES];
Additionally, if you merely desire to know the UIEdgeInsets of the
transparency around the image, you may want to use the following:
[yourImage transparencyInsetsRequiringFullOpacity:YES];
This call works based on the same principles as the "advanced" trim
method, with the boolean dictating whether non-opaque pixels should be
considered transparent.
I've seen many questions asking how to draw transparent images, but my case is quite the opposite. I have a TPicture where I load any file type, including PNG. I then read TPicture.Graphic and call Draw directly in a TBitmap's canvas. However, when the image is drawn, it carries over the transparency of the original PNG image.
The current code is very simple, just...
MyPicture.LoadFromFile(SomeFilename);
MyBitmap.Canvas.StretchDraw(SomeRect, MyPicture.Graphic);
Now the issue is that the canvas which I'm drawing to already has an image, and this PNG is being drawn over a portion of it. When the PNG has a transparent background, normally it appears white. However, since it's directly drawing a transparent graphic to the canvas, it keeps those areas transparent.
How can I draw a PNG Graphic directly to a canvas without its original transparency while using only the canvas drawing methods? I don't want to create too many graphic objects and draw too many times, hence the reason I only have 2 lines of code above. I'm hoping there's a way I can do something like BitBlt with some special mechanism for this purpose.
The only method pre-built in Delphi XE2 has a defect and doesn't work properly. Instead, draw whitespace, or whatever background you desire, to a blank canvas. Then draw the transparent image on top.
In case you aren't drawing onto a blank canvas, you can call FillRect method of the bitmap canvas for the region you're planning to draw the png.
I have been designing an app with oCanvas.js. It's a really nice canvas library that makes it much easier to create an app that can create and manipulate images, but I ran into a snag when I was trying to implement image filters:
I need transparent backgrounds so that I can have multiple layers, each of which is represented by its own display object, rendered separately (meaning one at a time) on a hidden "staging" canvas. Immediately after being rendered, a layer is then drawn on top of the previous layers on the visible canvas, so that different image filters can be applied to each layer independently during render.
The issue I am having is that, when attempting to extract the image from an oCanvas object's canvasElement, the resulting images never have a transparent background. For example: Imagine I have a 50x50 canvas that has been oCanvas.create() processed, but has display: none; (this is used as the rendering canvas) and another canvas (same dimensions) without an oCanvas instance. I am trying to do something like this (Pseudocode):
visibleCanvas.getContext("2d").drawImage(MyOcanvasCore.canvasElement, 0, 0);
I have also tried using URL = MyOcanvasCore.canvasElement.toDataURL() and then having my visibleCanvas do a drawImage with src=url.
The images always transfer, but they have a white background, even though I specify background: "transparent" during canvas.create(). As such, they completely overwrite all previous layers.
Do you have any tips for me? Am I doing it wrong? I tried transferring stuff from one canvas to another using classic drawRect, drawImage, etc methods, and transparency was retained. That's why I believe it is either the library or my code.
I guess you are using the image format other than png.
You should have your image format in PNG which keeps all the details of every pixel >including transparency of pixels
and not a compressed format.
So just try keep your image in png format after edting them in some image editor and save > result as .png .
I am able to use PNGs that have drop shadows but the effect when displayed on the BlackBerry looks like it collapses the transparent channel down from its original smooth gradient to only several transparent values giving it a choppy look.
The same issue is encountered by drawing on the UI using BlackBerry fields or the graphics.drawBitmap method. Anyone want to share hints for getting great looking transparent effects on the BlackBerry?
Dither your images or pre-composite them. When loading an image on a BlackBerry, you get at most 4 bits of alpha data, which allows 4 bits each for RGB. So, if you want to dither your transparent images, go for RGB4444. If you don't dither them, that's what causes 8-bit alpha to just be mapped to the nearest 4-bit value.
If you include no alpha data (i.e., precomposite), you can get RGB565, which will have a better image quality overall, but you will have to deal with static positioning for your dropshadows.
I have over 100k in images that at one time were cropped and had a white border applied to them. I'm looking for the best way to programmaticly process each image so that I can detect the white borders and either crop the border or fill in the border with black instead. Would I need to use something like OpenCV or just plain old GDI? I've attached an image for reference.
What I have to work with (White borders are there, trust me):
http://cdn-images.hollywood.com/site/SO_3666231.jpg
Plain old GDI should work just fine, except for one thing - I don't know how to make GDI save an image back to a file. When I've had to do it in the past I've written a .BMP file in pieces, which wouldn't work for a JPEG. Time for a new question?
You're going to need a two step process - first measure the white borders, then copy the image to a new image to get rid of them.
Starting with a JPEG image introduces two small problems. First is that the image will contain some decoding artifacts, and white won't always be an RGB value of (255,255,255). You'll need to establish a threshold, such as (250,250,250) and see how that works; if it doesn't catch all of the borders, you'll need to try a lower threshold. Second is that resaving the image as a JPEG will introduce additional artifacts, lowering the quality of the image. Hopefully this will be within acceptable limits, but only you can be the judge of that.
I'm sorry that this isn't really an answer, perhaps more like 1/4 of an answer. I hope you find it useful.