Custom SVG to PNG

[nidhintrell]

Hi, thanks for this library.
I am trying to achieve custom QR Code using this library which includes patterns, centre logo and colours. All this is good and i am able to achieve it. Now i need a way to save it as PNG in my system. Not sure how to achieve that. Tried few stuffs but path conversion is not happening as it was supposed too. How can i convert the SVG to PNG or is there a way that i can direclty save the QR as png.

[codemasher]

Hi! There's actually 2 ways, the first would be using ImageMagick, however this may not necessarily produce the desired results, especially when using external styling via <defs> or CSS attributes. The other way would be to use the command line interface of Inkscape, which you can call from inside PHP via exec(). The example images from the readme were rendered with Inkscape:

[codemasher]

In that case you will have to stick with ImageMagick and its quirks then.

[nidhintrell]

@codemasher ya saw the imge gets ruined with that .. no issues will go with exec()

[codemasher]

May i ask what your use case is? You say "web interface" but want it as PNG anyway?

[codemasher]

Update: i tried a render through ImageMagick of the SVG example and it looks surprisingly good, however, you might need to specify the width and height attributes in the SVG header over here.

$im = new Imagick;
$im->readImageBlob($svg);
$im->setImageFormat('png32');

header('Content-type: image/png');

echo $im->getImageBlob();

This is the result directly from ImageMagick:

[nidhintrell]

Yes i can use the SVG for web and App but i'm giving an option to export as an image

[codemasher]

There, i made a quick example: 132520b

[nidhintrell]

Let me try this, thanks

[nidhintrell]

@codemasher i have an image at the centre of the qr. im using svg fr center image.. when using that the conversion fails in your example. example svg used

[codemasher]

Yea, this is why i said ImageMagick is unreliable to just convert SVG.
But then again since you're in a web app, you can just export the SVG via javascript. (see also https://github.com/chillerlan/js-qrcode)

[nidhintrell]

@codemasher Most of it is in App. Looks like will use exec method

[nidhintrell]

@codemasher wanted to know how can i give color to the 3 corners?

[codemasher]

In your custom created SVG? Via CSS in the <defs> in the same way i added the gradient in the example.

[codemasher]

Here's a more complex example that shows how to color different layers, which is what you want.

[nidhintrell]

yes

[semaf]

What about at GD or Imagick? Didnt find anything in the examples.

[codemasher]

The collectModules() method for the markup based output classes is just a more elaborate version of the drawImage() method in both, GD and Imagick. You can use it as a basis for your own implementations.

[nidhintrell]

@codemasher been referring this one #150. but here i dont see the create circle method so using id circle with css doesnt work out. additionally how to make it transaprent background in the same?

[codemasher]

The example in #150 just adds the path for the finder patterns to the path element of the qr code data - you would need to put it in a separate path instead.