Remove overlaps with logo for better look

[bilogic]

Possible to remove overlapping parts of the qrcode?

[SimplyCorey]

Was a white boarder added to the second image? I agree it looks better and wouldn't be difficult to add.

[bilogic]

No, I fired up photoshop to show what I wanted :)

[bilogic]

So all I'm trying to say is, can we add the logic to white out parts of the QR code where the logo will overlap? Of course at the same time, also center the logo so that the white border is symmetrical on all sides.

[SimplyCorey]

I really like it 😄. I should have some extra time this week to add this but if you beat me to a PR I'll accept it as well.

[bilogic]

Haha ok, hmm I don't mind, but I'm not familiar with your codebase. Can give me a few pointers on where to look?

[SimplyCorey]

The qrcode merging happens in the ImageMerge file (https://github.com/SimpleSoftwareIO/simple-qrcode/blob/develop/src/ImageMerge.php). It's pretty simple overall as it takes the qrcode and just overlays the image.

I think this feature would be as easy as adding a boarder around the merging image. The boarder color should likely match the background color.

As far as the merge property (done in the Generator class), maybe something like this would be best to allow for the old and new methods:

merge(string $filepath, float $percentage = .2, bool $absolute = false, int $borderSize = 0, int $boarderRoundness = 0): self. Where boarderRoundness is how round the corners of the image should be.

I'm open to ideas though!

[bilogic]

Ok, let me take a look shortly. Thank you.

[bilogic]

Just to clarify, my "algo" was to zero out the qrcode matrix to get enough space in the center before inserting the logo into it. Is https://github.com/SimpleSoftwareIO/simple-qrcode/blob/develop/src/ImageMerge.php still the place to look?

Adding a border won't achieve the same look, in fact, we can now add a border to the logo and get the same effect.

TBH, I'm currently using Endroid/qr-code, but they are not fluent, and then I found yours. I saw a matrix somewhere ($baconQrCode->getMatrix();) but stopped because I'm about to switch over to yours.

So my question would be, where is a suitable place to be aware of the logo aspect ratio, the qrcode matrix and the required output dimensions? Thank you.

[bilogic]

@SimplyCorey

1. I started with the fluent, so it should be QrCode::erase(...)
2. Then took a quick dive into the code of https://github.com/SimpleSoftwareIO/simple-qrcode/blob/1c8484314ce02f8c6b7a3c810d132d1cf5db7464/src/Generator.php#L169
3. Short of editing alot of code, I can't seem to extract the Encoder::encode
4. Basically, I would like to extract and manipulate the matrix prior to merge (that's what erase() is for)
5. Above is a proof of concept of an erased 11x11 part of the matrix using Endroid (matrix was quite accessible there)

From what I can tell, it is quite a bit of change for simple-qrcode, I thought it is better to get your inputs before I proceed. Thank you.

[SimplyCorey]

@bilogic Thanks for the details. I see how you want to approach this and that makes sense as a simple border laid over top will cause the same issue. I'll have to think about this some as this will likely require dropping down into bacon to clear the matrix.

[SimplyCorey]

I was able to throw together a quick proof of concept.

I don't have any more time today to work on it but I think this will be pretty easy to get done.

I'm able to get the module size from the Renderer which is used to delete the erase the matrix in the areas I need to.

[bilogic]

@SimplyCorey ok just want to share this was how I calculated inside endroid

// $rowCount = xxx; // total rows of matrix
// $colCount = xxx; // total columns of matrix

$erase_row = (($columnCount * 0.25 / 2) * 2) + 1;   // erase 25% height and get a odd number
$erase_col = (($columnCount * 0.25 / 2) * 2) + 1;   // erase 25% width and get a odd number

$rowCount = ($rowCount - $erase_row)/2;
$columnCount = ($columnCount - $erase_col)/2;

for ($rowIndex = $rowCount; $rowIndex < $rowCount + $erase_row; ++$rowIndex) {
    for ($columnIndex = $columnCount; $columnIndex < $columnCount + $erase_col; ++$columnIndex) {
        $matrix[$rowIndex][$columnIndex] = 0;
    }
}

[bilogic]

@SimplyCorey a few more related matters

1. We need the erased pixel width and height to scale the logo accordingly
2. I also found this rendering quirk in endroid where the corners overlap. Not sure if it exists in your renderer as I did not track down its source, but my point here is, it makes it much harder to do a clean erase after rendering.

[derciesto]

any update on this I need to archive the same result.. thanks

[jandominikair]

Hi, any update on this please? Thank you.