12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970 |
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta charset="utf-8" />
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
- </head>
- <body>
- <h1>Select an image:</h1>
- <a href="smiley.svg">smiley.svg</a>
- <br>
- <a href="../../images/logo.png">logo.png</a>
- <script>
- /*globals $*/
- /*jslint vars: true*/
- $('a').click(function() {'use strict';
- var meta_str;
- var href = this.href;
- var target = window.parent;
- // Convert Non-SVG images to data URL first
- // (this could also have been done server-side by the library)
- if (this.href.indexOf('.svg') === -1) {
- meta_str = JSON.stringify({
- name: $(this).text(),
- id: href
- });
- target.postMessage(meta_str, '*');
- var img = new Image();
- img.onload = function() {
- var canvas = document.createElement('canvas');
- canvas.width = this.width;
- canvas.height = this.height;
- // load the raster image into the canvas
- canvas.getContext('2d').drawImage(this, 0, 0);
- // retrieve the data: URL
- var dataurl;
- try {
- dataurl = canvas.toDataURL();
- } catch(err) {
- // This fails in Firefox with file:// URLs :(
- alert("Data URL conversion failed: " + err);
- dataurl = "";
- }
- target.postMessage('|' + href + '|' + dataurl, '*');
- };
- img.src = href;
- } else {
- // Send metadata (also indicates file is about to be sent)
- meta_str = JSON.stringify({
- name: $(this).text(),
- id: href
- });
- target.postMessage(meta_str, '*');
- // Do ajax request for image's href value
- $.get(href, function(data) {
- data = '|' + href + '|' + data;
- // This is where the magic happens!
- target.postMessage(data, '*');
-
- }, 'html'); // 'html' is necessary to keep returned data as a string
- }
- return false;
- });
- </script>
- </body>
- </html>
|