imageWithLogo and label?

[trivers303]

Hi, i am trying to generate qrcode with logo and text label under it
i have checked the examples provided but however i haven't found an example or related documentation about what i want to do
i tried to edit both iamgeWithText and imageWithLogo examples but i encountered another problem for circular modules

<?php
/**
 * example for additional text
 * @link https://github.com/chillerlan/php-qrcode/issues/35
 *
 * @created      22.06.2019
 * @author       Smiley <smiley@chillerlan.net>
 * @copyright    2019 Smiley
 * @license      MIT
 *
 * @noinspection PhpIllegalPsrClassPathInspection, PhpComposerExtensionStubsInspection
 */

use chillerlan\QRCode\{QRCode, QROptions};
use chillerlan\QRCode\Common\EccLevel;
use chillerlan\QRCode\Data\QRMatrix;
use chillerlan\QRCode\Output\{QROutputInterface, QRGdImage};

require_once __DIR__.'/../vendor/autoload.php';

/*
 * Class definition
 */

class QRImageWithText extends QRGdImage{

	/**
	 * @inheritDoc
	 */
	public function dump(string $file = null, string $text = null, string $logo = null):string{
		// set returnResource to true to skip further processing for now
		$this->options->returnResource = true;

		// there's no need to save the result of dump() into $this->image here
		parent::dump($file);

		// render text output if a string is given
		if($text !== null){
			$this->addText($text);
		}
		
		
		$im = imagecreatefrompng($logo);

		// get logo image size
		$w = imagesx($im);
		$h = imagesy($im);

		// set new logo size, leave a border of 1 module (no proportional resize/centering)
		$lw = ($this->options->logoSpaceWidth - 2) * $this->options->scale;
		$lh = ($this->options->logoSpaceHeight - 2) * $this->options->scale;

		// get the qrcode size
		$ql = $this->matrix->size() * $this->options->scale;

		// scale the logo and copy it over. done!
		imagecopyresampled($this->image, $im, ($ql - $lw) / 2, ($ql - $lh) / 2, 0, 0, $lw, $lh, $w, $h);
		
		
		$imageData = $this->dumpImage();

		if($file !== null){
			$this->saveToFile($imageData, $file);
		}

		if($this->options->imageBase64){
			$imageData = $this->toBase64DataURI($imageData, 'image/'.$this->options->outputType);
		}

		return $imageData;
	}

	/**
	 * @inheritDoc
	 */
	protected function addText(string $text):void{
		// save the qrcode image
		$qrcode = $this->image;

		// options things
		$textSize  = 10; // see imagefontheight() and imagefontwidth()
		$textBG    = [255, 255, 255];
		$textColor = [50, 50, 50];

		$bgWidth  = $this->length;
		$bgHeight = $bgWidth + 50; // 20px extra space

		// create a new image with additional space
		$this->image = imagecreatetruecolor($bgWidth, $bgHeight);
		$background  = imagecolorallocate($this->image, ...$textBG);

		// allow transparency
		if($this->options->imageTransparent && $this->options->outputType !== QROutputInterface::GDIMAGE_JPG){
			imagecolortransparent($this->image, $background);
		}

		// fill the background
		imagefilledrectangle($this->image, 0, 0, $bgWidth, $bgHeight, $background);

		// copy over the qrcode
		imagecopymerge($this->image, $qrcode, 0, 0, 0, 0, $this->length, $this->length, 100);
		imagedestroy($qrcode);

		$fontColor = imagecolorallocate($this->image, ...$textColor);
		$w         = imagefontwidth($textSize);
		$x         = round(($bgWidth - strlen($text) * $w) / 2);

		// loop through the string and draw the letters
		foreach(str_split($text) as $i => $chr){
			imagechar($this->image, $textSize, (int)($i * $w + $x), $this->length, $chr, $fontColor);
		}
	}

}


/*
 * Runtime
 */

$options = new QROptions([
	'version'      => 6,
	'eccLevel'            => EccLevel::H,
	'outputType'   => QROutputInterface::GDIMAGE_PNG,
	'imageBase64'  => false,
	'addLogoSpace'        => true,
	'logoSpaceWidth'      => 15,
	'logoSpaceHeight'     => 15,
	'scale'        => 10,
	'imageTransparent'    => false,
	'drawCircularModules' => false,
	'circleRadius'        => 0.45,
]);

$qrcode = new QRCode($options);
$qrcode->addByteSegment('https://www.youtube.com/watch?v=dQw4w9WgXcQ');

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

$qrOutputInterface = new QRImageWithText($options, $qrcode->getMatrix());

// dump the output, with additional text
// the text could also be supplied via the options, see the svgWithLogo example
echo $qrOutputInterface->dump(null, 'LABEL HERE', __DIR__.'/octocat.png');

exit;

result:

result needed:

any suggestions or solutions regarding this issue would be great

[codemasher]

Your expected result is quite literally what i posted here. There is no example for shaped finder patterns in GD/ImageMagick because it's a mess in both compared to SVG. Also in SVG you could just add a <text> node and place it under the QR Code like you want - you just might want to adjust the viewbox then.

[trivers303]

Thank you for the quick reply but i need it to be in png/jpg format and i cant achieve that with the svg example

[codemasher]

There's always the option to convert SVG to raster formats via the Inkscape command line or svgexport (and tbh the results are better than GD/Imagick are even capable of). Otherwise, you could just combine the options of the several GD examples and implement a way to draw the rounded finder patterns on your own.

[trivers303]

thanks for the reply i guess i have to generate as svg then convert to png but one last thing is there an example for the svg text label that i can look at?

[codemasher]

I Linked this in the previous comment already: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text
You will need to change the auto generated viewBox attribute in the SVG header to make space for the text node; this can be done with a simple str_replace().