Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.
Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation.
In this blog i am going to explain how to save svg generated by raphael.js into PDF generated by iText library.
There are other ways to do this, like using native iText Library functions like svgToPDF(). However i am going to demonstrate a different way. I have used the following Libraries to achieve it.
Step 1
Include the raphael.export.js into your html page
<script type="text/javascript" src="raphael.export.js"></script>
<html>
<head><title>SVG</title>
<script src="g.raphael-min.js"></script>
<script>
window.load = function(){
var paper = Raphael("canvas"),
function svg2png()
{
var svg = paper.toSVG();
.........
//prepare an ajax call to Node.js server
}
}
</script>
</head>
<body>
<div id="canvas"></div>
<input type="button" name="btnPng" value ="Save As PNG" onclick = "svg2png()">
<img src ="">
</body>
</html>
Step 2
Node.js - The request, response are handled by http(s) server coded only in node.js. You can alternatively handle it in express.js
a) Use node formidable module to handle server side fie upload
b) install nodejs module svg2png
npm install svg2png
c) write the svg string received in request into a temp.svg file using node.js "fs" module.
var sourceFile = sourcePath+fileName+".svg";
var destFile = destPath+fileName+".png";
// Write to SVG file
fs.writeFile(sourceFile, svg, function(err) {
if(err)
{
console.log(datetime + " DEBUG: " + "Error occurred during file writing! Error details are as follows:");
console.log(err);
}
//Start Converstion.
svg2png(sourceFile,destFile, function(err){
if(err)
{
console.log("Error occurred during svg to png conversion! ");
console.log(err);
}
console.log("The PNG file was saved!");
// Delete SVG file
fs.unlink(sourceFile, function (err) {
if(err)
{
console.log("Error Deleting Original file. ");
console.log(err);
}
console.log("Original svg file deleted!");
});
});
});
Step 3:
You can send the destination file path as response to the AJAX Call. Make this image accessible over a URL. ( you can save this png in your web server to serve static files).
You can also provide the preview of the image to user, after the ajax call completion by updating the image src value on html page.
you can also use jquery to update DOM on the page.
Step 4:
Refer the following link on how to include a image from an URL
http://tutorials.jenkov.com/java-itext/image.html
Done!!
Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation.
In this blog i am going to explain how to save svg generated by raphael.js into PDF generated by iText library.
There are other ways to do this, like using native iText Library functions like svgToPDF(). However i am going to demonstrate a different way. I have used the following Libraries to achieve it.
- Raphael.export.js
- Node.js
- iText
Step 1
Include the raphael.export.js into your html page
<script type="text/javascript" src="raphael.export.js"></script>
<html>
<head><title>SVG</title>
<link rel="stylesheet" href="demo.css" media="screen">
<link rel="stylesheet" href="demo-print.css" media="print">
<script src="raphael-min.js"></script><script src="g.raphael-min.js"></script>
<script>
window.load = function(){
var paper = Raphael("canvas"),
pie = paper .piechart(320, 240, 100, [55, 20, 13, 32, 5, 1, 2, 10], { legend: ["%%.%% - Enterprise Users", "IE Users"], legendpos: "west", href: ["http://raphaeljs.com", "http://g.raphaeljs.com"]});
function svg2png()
{
var svg = paper.toSVG();
.........
//prepare an ajax call to Node.js server
}
}
</script>
</head>
<body>
<div id="canvas"></div>
<input type="button" name="btnPng" value ="Save As PNG" onclick = "svg2png()">
<img src ="">
</body>
</html>
Step 2
Node.js - The request, response are handled by http(s) server coded only in node.js. You can alternatively handle it in express.js
a) Use node formidable module to handle server side fie upload
b) install nodejs module svg2png
npm install svg2png
c) write the svg string received in request into a temp.svg file using node.js "fs" module.
var sourceFile = sourcePath+fileName+".svg";
var destFile = destPath+fileName+".png";
// Write to SVG file
fs.writeFile(sourceFile, svg, function(err) {
if(err)
{
console.log(datetime + " DEBUG: " + "Error occurred during file writing! Error details are as follows:");
console.log(err);
}
//Start Converstion.
svg2png(sourceFile,destFile, function(err){
if(err)
{
console.log("Error occurred during svg to png conversion! ");
console.log(err);
}
console.log("The PNG file was saved!");
// Delete SVG file
fs.unlink(sourceFile, function (err) {
if(err)
{
console.log("Error Deleting Original file. ");
console.log(err);
}
console.log("Original svg file deleted!");
});
});
});
Step 3:
You can send the destination file path as response to the AJAX Call. Make this image accessible over a URL. ( you can save this png in your web server to serve static files).
You can also provide the preview of the image to user, after the ajax call completion by updating the image src value on html page.
you can also use jquery to update DOM on the page.
Step 4:
Refer the following link on how to include a image from an URL
http://tutorials.jenkov.com/java-itext/image.html
Done!!
No comments:
Post a Comment