svgConvertViaCanvas.php 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. <?php
  2. /**
  3. * SVG to PNG conversion via javascript canvas example
  4. *
  5. * @created 25.09.2023
  6. * @author smiley <smiley@chillerlan.net>
  7. * @copyright 2023 smiley
  8. * @license MIT
  9. */
  10. declare(strict_types=1);
  11. use chillerlan\QRCode\{QRCode, QROptions};
  12. use chillerlan\QRCode\Data\QRMatrix;
  13. use chillerlan\QRCode\Output\QRMarkupSVG;
  14. require_once __DIR__.'/../vendor/autoload.php';
  15. $options = new QROptions;
  16. $options->version = 7;
  17. $options->outputInterface = QRMarkupSVG::class;
  18. $options->outputBase64 = false;
  19. $options->svgAddXmlHeader = false;
  20. $options->svgUseFillAttributes = false;
  21. $options->drawLightModules = false;
  22. $options->drawCircularModules = true;
  23. $options->circleRadius = 0.4;
  24. $options->connectPaths = true;
  25. $options->keepAsSquare = [
  26. QRMatrix::M_FINDER_DARK,
  27. QRMatrix::M_FINDER_DOT,
  28. QRMatrix::M_ALIGNMENT_DARK,
  29. ];
  30. $options->svgDefs = '
  31. <linearGradient id="rainbow" x1="1" y2="1">
  32. <stop stop-color="#e2453c" offset="0"/>
  33. <stop stop-color="#e07e39" offset="0.2"/>
  34. <stop stop-color="#e5d667" offset="0.4"/>
  35. <stop stop-color="#51b95b" offset="0.6"/>
  36. <stop stop-color="#1e72b7" offset="0.8"/>
  37. <stop stop-color="#6f5ba7" offset="1"/>
  38. </linearGradient>
  39. <style><![CDATA[
  40. .dark{fill: url(#rainbow);}
  41. ]]></style>';
  42. $qrcode = (new QRCode($options))->addByteSegment('https://www.youtube.com/watch?v=dQw4w9WgXcQ');
  43. // render the SVG
  44. $svg_raw = $qrcode->render();
  45. // switch to base64 output
  46. $options->outputBase64 = true;
  47. // render base64
  48. $svg_base64 = $qrcode->render();
  49. // dump the output
  50. header('Content-type: text/html');
  51. ?>
  52. <!DOCTYPE html>
  53. <html lang="en">
  54. <head>
  55. <meta charset="UTF-8"/>
  56. <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  57. <title>QRCode javascript canvas conversion example</title>
  58. </head>
  59. <body>
  60. <!-- raw SVG input -->
  61. <div>
  62. <?php echo $svg_raw ?>
  63. <img id="qr-svg-dest" />
  64. </div>
  65. <!-- base64 encoded datd URI from img tag -->
  66. <div>
  67. <img id="qr-svg-base64" src="<?php echo $svg_base64 ?>" style="width: 300px; height: 300px;" />
  68. <img id="qr-svg-base64-dest" />
  69. </div>
  70. <script type="module">
  71. import SVGConvert from './SVGConvert.js';
  72. // SVG DOM element
  73. SVGConvert.toDataURI(document.querySelector('svg.qr-svg'), document.getElementById('qr-svg-dest'), 300, 300, 'image/jpeg');
  74. // base64 data URI in image element
  75. SVGConvert.toDataURI(document.getElementById('qr-svg-base64'), document.getElementById('qr-svg-base64-dest'), 300, 300);
  76. </script>
  77. </html>