krunkosaurus / simg Goto Github PK
View Code? Open in Web Editor NEWJavaScript Class for converting SVG=>PNG and other operations.
Home Page: http://krunkosaurus.github.io/simg/
License: MIT License
JavaScript Class for converting SVG=>PNG and other operations.
Home Page: http://krunkosaurus.github.io/simg/
License: MIT License
I have a d3 graph within a svg element and wanted to export it. Just grabbed the svg element and called simg like shown in your example:
function exportToPNG() {
var simg = new Simg(document.getElementsByTagName("svg"));
// Replace the current SVG with an image version of it.
simg.replace();
// And trigger a download of the rendered image.
simg.download();
}
simg.js:37 Uncaught TypeError: svg.setAttribute is not a function
at simg.js:37
at Array.forEach (<anonymous>)
at root.Simg.toString (simg.js:36)
at root.Simg.toSvgImage (simg.js:57)
at root.Simg.toCanvas (simg.js:44)
at root.Simg.toImg (simg.js:74)
at root.Simg.replace (simg.js:90)
at exportToPNG (itsv.pws.ui.projStruct.js?ver:50)
at HTMLAnchorElement.onclick (ProjStruct.aspx:1)
This SVG string (generated with chartist.js) doesn't get converted:
<svg width="100%" height="100%" id="ct-chart-line" style="width: 100%; height: 100%;" version="1.1" xmlns="http://www.w3.org/2000/svg"><g class="ct-grids"></g><g><g series-name="benchmark" class="ct-series ct-series-a"><path d="M52,62.143L74.333,60.714L96.667,59.286L119,57.857L141.333,56.429L163.667,55L186,53.571L208.333,52.143L230.667,50.714L253,49.286L275.333,47.857L297.667,46.429L320,45" class="ct-line"></path></g><g series-name="performance" class="ct-series ct-series-b"><path d="M52,62.143L74.333,49.286L96.667,105L119,40.714L141.333,45L163.667,30.714L186,26.429L208.333,30.714L230.667,29.286L253,23.571L275.333,29.286L297.667,23.571L320,5" class="ct-line"></path></g></g><g class="ct-labels"><foreignObject style="overflow: visible;" x="42" y="110" width="22.333333333333332" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 22px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/"></span></foreignObject><foreignObject style="overflow: visible;" x="64.33333333333333" y="110" width="22.333333333333332" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 22px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Jan</span></foreignObject><foreignObject style="overflow: visible;" x="86.66666666666666" y="110" width="22.333333333333336" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 22px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Feb</span></foreignObject><foreignObject style="overflow: visible;" x="109" y="110" width="22.33333333333333" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 22px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Mar</span></foreignObject><foreignObject style="overflow: visible;" x="131.33333333333331" y="110" width="22.33333333333333" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 22px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Apr</span></foreignObject><foreignObject style="overflow: visible;" x="153.66666666666666" y="110" width="22.333333333333343" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 22px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">May</span></foreignObject><foreignObject style="overflow: visible;" x="176" y="110" width="22.333333333333314" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 22px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Jun</span></foreignObject><foreignObject style="overflow: visible;" x="198.33333333333331" y="110" width="22.333333333333343" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 22px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Jul</span></foreignObject><foreignObject style="overflow: visible;" x="220.66666666666666" y="110" width="22.333333333333343" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 22px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Aug</span></foreignObject><foreignObject style="overflow: visible;" x="243" y="110" width="22.333333333333314" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 22px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Sep</span></foreignObject><foreignObject style="overflow: visible;" x="265.3333333333333" y="110" width="22.333333333333343" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 22px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Oct</span></foreignObject><foreignObject style="overflow: visible;" x="287.66666666666663" y="110" width="22.333333333333343" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 22px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Nov</span></foreignObject><foreignObject style="overflow: visible;" x="310" y="110" width="30" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 30px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Dec</span></foreignObject></g></svg>
No errors... simply "nothing happens". By removing the <foreignObject>
elements it works fine.
TypeError: svg.parentNode is null on firefox 50.0.2
I like the idea behind this library but I'm a bit stumped on how to use it.
I'd like to help contribute a simple code example using its main features.
I've started to put together this:
http://headwinds.net/lab/simg/examples/simple/simple.html
As you can see, I'm stuck on step 1 - how do I setup up simg and pass in the svg? So that the simg library can consume it and turn it into a golden png?
I thought I would use Adobe's snap library to get the svg - I also tried D3 - not sure if I need to pass in the svg, the node, or something else...
When trying to convert a svg that uses a googlefont (Hind), the resulting img displays text using a fallback font, Arial I think. I have set the font-family style on the root svg element and the svg itself renders fine. Is there a way to convince Simg to use the correct fonts?
<svg width="500" height="600" id="diagram" transform="translate(-.5,-.5)" style="width: 500px; height: 600px; font-family: Hind; font-weight: 500; font-size: 16px; fill: white;" version="1.1" xmlns="http://www.w3.org/2000/svg"><g class="cell" transform="translate(135,46)"><rect rx="4" ry="4" x="2" y="2" width="149" height="81" style="fill: rgb(31, 119, 180);"></rect><text x="20" y="33"><tspan x="20" dy="16px">Stedelijke</tspan><tspan x="20" dy="16px">ontwikkeling</tspan></text><text x="113" y="65">8.8</text></g></svg>
I'm trying to use the library to download my graph (network) visualization as a png image. The nodes are appearing in the image but the links are missing. The links in my case are drawn using paths and each of these paths have a gradient attached to them which goes from the first node's color to the second node's color.
Any idea what could be going wrong?
I've got this Error msg
Uncaught TypeError: Cannot read property 'readJSON' of undefined
`
import Simg from 'simg';
...
<Button id="convertBtn"
onClick={
()=>{
//Here I can see my svg
console.log('SIMG %o', document.getElementById('myChart'));
console.log('SIMG %o', Simg(document.getElementById('myChart')));
Simg(document.getElementById('myChart'));
Simg.replace();
Simg.download('awesome');
}
}`
In Line:
var byteString = atob(escape(dataUrl));
Changed to:
var byteString = atob(dataUrl);
remove the escaping to prevent error in decoding base64. the last '==' will get escaped to '%3D%3d'
IE can not outerHTML an SVGElement.
Also it add some NS stuff if its extracted via Serializer or in my case Tag clone.
Here is an outerHTML prototype for SVGElement - should only be done in IE:
if (!(detectIE() === false)) {
Object.defineProperty(SVGElement.prototype, 'outerHTML', {
get: function () {
var $node, $temp;
$temp = document.createElement('div');
$node = this.cloneNode(true);
$temp.appendChild($node);
var ret = $temp.innerHTML;
// cleanup for IE
ret = ret.replace(new RegExp('NS\\d+:xmlns:xml="http://www.w3.org/XML/1998/namespace"', 'gi'), "");
ret = ret.replace(new RegExp('NS\\d+:xmlns:ns\\d+="http://www.w3.org/XML/1998/namespace"', 'gi'), "");
ret = ret.replace(new RegExp('xmlns:ns\\d+="http://www.w3.org/XML/1998/namespace"', 'gi'), "");
ret = ret.replace(new RegExp('xml:', 'gi'), "");
ret = ret.replace(new RegExp('ns\\d+:', 'gi'), "");
ret = ret.replace(new RegExp('xmlns:xml="http://www.w3.org/XML/1998/namespace"', 'gi'), "");
ret = ret.replace(new RegExp('NS\\d+:ns\\d+:', 'gi'), "");
ret = ret.replace(new RegExp('xmlns:NS\\d+=""', 'gi'), "");
return ret;
},
enumerable: false,
configurable: true
});
}
I've got things working for several d3 generated svgs but it only works in Chrome. After some debugging I'm finding that the callbacks are not being fired in IE (11) or Firefox (43.0.4) on Windows. For example, I am calling download
which calls toImg
and passes in a callback function but that callback function never fires. This is true for all of the callbacks. I have attempted to set breakpoints in dev tools and also added some console.logs in the callbacks that confirmed this.
I will continue to do debug and if I come up with a fix I'll do what I can to implement it. Meantime, any thoughts here?
I tried this in my page but it is not exporting icons I have used like:
var childImage = child.append("image") .attr("x", (childX - iconWidth/2)) .attr("y", (rootShapeY+170+0)) .attr("width", iconWidth) .attr("height", iconHeight) .attr("xlink:href", "file:/C:/Users/vjb/Desktop/InfoSpecifier/childIcon.png") ;
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.