Use canvas to tile images when when highest resolution data has already been downloaded
| Affects | Status | Importance | Assigned to | Milestone | |
|---|---|---|---|---|---|
| Helioviewer.org |
New
|
Wishlist
|
Unassigned | ||
Bug Description
For SOHO images, it is possible to skip communication with the server when zooming in very far since the data is simply being artificially zoomed on the server.
Example of how this can be down on the client-side:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://
<html>
<head>
<!-- Last update: 2009/08/14 -->
<title>Canvas > Client-side Tiling Using Canvas</title>
<script type="text/
<style type='text/css'>
#tile-container {position: relative;}
#nw-container, #ne-container, #sw-container, #se-container {position: absolute; width:512px; height:512px;}
#nw-container {top:0px; left:0px;}
#ne-container {top:0px; left:512px;}
#sw-container {top:512px; left:0px;}
#se-container {top:512px; left:512px;}
</style>
</head>
<body>
<h1>Canvas > Client-side Tiling Using Canvas</h1>
<input id="zoom-btn" type="button" value="Zoom In" />
<div id="tile-
<div id="nw-container">
<img id="tile" src="tile.jpg" alt="Original tile" />
</div>
<div id="ne-
<div id="sw-
<div id="se-
</div>
<br>
<script type="text/
$(function (){
$("#zoom-
var nw, tile;
// NOTE 1: Canvas doesn't like jQuery selectors (e.g. $("#northwest"
// NOTE 2: Canvas dimensions must be specified using width and height attributes, and not CSS!
tile = document.
$(tile).hide();
// Northwest
$("#nw-
nw = document.
nw.drawImage(
// Northeast
$("#ne-
nw = document.
nw.drawImage(
// Southwest
$("#sw-
sw = document.
sw.drawImage(
// Southeast
$("#se-
nw = document.
nw.drawImage(
});
});
</script>
</body>
</html>
| Keith Hughitt (keith-hughitt) wrote | #1 |
| Keith Hughitt (keith-hughitt) wrote | #2 |
