svgConvertViaCanvas.php 2.4 KB

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