index.html 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta charset="utf-8" />
  5. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  6. </head>
  7. <body>
  8. <h1>Select an image:</h1>
  9. <a href="smiley.svg">smiley.svg</a>
  10. <br>
  11. <a href="../../images/logo.png">logo.png</a>
  12. <script>
  13. /*globals $*/
  14. /*jslint vars: true*/
  15. $('a').click(function() {'use strict';
  16. var meta_str;
  17. var href = this.href;
  18. var target = window.parent;
  19. // Convert Non-SVG images to data URL first
  20. // (this could also have been done server-side by the library)
  21. if (this.href.indexOf('.svg') === -1) {
  22. meta_str = JSON.stringify({
  23. name: $(this).text(),
  24. id: href
  25. });
  26. target.postMessage(meta_str, '*');
  27. var img = new Image();
  28. img.onload = function() {
  29. var canvas = document.createElement('canvas');
  30. canvas.width = this.width;
  31. canvas.height = this.height;
  32. // load the raster image into the canvas
  33. canvas.getContext('2d').drawImage(this, 0, 0);
  34. // retrieve the data: URL
  35. var dataurl;
  36. try {
  37. dataurl = canvas.toDataURL();
  38. } catch(err) {
  39. // This fails in Firefox with file:// URLs :(
  40. alert("Data URL conversion failed: " + err);
  41. dataurl = "";
  42. }
  43. target.postMessage('|' + href + '|' + dataurl, '*');
  44. };
  45. img.src = href;
  46. } else {
  47. // Send metadata (also indicates file is about to be sent)
  48. meta_str = JSON.stringify({
  49. name: $(this).text(),
  50. id: href
  51. });
  52. target.postMessage(meta_str, '*');
  53. // Do ajax request for image's href value
  54. $.get(href, function(data) {
  55. data = '|' + href + '|' + data;
  56. // This is where the magic happens!
  57. target.postMessage(data, '*');
  58. }, 'html'); // 'html' is necessary to keep returned data as a string
  59. }
  60. return false;
  61. });
  62. </script>
  63. </body>
  64. </html>