Commit e1e98563 authored by Maxime Chazalviel's avatar Maxime Chazalviel
Browse files

<export image mapping in png

parent 8c5caec6
......@@ -2622,40 +2622,46 @@ metExploreD3.GraphMapping = {
if (!node.select(".imageNode").empty()){
node.select(".imageNode").remove();
}
var img = new Image();
img.src = urlImage;
img.node = node;
img.onload = function () {
var imgWidth = this.width;
var imgHeight = this.height;
if (imgWidth > 150){
imgHeight = imgHeight * (150/imgWidth);
imgWidth = 150;
}
var offsetX = -imgWidth/2;
this.node.append("g")
.attr("class", "imageNode")
.attr("x", 0)
.attr("y", 0)
.attr("width", imgWidth)
.attr("height", imgHeight)
.attr("opacity", 1)
.attr("transform", "translate(" + offsetX + ",20)");
this.node.selectAll(".imageNode")
.append("image")
.attr("class", "mappingImage")
.attr("href", this.src)
.attr("width", imgWidth)
.attr("height", imgHeight)
.attr("opacity", 1);
metExploreD3.GraphMapping.applyEventOnImage(this.node.select(".imageNode"));
this.node.selectAll(".imageNode")
.each(function(d){
metExploreD3.GraphMapping.setStartingImageStyle(d);
this.parentNode.parentNode.appendChild(this.parentNode);
});
};
metExploreD3.GraphUtils.getDataUri(urlImage, function(dataUri) {
// Do whatever you'd like with the Data URI!
var img = new Image();
img.src = dataUri;
img.node = node;
img.onload = function () {
var imgWidth = this.width;
var imgHeight = this.height;
if (imgWidth > 150){
imgHeight = imgHeight * (150/imgWidth);
imgWidth = 150;
}
var offsetX = -imgWidth/2;
this.node.append("g")
.attr("class", "imageNode")
.attr("x", 0)
.attr("y", 0)
.attr("width", imgWidth)
.attr("height", imgHeight)
.attr("opacity", 1)
.attr("transform", "translate(" + offsetX + ",20)");
this.node.selectAll(".imageNode")
.append("image")
.attr("class", "mappingImage")
.attr("href", this.src)
.attr("width", imgWidth)
.attr("height", imgHeight)
.attr("opacity", 1);
metExploreD3.GraphMapping.applyEventOnImage(this.node.select(".imageNode"));
this.node.selectAll(".imageNode")
.each(function(d){
metExploreD3.GraphMapping.setStartingImageStyle(d);
this.parentNode.parentNode.appendChild(this.parentNode);
});
};
console.log(dataUri);
});
}
}
},
......
......@@ -677,6 +677,7 @@ metExploreD3.GraphUtils = {
alert("Votre navigateur ne gère pas l'AJAX cross-domain !");
}
});
allElements = metExploreD3.GraphUtils.setInlineStyles(clone, emptySvgDeclarationComputed, allElements);
}
else
......@@ -811,6 +812,44 @@ metExploreD3.GraphUtils = {
}
},
getDataUri : function(url, callback) {
var XMLrequest = new XMLHttpRequest(); // new XML request
XMLrequest.open("GET", url, false); // URL of the SVG file on server
XMLrequest.send(null); // get the SVG file
var res = XMLrequest.responseXML;
console.log(res);
if (res!==null){
var mySVG = res.getElementsByTagName("svg")[0];
var svg = new XMLSerializer().serializeToString(mySVG);
var base64 = window.btoa(svg);
callback('data:image/svg+xml;base64,' + base64);
}
else
{
var image = new Image();
image.onload = function () {
var canvas = document.createElement('canvas');
canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size
canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size
canvas.getContext('2d').drawImage(this, 0, 0);
// Get raw image data
callback(canvas.toDataURL('image/png').replace(/^data:image\/(png|jpg);base64,/, ''));
// ... or get as Data URI
callback(canvas.toDataURL('image/png'));
};
image.src=url;
}
},
binaryblob : function(canvas, type){
var byteString = window.atob(canvas.toDataURL("image/"+type).replace(/^data:image\/(png|jpeg);base64,/, ""));
......@@ -1025,11 +1064,11 @@ metExploreD3.GraphUtils = {
tree.push(obj);
visit(obj);
function visit(node) {
if ((!(node.className.baseVal && node.className.baseVal=="linkGroup")) && node.tagName!='line' ){
if (node && node.hasChildNodes()) {
var child = node.firstChild;
if(child.className!=undefined)
{
// if(child.tagName=="image")
......@@ -1068,8 +1107,9 @@ metExploreD3.GraphUtils = {
// }
if(child.tagName!="image")
if(child.tagName!="image" || child.className.baseVal=="mappingImage" )
{
while (child) {
if(child.getAttribute!=undefined){
if(child.getAttribute("href")!="resources/icons/pause.svg"
......@@ -1079,6 +1119,8 @@ metExploreD3.GraphUtils = {
&& child.getAttribute("href")!="resources/icons/link.svg"
&& child.getAttribute("href")!="resources/icons/unlink.svg")
{
if(child.className.baseVal=="mappingImage")
// console.log(child.getAttribute("href"));
if (child.nodeType === 1 && child.nodeName != 'SCRIPT'){
tree.push(child);
visit(child);
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment