Image excavate with wrong orientation

[iquirino]

Hey, I'm having an issue:

import { QRCodeCanvas } from "@loskir/styled-qr-code-node";
import fs from "fs";

const qrCode = new QRCodeCanvas({
  width: 300,
  height: 300,
  data: "https://www.facebook.com/",
  image: "https://qr-code-styling.com/0b3922d9d1e466270a79706c08c4a57c.png",
  dotsOptions: {
    color: "#4267b2",
    type: "rounded",
  },
  backgroundOptions: {
    color: "#e9ebee",
  },
  imageOptions: {
    hideBackgroundDots: true,
    imageSize: 0.4,
    crossOrigin: "anonymous",
    margin: 0,
  },
});

(async () => {
  await qrCode.toFile("qr-code.png", "png");
})();

[iquirino]

https://github.com/Loskir/styled-qr-code/blob/e09acc6bcbedbc66a72deb0ed0874d2cc7702540/src/core/QRCanvas.ts#L123

You inverted the algorithm. It must be:

      if (this._options.imageOptions.hideBackgroundDots) {
        if (
          j >= (count - drawImageSize.hideXDots) / 2 &&
          j < (count + drawImageSize.hideXDots) / 2 &&
          i >= (count - drawImageSize.hideYDots) / 2 &&
          i < (count + drawImageSize.hideYDots) / 2
        ) {
          return false;
        }
      }

[iquirino]

https://github.com/Loskir/styled-qr-code/pull/3

[iquirino]

It is working now:

;)

I'm glad to contribute with your project

[Loskir]

Hello!

Yes indeed it seems that i here corresponds to y axis and j corresponds to x (albeit usually it is the opposite way) https://github.com/Loskir/styled-qr-code/blob/e09acc6bcbedbc66a72deb0ed0874d2cc7702540/src/core/QRCanvas.ts#L212-L213

I don't have a deep understanding of this code so I'm not entirely sure what is the best way to fix it. Could you please open an issue or a PR in the upstream repo?

I'd be happy to merge the fix after that and release a new version. Thank you for your contribution!

[iquirino]

The issue is on the filter itself, that skips dots to be printed on the QRCode.

if (filter && !filter(i, j)) {
  continue;
}

Here's my PR: https://github.com/Loskir/styled-qr-code/pull/3/files

[Loskir]

Well I'm not sure it is the right change to do either as it creates a discrepancy between filter(i, j) and (j: number, i: number): boolean

[AleAmla987]

@Loskir Hello! Were you able to fix that problem with the QR turning over?

[iquirino]

I am running my fork in production and everything is working well

[AleAmla987]

I am running my fork in production and everything is working well

You know that I have that problem in production, that the QR is turned around and does not center the logo space properly. How did you solve that in production? Locally I tried the change you recommend but in production that change is lost.

[AleAmla987]

Estoy ejecutando mi bifurcación en producción y todo funciona bien.

How can I install your modifications?

[iquirino]

I'm sorry, it worked well, but I am running the Loskir version, because I am using square images at this time.

[AleAmla987]

I'm sorry, it worked well, but I am running the Loskir version, because I am using square images at this time.

I don't understand, it still appears vertical to me when I use a horizontal logo. Would you be kind to tell me what I should do to make it look good? In the local version, modify the code as you had indicated and it worked, but the production version did not.

[CmCarti]

Just came across this issue myself, the patch @iquirino created does seem to fix the issue. Any chance this will be published in the production package sometime soon?

[Loskir]

Thank you and sorry it took so long. Fixed in 1.5.2