Support for image in the center of QR Code

[collegeimprovements]

Would be great if we can embed company logo in the middle of the QR Code.
It's just a feature request.

[nthock]

Hello @collegeimprovements I am open for such feature to be supported in this package, though I must admit that it is not something that I will spend my time on, at least not the immediate priority. That's being said, I welcome any PR or any contributions that can make this a reality.

Thanks for the suggestion!

[collegeimprovements]

Thanks a lot for your reply @nthock

[kuon]

I looked into this issue, and what I ended up doing is to use H error correction level (30%) and the just draw the image above the gereated code. Just ensure that the image is not too large, about 15% of the area is good.

For example, if you encode the following string:

    matrix = EQRCode.encode("Hello! I am a QR code encoded with an image at the middle. It works well!", :h)
    
    matrix_size = Matrix.size(matrix)

    svg_data = EQRCode.svg(matrix)

and then modify the SVG by adding a rect:

    isize = (matrix_size * matrix_size * 0.15) |> :math.sqrt() # 15% here
    img = ~s(<rect x="#{(matrix_size - isize)/2}" y="#{(matrix_size - isize)/2}"
      fill="red"
      height="#{isize}" width="#{isize}" />)

You will end up with this:

Note that I used SVG in this example to illustrate the process. But we use PNG because QRCode are MUCH smaller as PNG. And we annotate them in a separate process that is not elixir, but I am sure it wouldn't be hard to use a PNG library in elixir to write on it.

I don't know if modifying this library would provide a better solution. I am not familiar enough with exactly how QR code are encoded.

[coladarci]

Just discovered this thread; incredible library this is! How did you modify the SVG to add the image data, out of curiosity?