+
+
+ Lens distortion removal
+FisheyeGL is an open source tool by Public Lab for removing lens distortion from photographs, from a WebGL enabled browser. Read more
++ + + +
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + a: , + b: , + Fx: , + Fy: , + scale: , + x: , + y: +
+Drag a new image from your desktop onto the old one to run the correction on a new image. Right-click image to download.
+Use the sliders to adjust the correction.
+-
+
- Fx +
- + + + +
- Fy +
- + + + +
- a +
- + + + +
- b +
- + + + +
- scale +
- + + + +
- fov x + +
- fov y + +
Presets
+If you find the right settings for a particular camera or lens, send them in or email jeff@publiclab.org to get them added to a list of presets for a future "auto-correct" feature.
-
-
- Mobius Action Cam (default lens): preset -
- GoPro alternatives: preset (many almost identical) - +
- + Mobius Action Cam (default lens): + preset + +
- + GoPro alternatives: + preset (many almost identical) + +
+
Previous images
+Drag a new image above and the current image will be saved here. Click to open or download.
+ diff --git a/example/main.js b/example/main.js index 642cded..2c98f9f 100644 --- a/example/main.js +++ b/example/main.js @@ -1,4 +1,4 @@ -var distorter; +var distorter, example; jQuery(document).ready(function($) { @@ -6,18 +6,22 @@ jQuery(document).ready(function($) { image: 'images/grid.png' }); - $("dl").on("change", adjustLens); - $("dl input").on("mousemove", adjustLens); - - function adjustLens(e) { - distorter.lens.a = parseFloat($("#a_label")[0].innerHTML = $("#a").val()); - distorter.lens.b = parseFloat($("#b_label")[0].innerHTML = $("#b").val()); - distorter.lens.Fx = parseFloat($("#Fx_label")[0].innerHTML = $("#Fx").val()); - distorter.lens.Fy = parseFloat($("#Fy_label")[0].innerHTML = $("#Fy").val()); - distorter.lens.scale = parseFloat($("#scale_label")[0].innerHTML = $("#scale").val()); - distorter.fov.x = parseFloat($("#fovx").val()); - distorter.fov.y = parseFloat($("#fovy").val()); + function onSliderChange() { + readSliders(); distorter.run(); + writeHash(); + updateDisplay(); + } + $("dl").on("change", onSliderChange); + $("dl input").on("mousemove", onSliderChange); + + readHash(); + setSliders(); + readSliders(); + distorter.run(); + updateDisplay(); + + function updateDisplay() { $("#display .a")[0].innerHTML = distorter.lens.a; $("#display .b")[0].innerHTML = distorter.lens.b; $("#display .Fx")[0].innerHTML = distorter.lens.Fx; @@ -25,7 +29,19 @@ jQuery(document).ready(function($) { $("#display .scale")[0].innerHTML = distorter.lens.scale; $("#display .x")[0].innerHTML = distorter.fov.x; $("#display .y")[0].innerHTML = distorter.fov.y; - + } + + function readSliders() { + distorter.lens.a = parseFloat($("#a_label")[0].innerHTML = $("#a").val()); + distorter.lens.b = parseFloat($("#b_label")[0].innerHTML = $("#b").val()); + distorter.lens.Fx = parseFloat($("#Fx_label")[0].innerHTML = $("#Fx").val()); + distorter.lens.Fy = parseFloat($("#Fy_label")[0].innerHTML = $("#Fy").val()); + distorter.lens.scale = parseFloat($("#scale_label")[0].innerHTML = $("#scale").val()); + distorter.fov.x = parseFloat($("#fovx").val()); + distorter.fov.y = parseFloat($("#fovy").val()); + } + + function writeHash() { setUrlHashParameter("a", distorter.lens.a); setUrlHashParameter("b", distorter.lens.b); setUrlHashParameter("Fx", distorter.lens.Fx); @@ -45,28 +61,35 @@ jQuery(document).ready(function($) { distorter.fov.y = parseFloat(getUrlHashParameter("y")) || distorter.fov.y; } - readHash(); - // not quite working: //$(window).on('hashchange', function() { // readHash(); // adjustLens(); //}); - $("#a").val(distorter.lens.a); - $("#a_label")[0].innerHTML = distorter.lens.a; - $("#b").val(distorter.lens.b); - $("#b_label")[0].innerHTML = distorter.lens.b; - $("#Fx").val(distorter.lens.Fx); - $("#Fx_label")[0].innerHTML = distorter.lens.Fx; - $("#Fy").val(distorter.lens.Fy); - $("#Fy_label")[0].innerHTML = distorter.lens.Fy; - $("#scale").val(distorter.lens.scale); - $("#scale_label")[0].innerHTML = distorter.lens.scale; - $("#fovx").val(distorter.fov.x); - $("#fovy").val(distorter.fov.y); - - adjustLens(); + function useHash(hashString) { + window.location.hash = hashString; + readHash(); + setSliders(); + updateDisplay(); + distorter.run(); + } + + function setSliders() { + $("#a").val(distorter.lens.a); + $("#a_label")[0].innerHTML = distorter.lens.a; + $("#b").val(distorter.lens.b); + $("#b_label")[0].innerHTML = distorter.lens.b; + $("#Fx").val(distorter.lens.Fx); + $("#Fx_label")[0].innerHTML = distorter.lens.Fx; + $("#Fy").val(distorter.lens.Fy); + $("#Fy_label")[0].innerHTML = distorter.lens.Fy; + $("#scale").val(distorter.lens.scale); + $("#scale_label")[0].innerHTML = distorter.lens.scale; + $("#fovx").val(distorter.fov.x); + $("#fovy").val(distorter.fov.y); + } + // Drag & Drop behavior @@ -88,7 +111,9 @@ jQuery(document).ready(function($) { reader = new FileReader() reader.onload = function(e) { - $('#previous').prepend(distorter.getImage()); + var uniq = (new Date()).getTime(); + $('#previous').prepend(''); + $('.' + uniq).append(distorter.getImage()); distorter.setImage(event.target.result, function callback() { $('#grid').height($('#canvas').height()); $('#grid').width($('#canvas').width()); @@ -108,9 +133,22 @@ jQuery(document).ready(function($) { $('#canvas').on('dragover', onDragOver, false); $('#canvas')[0].addEventListener('drop', onDrop, false); - setTimeout(function() { + + window.onresize = resizeGrid; + setTimeout(resizeGrid, 0); + + function resizeGrid() { $('#grid').height($('#canvas').height()); $('#grid').width($('#canvas').width()); - }, 0); + } + + example = { + useHash: useHash, + readHash: readHash, + writeHash: writeHash, + setSliders: setSliders, + readSliders: readSliders, + updateDisplay: updateDisplay + } }); diff --git a/package.json b/package.json index 1cb4d02..4d5813d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "fisheyegl", - "version": "0.1.2", + "version": "0.2.0", "description": "A JavaScript library for correcting fisheye, or barrel distortion, in images in the browser with WebGL -- adapted from fisheye-correction-webgl by @bluemir.", "main": "src/fisheyegl.js", "scripts": {}, diff --git a/src/fisheyegl.js b/src/fisheyegl.js index 9def037..db7369b 100644 --- a/src/fisheyegl.js +++ b/src/fisheyegl.js @@ -285,6 +285,12 @@ var FisheyeGl = function FisheyeGl(options){ } + function getSrc(format) { + + return gl.canvas.toDataURL(format || 'image/jpeg'); + + } + // external API: var distorter = { options: options, @@ -293,7 +299,8 @@ var FisheyeGl = function FisheyeGl(options){ fov: fov, run: run, getImage: getImage, - setImage: setImage + setImage: setImage, + getSrc: getSrc } return distorter;