svgConvertViaCanvas.php 2.5 KB

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