| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889 |
- <?php
- /**
- * SVG to PNG conversion via javascript canvas example
- *
- * @created 25.09.2023
- * @author smiley <smiley@chillerlan.net>
- * @copyright 2023 smiley
- * @license MIT
- */
- declare(strict_types=1);
- use chillerlan\QRCode\{QRCode, QROptions};
- use chillerlan\QRCode\Data\QRMatrix;
- use chillerlan\QRCode\Output\QRMarkupSVG;
- require_once __DIR__.'/../vendor/autoload.php';
- $options = new QROptions;
- $options->version = 7;
- $options->outputInterface = QRMarkupSVG::class;
- $options->outputBase64 = false;
- $options->svgAddXmlHeader = false;
- $options->svgUseFillAttributes = false;
- $options->drawLightModules = false;
- $options->drawCircularModules = true;
- $options->circleRadius = 0.4;
- $options->connectPaths = true;
- $options->keepAsSquare = [
- QRMatrix::M_FINDER_DARK,
- QRMatrix::M_FINDER_DOT,
- QRMatrix::M_ALIGNMENT_DARK,
- ];
- $options->svgDefs = '
- <linearGradient id="rainbow" x1="1" y2="1">
- <stop stop-color="#e2453c" offset="0"/>
- <stop stop-color="#e07e39" offset="0.2"/>
- <stop stop-color="#e5d667" offset="0.4"/>
- <stop stop-color="#51b95b" offset="0.6"/>
- <stop stop-color="#1e72b7" offset="0.8"/>
- <stop stop-color="#6f5ba7" offset="1"/>
- </linearGradient>
- <style><![CDATA[
- .dark{fill: url(#rainbow);}
- ]]></style>';
- $qrcode = (new QRCode($options))->addByteSegment('https://www.youtube.com/watch?v=dQw4w9WgXcQ');
- // render the SVG
- $svg_raw = $qrcode->render();
- // switch to base64 output
- $options->outputBase64 = true;
- // render base64
- $svg_base64 = $qrcode->render();
- // dump the output
- header('Content-type: text/html');
- ?>
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8"/>
- <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
- <title>QRCode javascript canvas conversion example</title>
- </head>
- <body>
- <!-- raw SVG input -->
- <div>
- <?php echo $svg_raw ?>
- <img id="qr-svg-dest" />
- </div>
- <!-- base64 encoded datd URI from img tag -->
- <div>
- <img id="qr-svg-base64" src="<?php echo $svg_base64 ?>" style="width: 300px; height: 300px;" />
- <img id="qr-svg-base64-dest" />
- </div>
- <script type="module">
- import SVGConvert from './SVGConvert.js';
- // SVG DOM element
- SVGConvert.toDataURI(document.querySelector('svg.qr-svg'), document.getElementById('qr-svg-dest'), 300, 300, 'image/jpeg');
- // base64 data URI in image element
- SVGConvert.toDataURI(document.getElementById('qr-svg-base64'), document.getElementById('qr-svg-base64-dest'), 300, 300);
- </script>
- </html>
|