I am using pyqrcode module in python and generating QR code with it. How to put the logo in the center of that QR code.
The code looks like this
import pyqrcode
data = "Hello World!!"
number = pyqrcode.create(data)
number.png('xyz.png', scale=int(scale))
with open('xyz.png', "rb") as f:
return HttpResponse(f.read(), content_type="image/png")
Or is there any another way of doing this instead of pyqrcode?
Though this question is more than 1 year old now, but still I am posting my solution as I got it working hoping that it might help someone else.
CAUTION I generated the qr code image in png format. To get it working, pypng module must be installed.
import pyqrcode
from PIL import Image
# Generate the qr code and save as png
qrobj = pyqrcode.create('https://stackoverflow.com')
with open('test.png', 'wb') as f:
qrobj.png(f, scale=10)
# Now open that png image to put the logo
img = Image.open('test.png')
width, height = img.size
# How big the logo we want to put in the qr code png
logo_size = 50
# Open the logo image
logo = Image.open('stackoverflow-logo.jpg')
# Calculate xmin, ymin, xmax, ymax to put the logo
xmin = ymin = int((width / 2) - (logo_size / 2))
xmax = ymax = int((width / 2) + (logo_size / 2))
# resize the logo as calculated
logo = logo.resize((xmax - xmin, ymax - ymin))
# put the logo in the qr code
img.paste(logo, (xmin, ymin, xmax, ymax))
img.show()
This can be done quite easily with css. Set the qr code container class to position: relative; and include an img / svg within that container with position: absolute; and transform it to the center. Restrict the size of the overlay to prevent the QR code from being unreadable.
https://jsfiddle.net/xf7d058c/
<!-- CSS -->
.container { width: 400px; height: 400px; border: 1px solid green; position: relative; }
.transform { position: absolute; left: 50%; top: 50%; transform:translate(-50%, -50%); }
<!-- HTML -->
<div class="container">
<svg height="20" width="20" class="transform"><circle cx="5" cy="5" r="5" fill="#802929" /></svg>
</div>