Encoding a PNG with JavaScript

Question

I have some arbitrary pixel data that I want to save as a PNG. How can I encode a PNG with JavaScript to accomplish this?

The data is a series of 1's and 0's that I want to use to create a QR code. It's QR code arbitrary data

I'm not using the DOM, so jQuery and createElement's are out.

Pleistocene

Can you elaborate "pixel data" part? "A series of 1's and 0's" doesn't ring a bell here. – Tintinnabulum

Titanium Appcelerator actually – Pleistocene

I'd just generate an SVG, since it's easy, but I'm lazy. :-) – Fishmonger

Can I do that with Appcelerator? – Pleistocene

Do you really have to do this via JavaScript? – Chromous

Yes... since I'm creating a mobile app with Appcelerator – Pleistocene

Why not use google chart tools to create the qr on their servers? – Underglaze

Answer 1

If I understand you correctly, you could use this library to generate qrcodes:

http://www.onlineqrlab.com/js_doc.php

Haven't tried it, but it seems well documented

Edit: This is a very old answer (9yrs+! O.o), so the link above now returns a 404. See web.archive.org: https://web.archive.org/web/20201029134734/http://onlineqrlab.com/js_doc.php

See also the qrcoder npm package for generating QR codes.

Amyloid

Answer 2

http://www.xarg.org/2010/03/generate-client-side-png-files-using-javascript/

Pink

Answer 3

Or encode it directly to a PNG with pure javascript (no canvas required):

https://github.com/IjzerenHein/pnglib-es6

Derogate

Answer 4

EDIT: As the other answer states and links to there's a javascript explanation of the PNG format. Hooray!

If you want to create an image file in PNG format your question is basically asking, "What is the file format for PNG? And how do I convert a QR code grid into an image that is a QR code image, given that I can define that QR code by a sequence of 1s and 0s."

You will need to consider LZW compression if you want to use PNG. Why not look at uncompressed GIFs or bitmaps? Use Titanium to create the file, hard code a header for your image format of choice then use the appropriate coding to programmatically create your image.

But if you simply want to display a QR code to the screen why not use a Titanium Webview canvas? Or if you are concerned that it is too slow (it won't be for drawing black boxes), use the titanium+plus Paint for iOS.

A 'hack' may be to use the UI elements with absolute positioning to construct your QR code image by drawing it with UI elements. Cool hack.

Or you could just use the SVG format in a webview. Personally, I think the easiest if you need a file is use a bitmap with a hardcoded header as I said above, or a GIF if you can't use a bitmap.

If you just need the image I would try using one of the Appcelerator drawing methods.

Good luck!

Jemison