How to store an image inside a qr code content offline?

Question

I want to store an image inside a QR code offline. When the user scans the QR code, the image will automatically show without any network connectivity. Is there a way to do this?

Answer 1

Not typically possible, but a while ago I made an experiment called tagdrop https://github.com/mofosyne/tagdrop/blob/master/readme.md that would read a QR code and render the image stored in it.

For example you should see a running man stored in this QR code which is essentally just a dataurl. This does open up easily on zxing barcode reader app, however the stock android app only just use the dataurl as if it's just a search string.

Answer 2

I "did" it few months ago, "my solution" was to encode the tiny image into a Base64 text and then users have to copy&paste it on the browser, it can be offline but you had to have a browser installed in the device.

IMAGE IN BASE64

This is the Base64 code:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAxQTFRF+fQAAAAAKcn//2Cw33DDngAAAGBJREFUeNpiYBgFAwUY0QFWNQwEVTGCFTEjAWyKGMCKmOCACooYIZgKiqjnJsKKiAknwiFOOO6YsABiTMI0DCqGiQibhGYWI8jPaNoxjCLKJET6RGMwYA0JNMaQBgABBgABfwIRirS3LAAAAABJRU5ErkJggg==

Answer 3

I have seen a couple of solutions where an image is store inside an encrypted qr code for document authentication/verification purposes with no internet connection.

The system read a qr code from an ID document with a dedicated terminal or an app, and it will show the same picture printed in the document plus fields. This allows visual picture authentication.

India and Mexican government use this kind of solutions widely. Some solutions use 2 qr codes like this sample below. Of course the terminal or phone app must have the private keys to be able to read the code.

Sample id card using qrcode for document verification OFFLINE

Answer 4

It is possible to encode an image into a qrcode. The problem is that there is no "easy way" of surfacing that image. Either you need to have an app installed that can interpret the image (e.g. via deep linking), or you have to piggy back on another protocol (e.g. vcard).

Apple is nice enough to allow its OS-level QRcode reader to parse the vcard syntax. Since vcard supports embedded images you can surface the image as a profile photo in the contacts app. The example code snippet below shows how to create that QRcode and the resulting (huge, but valid) QR code. :-)

There are of course limitations: In short you will only be able to encode tiny images, although you can probably push the limits by compressing the image and using e.g. webp or HEIF.

How to generate QR code with an embedded base64 encoded image (using qrcode, source of gopher base64):

import qrcode

qrcode.make("BEGIN:VCARD]n"
"VERSION:2.1\n"
"FN: Gopher\n"
"NOTE:Its possible to encode an image into a QR code!\n"
"PHOTO;ENCODING=b;TYPE=PNG:iVBORw0KGgoAAAANSUhEUgAAAEsAA"
"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"
"gAAAABJRU5ErkJggg==\n"
"END:VCARD")

Answer 5

I disagree. If you have an image stored in your internal phone memory it has an adress that can be opened with any browser (just tried with chrome on Android with /storage/emulated/0/DCIM/Camera/IMG_20181222_160738.jpg and it worked). The problem is to find a QR reader that actually uses this internal adress as if it was an URL and opens it directly (most of them try to look for information using google). But it is posible, for sure.

Answer 6

This is not possible.

QR Code readers are made to decrypt text entries. The only way you have is to put a link in your QR Code which redirects to the image : and that needs connectivity.

Even if you encode your image into data URI, the QR Code will be too big to be correctly read. QR codes are made to encapsulate about 250 characters. A data URI image's length is from about 10,000 to 1,000,000 characters.

And even if it is correctly read (maybe if you used high ECC redondancy to encode it), there is nothing in the reader's application that can read a data URI image. Only a browser can, using CSS styling.

QR Codes were created in a connected environment, to share links easily.

Your only option is to host your image somewhere and then encode the URL inside your QR Code. Those are examples of image hoster :

• http://tinypic.com/
• http://postimage.org/