diff options
Diffstat (limited to 'print')
| -rw-r--r-- | print/resources/inkstitch.js | 59 |
1 files changed, 52 insertions, 7 deletions
diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js index bb140705..4a757d5f 100644 --- a/print/resources/inkstitch.js +++ b/print/resources/inkstitch.js @@ -8,6 +8,7 @@ $.postJSON = function(url, data, success=null) { }; var realistic_rendering = {}; +var realistic_cache = {}; var normal_rendering = {}; function ping() { @@ -199,10 +200,21 @@ $(function() { }); }); - $.getJSON('/realistic', function(realistic_data) { +// $.getJSON('/realistic', function(realistic_data) { // realistic_rendering is global - realistic_rendering = realistic_data; - }); + /* + $.each(realistic_data, function(name, xml) { + var image = new Image(); + console.log("doing " + name); + image.onload = function() { + console.log("setting " + name + " = " + image); + realistic_rendering[name] = image; + } + image.src = 'data:image/svg+xml,' + xml; + }) + */ +// realistic_rendering = realistic_data; +// }); // wait until page size is set (if they've specified one) and then scale SVGs to fit setTimeout(function() { scaleAllSvg() }, 500); @@ -325,6 +337,12 @@ $(function() { console.log("" + item + " " + transform); + function finalize(svg_content) { + svg[0].outerHTML = svg_content; + // can't use the svg variable here because setting outerHTML created a new tag + figure.find('svg').css({transform: transform}); + } + // do this later to allow this event handler to return now, // which will cause the checkbox to be checked or unchecked // immediately even if SVG rendering takes awhile @@ -333,12 +351,39 @@ $(function() { if (!(item in normal_rendering)) { normal_rendering[item] = svg[0].outerHTML; } - svg[0].outerHTML = realistic_rendering[item]; + + if (!(item in realistic_cache)) { + // pre-render the realistic SVG to a raster image to spare the poor browser + var image = document.createElement('img'); + image.onload = function() { + console.log("rendering!"); + var canvas = document.createElement('canvas'); + + // maybe make DPI configurable? for now, use 600 + canvas.width = image.width / 96 * 600; + canvas.height = image.height / 96 * 600; + + var ctx = canvas.getContext('2d'); + + // rendering slows down the browser enough that we can miss sending + // pings, so tell the server side to wait for us + $.get("/printing/start") + .done(function() { + ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height); + realistic_cache[item] = '<svg width=' + image.width + ' height=' + image.height + ' xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' + + '<image x=0 y=0 width=' + image.width + ' height=' + image.height + ' xlink:href="' + canvas.toDataURL() + '" />' + + '</svg>'; + finalize(realistic_cache[item]); + $.get("/printing/end"); + }); + }; + image.src = '/realistic/' + item; + } else { + finalize(realistic_cache[item]); + } } else { - svg[0].outerHTML = normal_rendering[item]; + finalize(normal_rendering[item]); } - // can't use the svg variable here because setting outerHTML created a new tag - figure.find('svg').css({transform: transform}); }, 100); e.stopPropagation(); |