A prototype, demonstration project to test full-resolution perspective transforms done in-browser on the client side using WebGL. This would be useful for MapKnitter (https://github.com/publiclab/mapknitter) or its interface core library, Leaflet.DistortableImage, where users could individually download their distorted images at full resolution for print or other uses.
Try this out in the demo at https://jywarren.github.io/webgl-distort
Or try the full featured lens distortion tool at https://github.com/jywarren/fisheyegl, based on this code.
Eventually, it could be packaged as a bower-installable library which simply accepts an image URL and a begin and end matrix, and initiates a download (so as not to cause the browser to render the large dataURL).
This makes use of the glfx.js library.
Current usage is:
<img id="img" src="examples/example-1024.jpg" />
<script>
(function() {
warpWebGl(
'img',
[0, 0, 1023, 0, 1023, 767, 0, 767], // matrix 1 (before) corner coordinates, NW, NE, SE, SW
[0, 100, 1023, -50, 1223, 867, 100, 767] // matrix 2 (after) corner coordinates
);
})();
</script>