Is it possible to make QR code with logo at the center

[vinayk7]

I wanted to know is it possible to create a QR something like this?

Note the center padding so it avoids the logo touching the nearby QR pixels

[endroid]

Hi @vinayk7 one way would be to add the padding to the image you place over the QR code but then you would probably have some QR code blocks with partial overlap. If you want to avoid this partial overlap I suggest you either generate the matrix before like this.

$matrixFactory = new MatrixFactory();
$matrix = $matrixFactory->create($qrCode);

This gives you the block size etc. so you can exactly calculate the desired image width and height. Another option is to create your own writer based on the PNG writer and put the logo calculation logic there. In other words: it is possible but not out of the box. Good luck!

[mstnorris]

@endroid and @vinayk7 I am also looking to do this. @endroid please would you expand on your comment as to how it could be used with the following?

$result = Builder::create()
    ->writer(new PngWriter())
    ->writerOptions([])
    ->data($menu->getURL())
    ->encoding(new Encoding('UTF-8'))
    ->errorCorrectionLevel(new ErrorCorrectionLevelHigh())
    ->size(512)
    ->margin(16)
    ->roundBlockSizeMode(new RoundBlockSizeModeMargin())
    ->logoResizeToHeight(64)
    ->logoResizeToHeight(64)
    ->logoPath("logo.png")
    ->labelText('Label Test')
    ->labelFont(new NotoSans(24))
    ->labelAlignment(new LabelAlignmentCenter())
    ->build();

$matrixFactory = new MatrixFactory();
$matrix = $matrixFactory->create($result); // This is of course the wrong type and I've already added the logo above

[endroid]

Hi @mstnorris if you need a centered logo exactly the size of a specific number of blocks (with no overlap) like @vinayk7 you should first generate the matrix like you do in your example. As soon as you know all dimensions, margins and the block size you can use this in your own implementation / writer where you resize and place the image exactly based on the matrix dimensions and block size.

[benja2111]

@endroid I reopen this post to find out if it is now possible to have a rendering like the one above easily? If not, can you explain more precisely how to get the same result? I'm having trouble understanding the use of matrix. Thank's in advance !

[endroid]

Hi @benja2111 the matrix consists of the block size, the x,y values (0=white, 1=black) and the inner width and outer width that indicate the image width excluding and including the margin. You can use that information to make a square in the middle that exactly fits and place an image in the middle. How to do that is up to you, I have no algorithm that does that for you as mentioned above ;) If you have a working solution feel free to open a PR. Good luck!

[saruman]

I wish this explanations where a little bit easier to understand. I had to pay for a qr code to use a custom logo because I am not be able to us this project to render my qr codes with a logo.
The logo and qr shows in my result, but the image is over the code and that affects the readability.