Cannot open PNGs created with canvas.toDataUrl - html5-canvas

I create a png blob from a canvas with the toDataUrl method.
const pngdata = canvas.toDataURL("image/png");
I open a text editor and copy the content of pngdata into a file that I call img.png
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAkMAAAiICAYAAAD...
I save this file. When I try to open it (Windows 10) I get "It looks like we don't support this file format"
Removing data:image/png;base64, from the file doesnt help
Why does this not work?

Because your file is still encoded as Base64. You need to decode it to actual binary data for it to be a correct binary file.
You can find many online tools that will do this for you, or the best is probably to directly export your canvas drawing to a binary Blob and download this Blob thanks to a blob:// URL.

Related

Rust open image with other format than file extension

I am trying to open an image in my Rust program. The image is named foo.png, but it won't open the image with image::open("foo.png").
If I rename the file to foo.jpeg, I can open the image, so my guess is that the formatting and the file extension do not match.
My question is then. how do I open a file named foo.png, but decode it as a jpeg?
I have tried image::io::Reader, but I can't seem to make it work properly.
You can use the image::load() function, which lets you specify the format:
let image = image::load(BufReader::new(File::open("foo.png")?), ImageFormat::Jpeg)?;

Data Types and file structure

I interested to work with data types and file formats.
For example I want to open a jpeg file with php and work with it.
For example get the size, or change it to black and white without any library.
I want to know that how can decode bytes of a file and get information about it?
I opened a jpeg file with HxD and saw some data in hexadecimal.
Please give me a reference to know more about files and structures...
Sorry for bad English.
Thanks a lot ...
A lot of image files are encoded using the Exchangeable Image File Format
In PHP you could use something like this method:
http://php.net/manual/en/function.exif-read-data.php
That will allow you to have access to the different properties of an image which are stored in the image header, such as resolution, endianess, etc. which you can then use to read in the raw image data.
The raw image data is usually stored immediately after the image header.
Here is the spec for the Jpeg File Interchange Format (JFIF):
http://www.jpeg.org/public/jfif.pdf
Also, in PHP if you're just reading raw image data you would use:
$file = 'picture.jpg';
readFile($file);
and you can then display it in a browser using:
header('Content-type: image/jpeg');

What is the Html5 API which retrieves image metadata such as file size, format (jpeg, png ..) from image file?

I want to retrieve metadata (width, hight, format ..) from image file (jpeg, png, bmp etc.) in the Html5.
I can use Canvas Api to deal width image.
However, I cannot find Api to retrieve metadata from a file.
Does anyone can know me?
It looks like this little lib might do the trick for you.

Can jpg images support animation?

jpeg image
How is the above jpg image animated? As far as I know jpg format does not support animation.
No, the JPEG file format has no inherent support for animation.
The image you linked is actually an animated GIF disguised with a jpg file extension. (The browser apparently ignores even the MIME type and looks at the file header bytes in such cases.)
If you view the image in firefox, you can right-click on it and select properties:
You'll see Type: GIF image (animated, 54 frames)
Thus, it is a gif-image that has been renamed to .jpg.
For completeness, I'd like to point our that there's Motion-JPEG - sort of a jpg animation.
MJPEGs, usually produced by webcams, are a stream of JPEG files concatenated together, one after another, sometimes delimited by a HTTP header, and served by webcam-webservers with a MIME-Type of multipart/x-mixed-replace;boundary=, where boundary= defines the delimiter.
A search for animated JPEG related projects on github results in two findings:
In case people care about the size of an animated GIF, they strip it into separate JPG frames and tell the browser to exchange these frames in-place via some JavaScript code. For example. (Pawel's answer)
Then there's actually a proposed Animated JPEG standard, which stems from MJPEG and declares framerate and so forth in each JPG frame. Not probable to arrive in browsers anytime soon.
And lastly, I've seen image-hosters to replace large animated GIFs with a mp4 version of the GIF for presentation, plus some Javascript to serve the actual GIF for downloads/non-supported browsers.
And no, JPEG itself, via JFIF, does not offer a facility to animate a JPG file in itself, just as Noldorin already noted in the chosen answer. :shrug:
It is a GIF image... the extension has been changed by hand. Browser engine is smart enough to determine image format regardless of file extension.
var c = 1;
/* Preloading images */
var image1 = new Image();
image1.src = "a1.jpg";
var image2 = new Image();
image2.src = "a2.jpg";
var image3 = new Image();
image3.src = "a3.jpg";
var image4 = new Image();
image4.src = "a4.jpg";
var image5 = new Image();
image5.src = "a5.jpg";
function disp_img(w)
{
if (c == 6)
{
c = 1;
}
var img_src = "a" + c + ".jpg";
document.ani.src = img_src;
c++;
}
t = setInterval("disp_img(c)", 1000);
No JPEG doesn't support animation. Saving a GIF file with .jpeg extension doesn't male it a JPEG file. It's still a GIF file. Because OS Image viewer doesn't look into file extension it rather looks into the content.
If you open that file as binary (in a text editor) you will see the first line contains
GIF89ad�d�˜|� Which is the magic number for GIF.
Yes,
you can make animation using single jpeg. Google "jpeg css sprites". Of course this will not be native animation support by jpeg format.
A bit of a necro-post but since this question popped first when I tried to get info about pixel motion jpeg, here's some additional info.
Since Pixel2, Google created motion jpeg, which is an ordinary jpeg at the end of which there's an mp4 video.
More on this here:
https://android.jlelse.eu/working-with-motion-photos-da0aa49b50c
JPG does not animate. You either saw a series of JPG images rendered with javascript or you saw a GIF file named as a JPG. A web server and browser might still recognize the correct GIF filetype, even if the wrong extension has been added to the filename.
If you open the image file and if it is a sort of GIF format by using a hex editor, you see the following 4 bytes designating that image type is of GIF.

Image shows properly with .show() but saves with artifacts

I have unpickled an image, and utilizing PIL when I use img.show() I can see the image in external viewer properly but when I try to save it using img.save() it is plagued by horizontal color artifacts. As img.show() is using bmp to temporarily save and show the file, I tried using img.save(filepath, "bmp") as well as other file formats. Other formats, such as jpg and png, totally corrupt the image, while bmp creates color artifacts. I checked the documentation for PIL but it was not helpful. What method can I use to save the image I see properly?
After many tries, it turns out instead of:
with open("img.bmp", 'w') as f:
image.save(f)
opening the file with the binary attribute "b" added solves the issue. Like this:
with open("img.bmp", 'wb') as f:
image.save(f)

Resources