You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
70 lines
1.8 KiB
70 lines
1.8 KiB
<!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>
|
|
|