This is a demo site for the Django QR Code application.
The SVG is the default image format. It is a vector image format so it can be scaled as wanted. However, it has two drawbacks.
The size is not given in pixel, which can be problematic if the design of your website relies on a fixed width (in pixels).
The format is less compact than PNG and results in a larger HTML content. Note that a base64 PNG is less compressible than a SVG tag, so it might not matter that much of you use HTML compression on your web server.
SVG has broad support now and it will work properly on any modern web browser.
The qr_from_text tag renders an inline QR code within your Django template. It comes with several options to customize the image format (SVG or PNG), the size, the border and the matrix size.
A tiny "hello world" QR code in SVG format (default format) |
A tiny "hello world" QR code in PNG format |
A small "hello world" QR code |
| Template code: | ||
{% templatetag openblock %} qr_from_text "Hello World!" size="T" image_format="svg" {% templatetag closeblock %}
|
{% templatetag openblock %} qr_from_text "Hello World!" size="T" image_format="png" {% templatetag closeblock %}
|
{% templatetag openblock %} qr_from_text "Hello World!" size="S" {% templatetag closeblock %}
|
|
{% qr_from_text "Hello World!" size="T" image_format="svg" %}
|
{% qr_from_text "Hello World!" size="T" image_format="png" %}
|
{% qr_from_text "Hello World!" size="S" %}
|
A medium "hello world" QR code (default size) with level H of error correction (up to 30% damage) |
A large "hello world" QR code with level L of error correction (up to 7% damage) |
A huge "hello world" QR code with level M of error correction (default level, up to 15% damage) |
| Template code: | ||
{% templatetag openblock %} qr_from_text "Hello World!" size="M" error_correction="H" {% templatetag closeblock %}
|
{% templatetag openblock %} qr_from_text "Hello World!" size="L" error_correction="L" {% templatetag closeblock %}
|
{% templatetag openblock %} qr_from_text "Hello World!" size="H" error_correction="M" {% templatetag closeblock %}
|
|
{% qr_from_text "Hello World!" size="M" error_correction="H" %}
|
{% qr_from_text "Hello World!" size="L" error_correction="L" %}
|
{% qr_from_text "Hello World!" size="H" error_correction="M" %}
|
A custom "hello world" QR code with size 8 and version 12 and dark modules in dark green finder and alignment patterns in black |
A custom "hello world" QR code with size 10 and border 6 |
A custom "hello world" QR code using a QRCodeOptions instance. Here the QRCodeOptions instance has a size t, a border of 6 modules, and a level L of error correction (up to 7% damage). |
| Template code: | ||
{% templatetag openblock %} qr_from_text "Hello World!" size=8 version=12 dark_color="darkgreen" finder_dark_color="#000" alignment_dark_color="#000" {% templatetag closeblock %}
|
{% templatetag openblock %} qr_from_text "Hello World!" size=10 border=6 {% templatetag closeblock %}
|
{% templatetag openblock %} qr_from_text "Hello World!" options=options_example {% templatetag closeblock %}
|
|
{% qr_from_text "Hello World!" size=8 version=12 dark_color="darkgreen" finder_dark_color="#000" alignment_dark_color="#000" %}
|
{% qr_from_text "Hello World!" size=10 border=6 %}
|
{% qr_from_text "Hello World!" options=options_example %}
|
Micro QR Codes are generated if either version or micro indicate that a Micro QR Code is preferred.
{% templatetag openblock %} qr_from_text "Hello World!" size=8 dark_color="darkgreen" finder_dark_color="#000" alignment_dark_color="#000" micro=True {% templatetag closeblock %}
|
{% templatetag openblock %} qr_from_text "Hello World!" size=20 border=6 version='M4' data_dark_color='#4B0082' {% templatetag closeblock %}
|
|
{% qr_from_text "Hello World!" size=8 dark_color="darkgreen" finder_dark_color="#000" alignment_dark_color="#000" micro=True %}
|
{% qr_from_text "Hello World!" size=20 border=6 version='M4' data_dark_color='#4B0082' %}
|
The qr_url_from_text tag generates an url to an image representing the QR code. It comes with the same options as qr_from_text to customize the image format (SVG or PNG), the size, the border and the matrix size. It also has an additional option cache_enabled to disable caching of served image.
The image targeted by the generated URL is served by a view provided in qr_code.urls.
Therefore you need to include the URLs provided by qr_code.urls in your app in order to
make this tag work. This can be achieved with something like this:
from django.conf.urls import include, url
from qr_code import urls as qr_code_urls
urlpatterns = [
path('qr_code/', include(qr_code_urls, namespace="qr_code")),
]
A medium "hello world" QR code that uses an URL to serve the image in SVG format |
A "hello world" QR code in version 10 that uses an URL to serve the image in PNG format |
A "hello world" QR code in version 20 that uses an URL to serve the image in SVG format, and disable caching for served image |
| Template code: | ||
<img src="{% templatetag openblock %} qr_url_from_text "Hello World!" dark_color="darkblue" {% templatetag closeblock %}" alt="Hello World!">
|
<img src="{% templatetag openblock %} qr_url_from_text "Hello World!" size=8 version=10 image_format='png' dark_color="darkred" finder_dark_color="#000" {% templatetag closeblock %}" alt="Hello World!">
|
<img src="{% templatetag openblock %} qr_url_from_text "Hello World!" size=8 version=20 cache_enabled=False {% templatetag closeblock %}" alt="Hello World!">
|
|
|
|
|
Aside from generating a QR code from a given text, you can also generate codes for specific application purposes, that a reader can interpret as an action to take: open a mail client to send an email to a given address, add a contact to your phone book, connect to a Wi-Fi, start a SMS, etc. See this documentation about what a QR code can encode.
Django QR Code proposes several utility tags to ease the generation of such codes, without having to build the appropriate text representation for each action you need. This remove the hassle of reading the specifications and handling all the required escaping for reserved chars.
Please note that some commands are common patterns, rather than formal specifications. Therefore, there is no guarantee that all QR code readers will handle them properly.
| Template code: | |
{% templatetag openblock %} qr_for_email "john.doe@domain.com" {% templatetag closeblock %}
|
<img src="{% templatetag openblock %} qr_url_for_email "john.doe@domain.com" {% templatetag closeblock %}">
|
|
{% qr_for_email 'john.doe@domain.com' %}
|
|
| Template code: | |
{% templatetag openblock %} qr_for_tel "+41769998877" {% templatetag closeblock %}
|
<img src="{% templatetag openblock %} qr_url_for_tel "+41769998877" {% templatetag closeblock %}">
|
|
{% qr_for_tel '+41769998877' %}
|
|
| Template code: | |
{% templatetag openblock %} qr_for_sms "+41769998877" {% templatetag closeblock %}
|
<img src="{% templatetag openblock %} qr_url_for_sms "+41769998877" {% templatetag closeblock %}">
|
|
{% qr_for_sms '+41769998877' %}
|
|
| Template code: | |
{% templatetag openblock %} qr_for_geolocation latitude=586000.32 longitude=250954.19 altitude=500{% templatetag closeblock %}
|
<img src="{% templatetag openblock %} qr_url_for_geolocation latitude=586000.32 longitude=250954.19 altitude=500 {% templatetag closeblock %}">
|
|
{% qr_for_geolocation latitude=586000.32 longitude=250954.19 altitude=500 %}
|
|
| Template code: | |
{% templatetag openblock %} qr_for_geolocation coordinates=geolocation_coordinates {% templatetag closeblock %}
|
<img src="{% templatetag openblock %} qr_url_for_geolocation coordinates=geolocation_coordinates {% templatetag closeblock %}">
|
|
{% qr_for_geolocation coordinates=geolocation_coordinates %}
|
|
| Template code: | |
{% templatetag openblock %} qr_for_google_maps latitude=586000.32 longitude=250954.19 {% templatetag closeblock %}
|
<img src="{% templatetag openblock %} qr_url_for_google_maps latitude=586000.32 longitude=250954.19 {% templatetag closeblock %}">
|
|
{% qr_for_google_maps latitude=586000.32 longitude=250954.19 %}
|
|
| Template code: | |
{% templatetag openblock %} qr_for_google_maps coordinates=google_maps_coordinates {% templatetag closeblock %}
|
<img src="{% templatetag openblock %} qr_url_for_google_maps coordinates=google_maps_coordinates{% templatetag closeblock %}">
|
|
{% qr_for_google_maps coordinates=google_maps_coordinates %}
|
|
| Template code: | |
{% templatetag openblock %} qr_for_wifi wifi_config {% templatetag closeblock %}
|
<img src="{% templatetag openblock %} qr_url_for_wifi wifi_config {% templatetag closeblock %}">
|
|
{% qr_for_wifi wifi_config %}
|
|
| Template code: | |
{% templatetag openblock %} qr_for_wifi wifi_config=wifi_config {% templatetag closeblock %}
|
<img src="{% templatetag openblock %} qr_url_for_wifi wifi_config=wifi_config {% templatetag closeblock %}">
|
|
{% qr_for_wifi wifi_config=wifi_config %}
|
|
| Template code: | |
{% templatetag openblock %} qr_for_wifi wifi_config options=options_example {% templatetag closeblock %}
|
<img src="{% templatetag openblock %} qr_url_for_wifi wifi_config options=options_example {% templatetag closeblock %}">
|
|
{% qr_for_wifi wifi_config options=options_example %}
|
|
| Template code: | |
{% templatetag openblock %} qr_for_contact contact_detail {% templatetag closeblock %}
|
<img src="{% templatetag openblock %} qr_url_for_contact contact_detail {% templatetag closeblock %}">
|
|
{% qr_for_contact contact_detail %}
|
|
| Template code: | |
{% templatetag openblock %} qr_for_contact contact_detail=contact_detail {% templatetag closeblock %}
|
<img src="{% templatetag openblock %} qr_url_for_contact contact_detail=contact_detail {% templatetag closeblock %}">
|
|
{% qr_for_contact contact_detail=contact_detail %}
|
|
| Template code: | |
{% templatetag openblock %} qr_for_youtube 'J9go2nj6b3M' {% templatetag closeblock %}
|
<img src="{% templatetag openblock %} qr_url_for_youtube 'J9go2nj6b3M' {% templatetag closeblock %}">
|
|
{% qr_for_youtube 'J9go2nj6b3M' %}
|
|
| Template code: | |
{% templatetag openblock %} qr_for_youtube video_id {% templatetag closeblock %}
|
<img src="{% templatetag openblock %} qr_url_for_youtube video_id {% templatetag closeblock %}">
|
|
{% qr_for_youtube video_id %}
|
|
| Template code: | |
{% templatetag openblock %} qr_for_google_play 'ch.admin.meteoswiss' {% templatetag closeblock %}
|
<img src="{% templatetag openblock %} qr_url_for_google_play 'ch.admin.meteoswiss' {% templatetag closeblock %}">
|
|
{% qr_for_google_play 'ch.admin.meteoswiss' %}
|
|
| Template code: | |
{% templatetag openblock %} qr_for_google_play 'ch.admin.meteoswiss' options=options_example {% templatetag closeblock %}
|
<img src="{% templatetag openblock %} qr_url_for_google_play 'ch.admin.meteoswiss' options=options_example {% templatetag closeblock %}">
|
|
{% qr_for_google_play 'ch.admin.meteoswiss' options=options_example %}
|
|