新增svgEditor

xyc

2024-05-17 6b24f642b01cf3cd1be0d5833273fa2867d389e1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
/* globals jQuery */
/**
* Attaches items to DOM for Embedded SVG support.
* @module EmbeddedSVGEditDOM
*/
import EmbeddedSVGEdit from './embedapi.js';
import {isChrome} from './browser.js';
 
const $ = jQuery;
 
let svgCanvas = null;
 
function handleSvgData (data, error) {
  if (error) {
    alert('error ' + error);
  } else {
    alert('Congratulations. Your SVG string is back in the host page, do with it what you will\n\n' + data);
  }
}
 
function loadSvg () {
  const svgexample = '<svg width="640" height="480" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><g><title>Layer 1</title><rect stroke-width="5" stroke="#000000" fill="#FF0000" id="svg_1" height="35" width="51" y="35" x="32"/><ellipse ry="15" rx="24" stroke-width="5" stroke="#000000" fill="#0000ff" id="svg_2" cy="60" cx="66"/></g></svg>';
  svgCanvas.setSvgString(svgexample);
}
 
function saveSvg () {
  svgCanvas.getSvgString()(handleSvgData);
}
 
function exportPNG () {
  svgCanvas.getUIStrings()(function (uiStrings) {
    const str = uiStrings.notification.loadingImage;
    let exportWindow;
    if (!isChrome()) {
      exportWindow = window.open(
        'data:text/html;charset=utf-8,' + encodeURIComponent('<title>' + str + '</title><h1>' + str + '</h1>'),
        'svg-edit-exportWindow'
      );
    }
    svgCanvas.rasterExport('PNG', null, exportWindow && exportWindow.name)();
  });
}
 
function exportPDF () {
  svgCanvas.getUIStrings()(function (uiStrings) {
    const str = uiStrings.notification.loadingImage;
 
    /**
    // If you want to handle the PDF blob yourself, do as follows
    svgCanvas.bind('exportedPDF', function (win, data) {
      alert(data.output);
    });
    svgCanvas.exportPDF(); // Accepts two args: optionalWindowName supplied back to bound exportPDF handler and optional outputType (defaults to dataurlstring)
    return;
    */
 
    if (isChrome()) {
      // Chrome will open an extra window if we follow the approach below
      svgCanvas.exportPDF();
    } else {
      const exportWindow = window.open(
        'data:text/html;charset=utf-8,' + encodeURIComponent('<title>' + str + '</title><h1>' + str + '</h1>'),
        'svg-edit-exportWindow'
      );
      svgCanvas.exportPDF(exportWindow && exportWindow.name);
    }
  });
}
 
const frameBase = 'https://raw.githack.com/SVG-Edit/svgedit/master';
// const frameBase = 'http://localhost:8001';
const framePath = '/editor/xdomain-svg-editor-es.html?extensions=ext-xdomain-messaging.js';
const iframe = $('<iframe width="900px" height="600px" id="svgedit"></iframe>');
iframe[0].src = frameBase + framePath +
  (location.href.includes('?')
    ? location.href.replace(/\?(.*)$/, '&$1')
    : ''); // Append arguments to this file onto the iframe
 
iframe[0].addEventListener('load', function () {
  svgCanvas = new EmbeddedSVGEdit(frame, [new URL(frameBase).origin]);
  // Hide main button, as we will be controlling new, load, save, etc. from the host document
  let doc;
  try {
    doc = frame.contentDocument || frame.contentWindow.document;
  } catch (err) {
    console.log('Blocked from accessing document', err);
  }
  if (doc) {
    // Todo: Provide a way to get this to occur by `postMessage`
    const mainButton = doc.getElementById('main_button');
    mainButton.style.display = 'none';
  }
 
  // Add event handlers now that `svgCanvas` is ready
  $('#load').click(loadSvg);
  $('#save').click(saveSvg);
  $('#exportPNG').click(exportPNG);
  $('#exportPDF').click(exportPDF);
});
$('body').append(iframe);
const frame = document.getElementById('svgedit');