We Keep Coding

How to store arbitrary data inside a png file using JavaScript?

I'm making a UserScript in TypeScript that allows someone to download a specific <canvas> as a .png file. This <canvas> is an outfit in a dress-up game. I want to include a JSON blob within the exported .png so that users can later import this .png and access the outfit's data.
The data insertion should be non-destructive (no steganography).
How do I insert arbitrary data in a PNG file in JavaScript?

How to save canvas(png) as TIFF file in javascript?

I want to save my generated canvas to tiff file, so after that I can save as for example name.tiff

You can do that with the following library: canvas-to-tiff.
The api is pretty straight forward, just bear in mind that the *.tiff file that is generated from the canvas is very large in size.
It's a 100 times (yes, one hundred) larger than an equivalent *.png file.

Is there an HTML5 method for displaying a tiff image data already loaded into memory

I have a tiff image stored in memory (in a javascript variable). What is the javascript or html technique for displaying this image in the browser window? Is there a "drawimage" type of function?

Native browser-support for tiff files is still pretty bad.
Wikipedia has a nice overview on browsers Image format support.
That being said; since a .tiff image is still essentially a raster-image, one could indeed convert it (the tricky part is stuff like supporting different compression-algorithms like PACKBITS, DEFLATE, LZW, etc) to another (browser-supported) raster-format (so one could feed it as a data:img-source).
There is a library called Tiffus: a client side pure Javascript imaging library to load, save and manipulate binary images.
The original project aim was was to create a plain Javascript chrome extension which can convert single/multi page TIFF image/s to BMP/GIF image (this is where the name came from).
However now it supports:
Windows BMP (no compression, RLE)
OS/2 BMP
ICO
GIF
JPEG
PNG
TIFF
and currently supports the folloing image functions:
load
save
resize
flip
invert color
Basically it works like this:
Source image downloaded as Binary Data using XMLHttpRequest with
MimeType('text/plain; charset=x-user-defined'); (future: HTML5
Canvas ImageData)
Imageprocessing using Tiffus
Desination image shown as Data URI scheme (future: HTML5 Canvas ImageData)
Note that according to the above; the author expects to use HTML5 Canvas ImageData in the future.
Hope this helps!

Is it possible to save JavaScript generated images on the serverside?

I want to use JSChart (http://www.jscharts.com/) to generate a dynamic chart.
It uses a <canvas> object.
Furthermore I want to save the generated Chart as an image (to put in a pdf file) on the serverside.
Is it possible to save a JavaScript generated image as jpg or png on the serverside?
Preferably the solution should work with Ruby and Ruby On Rails.

I think this uses a <canvas> object to render the charts, can't tell without downloading and it requires registration, so no. If it does, perhaps take a look at Canvas2Image, that returns the canvas as a data URL, base64 encoded image, which could be sent back to the server via an AJAX call.

You can use http://xmlgraphics.apache.org/batik/ on the server to convert an SVG. It's the method used by highcharts to convert the graph generated by the application. See http://www.highcharts.com/docs/export-module/setting-up-the-server

Javascript Hex String to Image

I'll cut right to the chase. Right now I am developing a web based application. It has a PHP REST based architecture that serves up XML documents. On many of these documents attributes are hex encoded picture strings.
On the client side jQuery AJAX fetches an XML document with a picture in it. I need to display said picture in some <img> tags. However my knowledge on such methods is lacking so here I am asking for help.
Goal:
JavaScript String variable in hex or base64 >>> HTML displayed image.
Cross browser is required, or a hack for the ones that do not support it is fine.
Thanks,
Gunnar

Encode the images using base64 and write them out in a CDATA string into your XML with this format:
data:[<MIME-type>][;charset="<encoding>"][;base64],0123456789abcdefg...
When constructing your document, use this string as your src
<img src="data:image/png;base64,0123456789abcdefg..." />

Is it possible to use a php file just for rendering the image? That php file could write some base64 encoded values via
echo base64_decode($_GET['data']);
while you embed images like
<img src="http://host/yourPhpFileForDecode.php?data=base64encoded.../>