Encoding a PNG with JavaScript - Stack Overflow

admin管理员组

文章数量:1305432

I have some arbitrary pixel data that I want to save as a PNG. How can I encode a PNG with JavaScript to acplish 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.

I have some arbitrary pixel data that I want to save as a PNG. How can I encode a PNG with JavaScript to acplish 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.

• javascript
• encoding
• png
• appcelerator
• titanium-mobile

Share Improve this question Follow edited Jul 2, 2012 at 15:39 bilalq 7,70933 gold badges2424 silver badges2828 bronze badges asked Jul 2, 2012 at 15:31 ShamoonShamoon 43.6k101101 gold badges329329 silver badges628628 bronze badges 7

• Can you elaborate "pixel data" part? "A series of 1's and 0's" doesn't ring a bell here. – Rob W Commented Jul 2, 2012 at 15:34
• 1 Titanium Appcelerator actually – Shamoon Commented Jul 2, 2012 at 15:34
• I'd just generate an SVG, since it's easy, but I'm lazy. :-) – Kos Commented Jul 2, 2012 at 15:35
• 1 Do you really have to do this via JavaScript? – Salman Arshad Commented Jul 2, 2012 at 15:37
• 1 Why not use google chart tools to create the qr on their servers? – Chris Laplante Commented Jul 2, 2012 at 15:45

 |  Show 2 more ments

4 Answers 4

Sorted by: Reset to default 1

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

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

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

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

http://www.onlineqrlab./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: https://web.archive/web/20201029134734/http://onlineqrlab./js_doc.php

See also the qrcoder npm package for generating QR codes.

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 pression if you want to use PNG. Why not look at unpressed 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!

本文标签： Encoding a PNG with JavaScriptStack Overflow