Transparent PNG created in Imagemagick drawn as opaque in FFMPEG - ffmpeg

I am trying to script the creation of videos using ImageMagick to create some overlays which are then placed on top of a video.
If I try to use the image created by ImageMagick directly the transparency is drawn as opaque.
I have created a transparent PNG using ImageMagick draw commands. When loaded into GIMP and examined, the PNG has an alpha channel and each transparent pixel appears to have transparency: RGBA = 0,0,0,0
This image when then used as an overlay in ffmpeg just has an opaque black background in the video.
If I export the image again from GIMP then the file looks identical, but in the video just appears as a solid blue (the colour of the drawings in the overlay image).
I can fix this by taking the overlay image, loading it in GIMP and then selecting all and creating a new image from the clipboard and exporting that (using exactly the same settings as when I re-exported before without creating a new file) and it will then work exactly as desired, showing the non-transparent portions of the overlay and not showing transparent parts.
KEY QUESTION:
How can I either script the conversion that somehow occurs when creating a new file in GIMP, or (much better) not have it go wrong in the first place?
Here are the two files:
BROKEN:
WORKS:
What is the difference?

I suggest you prefix the output filename when using ImageMagick with PNG32: to force it to generate a 32-bit ber pixel image - i.e. 1 byte each for R, G, B and Alpha and hope that ffmpeg is happier with that.
convert input.png -draw ... PNG32:output.png
If you run identify -verbose (also in the ImageMagick suite) on your broken and your working images, you will see that the primary difference is that the working image has color-type=6 and bit-depth=8 whereas the broken image has color-type=3 (indexed) and bit-depth=4

Related

How to preserve transparency when using png to make video with ffmpeg

I have a series of png's that have an alpha channel as a background. Each file is named like file_name.0001.png and so on, in subsequent order. I'd like to join these png's into a video with ffmpeg and maintain the transparency.
I've tried a couple of things but I suspect I'm running into a codec issue. When I run ffmpeg, the video is created but the background is black.
If it makes a difference, I'm wanting to use the video in Microsoft Powerpoint. Thanks!
Edit
The suggested duplicate is very close to what I was looking for, thank you! The only reason it's not a complete solution is none of the options presented in the other thread work well with Microsoft Powerpoint. None of the codecs used in the suggested solution play well with Powerpoint. This is not the fault of ffmpeg, but of Powerpoint.
Though ffmpeg doesn't seem to be able to do what I need, I found that imagemagick did the trick. I was able to create a gif from the images and the alpha channel was preserved. I used the following:
convert -dispose 3 -coalesce images.*.png gif_file_name.gif
The -dispose 3 is critical as it tells imagemagick to clear the image prior to overlay, otherwise, you can see each image overlaid on each other (since they have the transparent background).
I couldn't get ffmpeg to create a video that preserved the alpha channel and was Powerpoint friendly (not the fault of ffmpeg). Though ffmpeg doesn't seem to be able to do what I need, I found that imagemagick did the trick. I was able to create a gif from the images and the alpha channel was preserved. I used the following:
convert -dispose 3 -coalesce images.*.png gif_file_name.gif
The -dispose 3 is critical as it tells imagemagick to clear the image prior to overlay, otherwise, you can see each image overlaid on each other (since they have the transparent background).

MiniMagick: How do I add an overlay stock image that's larger than the source?

We're trying to achieve building a custom social sharing image from our app. The backend is built using Ruby/Sinatra and we already use MiniMagick+AWS-SDK to upload user images.
What we want to do is take the user's image and add a stock overlay (it contains a white circle as the placeholder for the variable user image) on top of the user image. I tried using MiniMagick's built-in composite method using Over as the operator, but the problem with Overis, if the overlay is larger than the source, it automatically adjusts according to the source's size. Our overlay is larger and we want to retain the overlay such that the resulting image has the complete overlay with the part of the user image that fits the placeholder white circle visible underneath.
I tried How to use Imagick to merge and mask images? but it doesn't solve my problem.
Basically, say this is the overlay.
And take this sample user image as example:
https://s-media-cache-ak0.pinimg.com/564x/71/08/b5/7108b5a89ce3d6cc0341f876681f8546.jpg
I would like the resulting image to be the complete overlay with the user image visible behind one of those while circles.
Update
As per Mark'sanswer, I wrote the following Ruby code to achieve the result:
avatar = avatar.resize "200x200"
result = mask.composite(avatar) do |c|
c.compose "DstOver"
c.geometry "+100+120" #this could be different depending on your mask's dimensions
end
You can test the result by executing result.write "result.jpg"
Not too sure what you are doing as your mask is an opaque JPEG? However, I think you mean to use a transparent PNG for the mask with a hole in it, in which case you could do this:
convert mask.png \( avatar.jpg -resize 200x200 \) -geometry +360+150 -compose dst-over -composite result.jpg

imagemagick (or other) png->svg->png or svg->png

Im trying to convert either a svg to png or png to svg back to png with imagemagick and it seems like everything I try the final image is black outlined. I'm expecting it to keep all colors the same through-out the process but it doesn't seem to?
convert input.svg output.png
Even if I try the autotrace approach on the imagemagick site nothing changes. I'd prefer to just be able to have the input be PNG output to SVG (smooth borders) and then back out to PNG. Might sound silly but all of the smooth-bordering/anti-aliasing approaches mentioned on the imagemagick site seem to make all output (any colors but white) be black?

View 128 bit TIFF image created by hugin_hdrmerge

I'm having trouble viewing a file that is declared to be a TIFF HDR image by Hugin.
Windows Explorer "Properties => Details" states that the bit-depth of the image is 128
Windows Explorer shows it as a white image.
I've tried converting the image to JPEG via ImageMagick, white image.
Picasa Image Viewer says "Invalid image".
I've tried opening it in Photoshop CS5, white image.
These are the stiching options set in Hugin; http://i.imgur.com/vmzA9.png
These is the Images tab in Hugin; http://i.imgur.com/33ySq.png
This is the entire output of Hugin; http://i.imgur.com/smV6O.png
Here is the complete TIFF _hdr file; http://c759972.r72.cf0.rackcdn.com/DSC_3873-DSC_3875_hdr.tif Size: 64 MB
So, is the problem that I'm not viewing it in the correct mode -- or that it really is a white image?
I imported your image using Mathematica. After import, it appears white. That is because the pixel values are not scaled properly: The maximum value is 1070 whereas any value greater than 1 is displayed as white. When rescaling the values to run in the range from 0 to 1, one can see the following:
In[64]:= image = Import["http://c759972.r72.cf0.rackcdn.com/DSC_3873-DSC_3875_hdr.tif"];
In[65]:= ImageType[image]
Out[65]= "Real32"
In[66]:= Max[ImageData[image]]
Out[66]= 1070.
In[67]:= ImageAdjust[image]
Either the image file is indeed corrupted, or the various programs can't read it. Anyway, the image is not white. There seems also to be some mis-alignment between the poses that were used to create the HDR.

Alpha transparency in indexed-png images

Here is an image:
This image is a simple black-to-transparent gradient saved in full RGBA PNG.
Here is the same image, converted to indexed-alpha PNG by GIMP (Photoshop produces the same result)
As you can see, the gradient is now half-opaque, half-transparent.
Here is the same image again, only this time it was converted to indexed-alpha PNG by a PHP script I wrote:
So my question is: Why are GIMP and Photoshop unable to support partial transparency in indexed images, when the PHP script clearly shows that such an image can be created with no problems?
Is there anything "wrong" with an image whose pallette contains alpha information?
A more programming-related question: Does this transparency in the last image work in Internet Explorer 6?
I've finally found the actual answer: There is a metadata entry that allows you to define the alpha value of each colour in the colour table. Most graphics programs don't make use of this, but it does exist and can be used, in particular by GD.
Another option besides fireworks is pngquant, a command line application that will convert a rgba png into an indexed png with transparency.
I found this post which talks some more about how to use it.
IE6 and earlier in windows does not support variable transparency PNGs without annoying workarounds. An indexed PNG will only show the fully opaque parts which usually works pretty well. A drop shadow would disappear but the opaque parts of the logo or icon would continue to show.
This page has a better explanation and instructions with more png compression and quantization tools: http://calendar.perfplanet.com/2010/png-that-works/
For the record, PNG does not literally support indexed images with an alpha channel. What is really happening is that PNG allows you to add additional colors to the color table (i.e. index) with alpha values in those colors... not a complete alpha channel. FWIW...
Yeah I know what you mean. Fireworks is the only image editing program that I know of that can create and edit PNG8+Alpha without problems. I wish more paint programs would support this format cause Fireworks is expensive!
I found a way in GIMP to create or convert an image with reduced color palette and alpha channel.
The trick is to add a mask to the layer.
Full steps to reproduce:
Have your image in one layer
Add a mask to the layer. Select Transfer layer's alpha channel.
Convert to Indexed (Image -> Mode -> Indexed...)
Save as PNG
Now your image has reduced colors and reduced size, but it keeps your smooth transparency.

Resources