60c8462da9dc3e73f914d2719c99f40ee7d41beec6dc60a0df53386a0655e01056766db96340f7ddf0928cf09389cd92853dfe7a1dc697357f10694682bc0a 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. function handleFileSelect(evt) {
  2. const $el = $('#filereader');
  3. const files = evt.target.files;
  4. const file = files.length > 0 ? files[0] : null;
  5. if (file) {
  6. const reader = new FileReader();
  7. reader.onload = e => {
  8. $el.find('.load-target').html(e.target.result);
  9. svgAsPngUri($el.find('.load-target svg')[0], null, (uri, width, height) => {
  10. $el.find('input').hide();
  11. $el.find('.preview').html(
  12. '<div>' +
  13. '<img src="' + uri + '" />' +
  14. '<div>width=' + width + ', height=' + height + '</div>' +
  15. '</div>'
  16. );
  17. });
  18. $el.find('.save').click(() => saveSvgAsPng($el.find('.load-target svg')[0], 'test.png'));
  19. };
  20. reader.readAsText(file);
  21. }
  22. }
  23. if (window.File && window.FileReader && window.FileList && window.Blob) {
  24. document.getElementById('file').addEventListener('change', handleFileSelect, false);
  25. }
  26. function inlineTest(title, $el, saveOptions, testOptions) {
  27. const svg = $el.html();
  28. const template = $('#inline-template').html();
  29. const row = $el.html(template);
  30. row.find('h2').text(title);
  31. row.find('.canvas').html(svg);
  32. const canvas = row.find(testOptions && testOptions.selector || 'svg')[0];
  33. svgAsPngUri(canvas, saveOptions, (uri, width, height) => row.find('.preview').html(
  34. '<div>' +
  35. '<img src="' + uri + '" />' +
  36. '<div>width=' + width + ', height=' + height + '</div>' +
  37. '</div>'
  38. ));
  39. row.find('.save').click(() => saveSvgAsPng(canvas, 'test.png', saveOptions));
  40. }
  41. inlineTest('Directly in the HTML', $('#inline'));
  42. inlineTest('With linked PNG image', $('#embedded-png'));
  43. inlineTest('With linked SVG image', $('#embedded-svg'));
  44. inlineTest('Sized with pixels', $('#sized-with-pixels'));
  45. inlineTest('Sized with style', $('#sized-with-style'));
  46. inlineTest('Sized with CSS', $('#sized-with-css'));
  47. inlineTest('At a higher resolution', $('#scaling'), {scale: 2});
  48. inlineTest('When CSS styling selectors are prefixed', $('#selectors-prefixed'), {
  49. selectorRemap: s => s.replace('#selectors-prefixed ', '')
  50. });
  51. inlineTest('Modifying the style', $('#modified-style'), {
  52. modifyStyle: s => s.replace('green', 'red')
  53. });
  54. inlineTest('Modifying the whole CSS rule', $('#modified-css'), {
  55. modifyCss: (selector, properties) => {
  56. selector = selector.replace('#selectors-prefixed ', '');
  57. properties = properties.replace('green', 'blue');
  58. return selector + '{' + properties + '}';
  59. }
  60. });
  61. inlineTest('Exporting a group within an SVG', $('#group'), null, {
  62. selector: '#sub-group'
  63. });
  64. inlineTest('Percentage Height and Width', $('#percentage-size'));
  65. inlineTest('Background color', $('#background-color'), {backgroundColor: 'lightblue'});
  66. inlineTest('Pan and Zoom', $('#pan-and-zoom'), {
  67. left: -50,
  68. top: -50,
  69. width: 300,
  70. height: 300
  71. });
  72. inlineTest('With Unicode characters', $('#unicode'));
  73. inlineTest('With gradients', $('#gradient'));
  74. inlineTest('With foreign objects', $('#foreign-object'));
  75. inlineTest('With opacity', $('#opacity'));
  76. inlineTest('When setting xmlns on foreign object children', $('#xmlns-override'));
  77. inlineTest('When using HTML entites', $('#entities'));
  78. inlineTest('Transformed text', $('#transformed-text'));
  79. inlineTest('With marker-end', $('#marker-end'));
  80. inlineTest('SVG style attribute', $('#style-background'));
  81. inlineTest('SVG within SVG', $('#svg-in-svg'));
  82. inlineTest('excluding unused CSS', $('#exclude-unused-css'), {excludeUnusedCss: true});
  83. inlineTest('With custom fonts', $('#custom-font'));
  84. const $sandbox = $('#sandbox');
  85. $sandbox.find('.render').click(() => {
  86. $sandbox.find('.error').hide().text('');
  87. $sandbox.find('.load-target').html($('#sandbox textarea').val());
  88. const canvas = $sandbox.find('.load-target svg')[0];
  89. try {
  90. svgAsPngUri(canvas, null, (uri, width, height) => $sandbox.find('.preview').html(
  91. '<div>' +
  92. '<img src="' + uri + '" />' +
  93. '<div>width=' + width + ', height=' + height + '</div>' +
  94. '</div>'
  95. ));
  96. $sandbox.find('.save').unbind('click').click(() => saveSvgAsPng(canvas, 'test.png'));
  97. } catch(err) {
  98. $sandbox.find('.error').show().text(err.message);
  99. $sandbox.find('.preview').html('');
  100. }
  101. });