Convert Svg - Jpg Js

[ibrahimjan]

Hi all, this small JS converts SVG-JPG, the script does what is says, but what I want it to do, is load and execute the script as the page loads, but at a sequential rate. The first thing should load is the SVG to Canvas function, then when that has fully executed, Canvas to JPG function should fire up?? I am sure its easy to do but my mind is gone blank. At the moment the script is activated by 2 links, svg-canvas and canvas-jpg.

<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script><script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script> <script type="text/javascript">/*<![CDATA[*//*---->*/     function q(k) {   var qs = window.location.search.substring(1);   var t = qs.split("&");   for (i=0;i<t.length;i++) {	kv = t[i].split("=");	if (kv[0] == k) return unescape(kv[1]).replace('+',' ');   }   return null;  }  var context;  function bodyonload() {   if (typeof(FlashCanvas) != 'undefined') context = document.getElementById('canvas').getContext;   var qUrl = q('url'); if (qUrl != null && qUrl != '') { r(); canvg('canvas', qUrl); }   var qSvg = q('svg'); if (qSvg != null && qSvg != '') { r(); canvg('canvas', qSvg); }    }  function render() {   var c = document.getElementById('canvas');   c.width = document.getElementById('width').value;   c.height = document.getElementById('height').value;   if (context) c.getContext = context;   canvg(c, document.getElementById('svg').value);  }  function r() {   var c = document.getElementById('canvas');   c.width = '600';   c.height = '600';   if (context) c.getContext = context;  }	  function svgJPG() {  var canvas = document.getElementById("canvas");  var img	= canvas.toDataURL("image/jpeg", 1.0) ;  document.write('<img src="'+img+'"/>');} window.onload=bodyonload(); /*--*//*]]>*/</script>  <p><canvas id="canvas"></canvas></p><p><a href="javascript:r();canvg('canvas', '/svg_file.svg')">svg-canvas</a></p><p><a href="javascript:svgJPG()"> canvas-jpg</a></p>

[justsomeguy]

Move the code in the links into the bodyonload function.

[JamesB]

also change

window.onload=bodyonload();

to

window.onload=bodyonload;

the window.onload property take a function value.

[ibrahimjan]

thanks, I changed it to the following, it manages to convert the SVG file to canvas, but when I place the svgJPG() it does not work it comes up with a blank jpg, is there a way to wait after the page fully loaded, to run the svgJPG(); ??

function q(k) {   var qs = window.location.search.substring(1);   var t = qs.split("&");   for (i=0;i<t.length;i++) {    kv = t[i].split("=");    if (kv[0] == k) return unescape(kv[1]).replace('+',' ');   }    return null;  }   var context;  function bodyonload() {   if (typeof(FlashCanvas) != 'undefined') context = document.getElementById('canvas').getContext;   var qUrl = q('url'); if (qUrl != null && qUrl != '') { r(); canvg('canvas', qUrl); }   var qSvg = q('svg'); if (qSvg != null && qSvg != '') { r(); canvg('canvas', qSvg); }   r();canvg('canvas', '/gallery/svg/<%=LAYID%>_low.svg');   svgJPG();  }   function render() {   var c = document.getElementById('canvas');   c.width = document.getElementById('width').value;   c.height = document.getElementById('height').value;   if (context) c.getContext = context;   canvg(c, document.getElementById('svg').value);  }  function r() {   var c = document.getElementById('canvas');   c.width = '600';   c.height = '600';   if (context) c.getContext = context;  }	  function svgJPG() {  var canvas = document.getElementById("canvas");  var img    = canvas.toDataURL("image/jpeg", 1.0) ;  document.write('<img src="'+img+'"/>');}window.onload=bodyonload;

[ibrahimjan]

thank you all I got it i am using the following to get the svgJPG() to load later:

window.setTimeout(afterDelay, 1000);function afterDelay() {    svgJPG();}

[ibrahimjan]

Ok I changed the code a bit to suit another application, please have a look, what seems to happen is only canvas2 to display the svg file, but canvas1 does nothing??I dont see whats going wrong, can you.

<canvas id="canvas1"></canvas> <canvas id="canvas2"></canvas> <script type="text/javascript">function bodyonload1() { canvg('canvas1', '/gallery/svg/-1259053475_low.svg')} function bodyonload2() { canvg('canvas2', '/gallery/svg/1367663658_low.svg')} window.onload=bodyonload1;window.onload=bodyonload2; </script>

[dsonesuk]

I think you will find the last onload will only run try window.onload=function(){bodyonload1();bodyonload2();}

[ibrahimjan]

thank you that worked, is there a way to make bodyonload 1-100 () I want to provide variables from 1 to 100 because the canvas id will be created dynamically so I want to match them?? so instead of writing window.onload=function(){bodyonload1();bodyonload2();bodyonload3();bodyonload4();bodyonload5();.......and so on} I want something like this.. window.onload=function(){bodyonload1-100();}

[JamesB]

this should work:

for (var i=1; i<=100; i++) {    if (window['bodyonload'+i]) window['bodyonload'+i]();}

but you'd probably find it easier putting the canvg() calls inside 1 function.

[ibrahimjan]

thank you all for your help, that worked very nicely.