Image branding

[sergiomeneses]

Hey, just wanna know if there is wayt to brand the QR code generated, like colors and logo.

[erwanvivien]

Hello, available examples showing how to brand QRCode using colors is availables in example folder

There are two ways to add an image to the QRCode:

• One would be to modify the svg string, add and . Then do render
• The other one would be to use to_pixmap and edit the image afterward.

I agree this is cumbersome and will be doing an update to add those features.

[AntoniosBarotsis]

I manually added a logo on top here using the image crate in case that's useful! @sergiomeneses

[erwanvivien]

It is non-trivial to solve as from an SVG perspective an image is only a path, an URL (not handled) or a base64 image. It has no information on width, or height. The simplest API I'm thinking of right now requires you to pass the image width and height. Not convenient, but OK

Would that work for now ?

[erwanvivien]

I managed to get those results, without need to specify width and height for now.

[erwanvivien]

Playground code can be found here: https://github.com/erwanvivien/fast_qr/tree/embed-image

Square:

RoundedSquare:

CIRCLE:

This is kinda bad, as we lose lots of modules in the second one

[erwanvivien]

Please tell me which one you prefer between 2/3 and 4/5

[erwanvivien]

You can play around with the version at fast_qr/embed-image with the example as baseline

[sergiomeneses]

Hey, i just try the new api, it works nice, i think is better if the user set the percentage of the qr to display image (even ifthe qr it turns to unreadless). Also, i would like to know if there is a way to customize the shapes (both image and modules), i saw these are just svg definitions, this may allow us to make things like this:

.

[erwanvivien]

I've added in 3c35904a5 the ability to customize the size of the embedded image

[erwanvivien]

On the example you provided I see an API where one would provide an Shape::Custom(_) and would be able to provide:

Shape::Square => format!("M{},{}h1v1h-1", j + self.margin, i + self.margin),
Shape::Circle => format!(
    "M{},{}a.5,.5 0 1,1 0,-.1",
    j + self.margin + 1,
    (i + self.margin) as f64 + 0.5f64
),
Shape::RoundedSquare => format!(
    "M{0}.2,{1}.2 {0}.8,{1}.2 {0}.8,{1}.8 {0}.2,{1}.8z",
    j + self.margin,
    i + self.margin,
),
Shape::Horizontal => {
    format!("M{}.1,{}h1v.8h-1", j + self.margin, i + self.margin)
}
Shape::Vertical => {
    format!("M{},{}.1h.8v1h-.8", j + self.margin, i + self.margin)
}
Shape::Diamond => {
    format!(
        "M{}.5,{}l.5,.5l-.5,.5l-.5,-.5z",
        j + self.margin,
        i + self.margin
    )
}

Here can be found the existing shapes, but what would be fed ? j + margin could do it, but some (Circle) needs more different, maybe a closure should be passed?

[erwanvivien]

Using a closure / function would allow previous snippet to be refactored too

[erwanvivien]

c8196e4 added possibility to move image

[erwanvivien]

On the fast_qr/embed-image branch, there is now an example showing how to combine & use custom shape. For now there still only have the same colors tho

here you see a circle and a rectangle.

[AntoniosBarotsis]

Oh so this also works for pngs? Nice!

[erwanvivien]

Oh so this also works for pngs? Nice!

Indeed! I also found a bug? in resvg where if the provided image is an svg it's not sized / rendered as it should (expected being Firefox's renderer)

Edit:

Firefox:

ReSVG:

[erwanvivien]

I've upgraded the API allowing user to provide different colors for each "layer" and check the type of the module, thus we are now able to have those outputs:

[AntoniosBarotsis]

Make sure to open an issue in the SVG crate! @erwanvivien

[erwanvivien]

I will do!

[erwanvivien]

After some digging, the inner svg (the one I'm using above) contains a width attribute, which makes it scale down.

To be honest, I don't know which one is right on this, Firefox is clearly ignoring the width attribute and resvg is having a weird behavior(?)

[sergiomeneses]

hey @erwanvivien, i will try it this week, thanks.

[erwanvivien]

Please do tell me if you need more! Thanks

[erwanvivien]

@sergiomeneses Did you manage to try the new API ? :)

[erwanvivien]

I will mark the issue as resolved, if you need something more, please file a new issue :)