125 lines
4.6 KiB
HTML
125 lines
4.6 KiB
HTML
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Embedded images</title>
|
||
|
|
<!--%mhtml%-->
|
||
|
|
<!-- Sets the basepath for the library if not in same directory -->
|
||
|
|
<script type="text/javascript">
|
||
|
|
mxBasePath = '../../javascript/src';
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<!-- Loads and initializes the library -->
|
||
|
|
<script type="text/javascript" src="../../javascript/src/js/mxClient.js"></script>
|
||
|
|
|
||
|
|
<!-- Example code -->
|
||
|
|
<script type="text/javascript">
|
||
|
|
// True if data URIs are supported. IE8 has a size limit of 32KB for
|
||
|
|
// data URIs, so this must be used as a global size limit. It's not
|
||
|
|
// possible to work around this limitation by using MHTML because that
|
||
|
|
// is not supported in IE8.
|
||
|
|
var DATA_URL = %dataUrl%;
|
||
|
|
var graph = new mxGraph();
|
||
|
|
var bundle = new mxImageBundle(!DATA_URL);
|
||
|
|
|
||
|
|
function insert(name, data, fallback)
|
||
|
|
{
|
||
|
|
bundle.putImage(name, data, fallback);
|
||
|
|
var parent = graph.getDefaultParent();
|
||
|
|
graph.insertVertex(parent, null, '', 100, 20, 130, 80, 'shape=image;image=' + name);
|
||
|
|
};
|
||
|
|
|
||
|
|
// Program starts here. Creates a sample graph in the
|
||
|
|
// DOM node with the specified ID. This function is invoked
|
||
|
|
// from the onLoad event handler of the document (see below).
|
||
|
|
function main()
|
||
|
|
{
|
||
|
|
%bundle%
|
||
|
|
graph.addImageBundle(bundle);
|
||
|
|
graph.init(document.getElementById('graphContainer'));
|
||
|
|
graph.setConnectable(true);
|
||
|
|
|
||
|
|
// Enables rubberband selection
|
||
|
|
new mxRubberband(graph);
|
||
|
|
|
||
|
|
// Gets the default parent for inserting new cells. This
|
||
|
|
// is normally the first child of the root (ie. layer 0).
|
||
|
|
var parent = graph.getDefaultParent();
|
||
|
|
|
||
|
|
// Adds cells to the model in a single step
|
||
|
|
graph.getModel().beginUpdate();
|
||
|
|
try
|
||
|
|
{
|
||
|
|
graph.insertVertex(parent, null, '', 20, 20, 30, 30, 'shape=image;image=myImage');
|
||
|
|
}
|
||
|
|
finally
|
||
|
|
{
|
||
|
|
// Updates the display
|
||
|
|
graph.getModel().endUpdate();
|
||
|
|
}
|
||
|
|
|
||
|
|
// Three scenarios for loading embedded images in IE6/7:
|
||
|
|
// 1. At load-time: Embed in HTML page (see above and server-side)
|
||
|
|
// 2. From URL at runtime: Use script to encode and cache response. This is also needed for
|
||
|
|
// browsers that support HTML5 canvas because it's not possible to base64 encode an image
|
||
|
|
// from another domain due to security restrictions.
|
||
|
|
var url = 'http://www.jgraph.com/images/mxgraph.gif';
|
||
|
|
mxUtils.get(window.location.href + '?url=' + encodeURIComponent(url), function(req)
|
||
|
|
{
|
||
|
|
var lines = req.getText().split('\n');
|
||
|
|
var data = '';
|
||
|
|
|
||
|
|
// Scans the response for base64 encoded image data
|
||
|
|
for (var i = 6; i < lines.length; i++)
|
||
|
|
{
|
||
|
|
if (lines[i].length == 0)
|
||
|
|
{
|
||
|
|
data = lines[i + 1];
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
data = data.substring(0, data.length - 1);
|
||
|
|
|
||
|
|
// The fallback can either be the URL or the MHTML URL which turns the image
|
||
|
|
// into MHTML on the server-side. Both are cached so even if the image changes
|
||
|
|
// while the diagram is open the image will remain visible. Note that the image
|
||
|
|
// will be replaced with an embedded image the next time the diagram is opened.
|
||
|
|
//url = 'mhtml:' + window.location.href + '?url=' + encodeURIComponent(url) + '!image';
|
||
|
|
insert(url, 'data:image/gif,' + data, url);
|
||
|
|
});
|
||
|
|
|
||
|
|
// 3. From local at runtime: Requires two roundtrips, one to get the base64 encoded
|
||
|
|
// string to put it into the bundle and another (in IE6/7) for the mhtml href.
|
||
|
|
// The response of the POST request contains JavaScript which calls the insert
|
||
|
|
// method above and removes the dynamically generated iframe with the form (below).
|
||
|
|
var clickHandler = function()
|
||
|
|
{
|
||
|
|
if (document.getElementById('embedimageframe') == null)
|
||
|
|
{
|
||
|
|
var ifrm = document.createElement('iframe');
|
||
|
|
ifrm.setAttribute('id', 'embedimageframe');
|
||
|
|
document.body.appendChild(ifrm);
|
||
|
|
ifrm = (ifrm.contentWindow) ? ifrm.contentWindow :
|
||
|
|
(ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;
|
||
|
|
ifrm.document.open();
|
||
|
|
ifrm.document.write('<form method="POST" enctype="multipart/form-data" '+
|
||
|
|
'action="' + window.location.href + '">');
|
||
|
|
ifrm.document.write('File: <input type="file" name="upfile">');
|
||
|
|
ifrm.document.write('<input type="hidden" name="dataurl" value="' + DATA_URL + '">');
|
||
|
|
ifrm.document.write('<br><input type="submit" value="Insert">');
|
||
|
|
ifrm.document.write('</form>');
|
||
|
|
ifrm.document.close();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
document.body.appendChild(mxUtils.button('Insert image', clickHandler));
|
||
|
|
mxUtils.br(document.body);
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body onload="main()">
|
||
|
|
<div id="graphContainer"
|
||
|
|
style="overflow:hidden;width:320px;height:240px;border:solid black 1px;cursor:default;">
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|