Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active February 8, 2016 23:23
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save mbostock/647888 to your computer and use it in GitHub Desktop.
Image Processing
license: gpl-3.0
(function() {
var po = org.polymaps;
po.canvas = function() {
var canvas = po.layer(load, unload),
image = po.svg("image"), // dummy image
url;
function load(tile) {
var size = canvas.map().tileSize(),
o = tile.element = po.svg("foreignObject"),
c = o.appendChild(document.createElement("canvas")),
w = size.x,
h = size.y;
o.setAttribute("width", w);
o.setAttribute("height", h);
c.setAttribute("width", w);
c.setAttribute("height", h);
tile.request = po.queue.image(image, url(tile), function(img) {
var g = c.getContext("2d"),
d = g.createImageData(w, h),
e;
delete tile.request;
tile.ready = true;
g.drawImage(img, 0, 0);
e = g.getImageData(0, 0, w, h);
for (var i = 0, n = w * h * 4; i < n; i++) d.data[i] = e.data[i] / 2; // e.g.
g.putImageData(d, 0, 0);
canvas.dispatch({type: "load", tile: tile});
});
}
function unload(tile) {
if (tile.request) tile.request.abort(true);
}
canvas.url = function(x) {
if (!arguments.length) return url;
url = po.url(x);
return canvas.reload();
};
return canvas;
};
})();
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdn.rawgit.com/simplegeo/polymaps/v2.3.0/polymaps.min.js"></script>
<script type="text/javascript" src="canvas.js"></script>
<style type="text/css">
@import url("https://cdn.rawgit.com/simplegeo/polymaps/v2.3.0/examples/example.css");
</style>
</head>
<body>
<script type="text/javascript">
var po = org.polymaps;
var map = po.map()
.container(document.body.appendChild(po.svg("svg")))
.tileSize({x: 149, y: 149})
.add(po.interact());
map.add(po.canvas()
.url("http://bl.ocks.org/forkme.png"));
map.add(po.compass()
.pan("none"));
</script>
</body>
</html>
@Kreozot
Copy link

Kreozot commented Aug 18, 2015

Please replace the polymaps reference to this: https://cdnjs.cloudflare.com/ajax/libs/polymaps/2.3.0/polymaps.min.js
Because now the example is not working (because of MIME type text/plain)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment