FishEye transform (Kodak front)

ref) ref) https://trac.ffmpeg.org/attachment/wiki/RemapFilter/projection.c
yoya · May 29, 2017 · 670ada4 · 670ada4
1 parent c841a15
commit 670ada4
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 1 deletion.
diff --git a/fisheye.html b/fisheye.html
@@ -0,0 +1,22 @@
+<html>
+<head>
+  <meta name="copyright" content="Copyright &copy; 2017/04/02- [email protected] . All Rights Reserved.">
+  <meta charset="utf-8">
+  <title> Fish Eye </title>
+<link rel="stylesheet" href="index.css">
+</head>
+<body bgcolor="lightgray">
+  <div class="container">
+    <div>
+    <div>
+      maxWidthHeight:<input id="maxWidthHeightRange" type="range" min="16" max="2048" step="1" value="640">:<input type="text" id="maxWidthHeightText" size="5">
+    </div>
+    <canvas id="srcCanvas" class="borderRed" width=200 height=200> srcCanvas </canvas>
+    <canvas id="dstCanvas" class="borderBlue" width=200 height=200> dstCanvas </canvas>
+  </div>
+  <script type="text/javascript" src="lib/drop.js"> </script>
+  <script type="text/javascript" src="lib/bind.js"> </script>
+  <script type="text/javascript" src="lib/canvas.js"> </script>
+  <script type="text/javascript" src="fisheye.js"> </script>
+</body>
+</html>
diff --git a/fisheye.js b/fisheye.js
@@ -0,0 +1,72 @@
+"use strict";
+/*
+ * 2017/04/02- (c) [email protected]
+ */
+
+document.addEventListener("DOMContentLoaded", function(event) {
+    main();
+});
+
+function main() {
+    // console.debug("main");
+    var srcCanvas = document.getElementById("srcCanvas");
+    var dstCanvas = document.getElementById("dstCanvas");
+    var srcImage = new Image(srcCanvas.width, srcCanvas.height);
+    dropFunction(document, function(dataURL) {
+	srcImage = new Image();
+	srcImage.onload = function() {
+	    drawSrcImageAndCopy(srcImage, srcCanvas, dstCanvas);
+	}
+	srcImage.src = dataURL;
+    }, "DataURL");
+    bindFunction({"maxWidthHeightRange":"maxWidthHeightText"},
+		 function() {
+		     drawSrcImageAndCopy(srcImage, srcCanvas, dstCanvas);
+		 } );
+}
+function drawSrcImageAndCopy(srcImage, srcCanvas, dstCancas) {
+    var maxWidthHeight = parseFloat(document.getElementById("maxWidthHeightRange").value);
+    drawSrcImage(srcImage, srcCanvas, maxWidthHeight);
+    drawCopy(srcCanvas, dstCanvas);
+}
+
+// ref) https://trac.ffmpeg.org/attachment/wiki/RemapFilter/projection.c
+function fisheyeTransform(dstX, dstY, dstImageData) {
+    var [width, height] = [dstImageData.width, dstImageData.height];
+    var theta = (1.0 - dstX / width) * Math.PI;
+    var phi = (dstY / height) * Math.PI;
+    var x = Math.cos(theta) * Math.sin(phi);
+    var y = Math.sin(theta) * Math.sin(phi);
+    var z = Math.cos(phi);
+
+    var theta2 = Math.atan2(-z, x);
+    var phi2_over_pi = Math.acos(y) / Math.PI;
+    var srcX = ((phi2_over_pi * Math.cos(theta2))+0.5)*width;
+    var srcY = ((phi2_over_pi * Math.sin(theta2))+0.5)*height;
+    return [srcX, srcY];
+}
+
+function drawCopy(srcCanvas, dstCanvas) {
+    // console.debug("drawCopy");
+    var srcCtx = srcCanvas.getContext("2d");
+    var dstCtx = dstCanvas.getContext("2d");
+    var srcWidth = srcCanvas.width, srcHeight = srcCanvas.height;
+    var dstWidth  = srcWidth;
+    var dstHeight = srcHeight;
+    dstCanvas.width  = dstWidth;
+    dstCanvas.height = dstHeight;
+    //
+    var outfill = "black";
+    var srcImageData = srcCtx.getImageData(0, 0, srcWidth, srcHeight);
+    var dstImageData = dstCtx.createImageData(dstWidth, dstHeight);
+    for (var dstY = 0 ; dstY < dstHeight; dstY++) {
+        for (var dstX = 0 ; dstX < dstWidth; dstX++) {
+	    var [srcX, srcY] = fisheyeTransform(dstX, dstY, dstImageData);
+	    srcX = Math.round(srcX);
+	    srcY = Math.round(srcY);
+	    var rgba = getRGBA(srcImageData, srcX, srcY, outfill);
+	    setRGBA(dstImageData, dstX, dstY, rgba);
+	}
+    }
+    dstCtx.putImageData(dstImageData, 0, 0);
+}
diff --git a/index.html b/index.html
@@ -13,7 +13,7 @@
 	<li> <a href="affintrans.html"> Affin Transform </a>
 	<li> <a href="resize.html"> Resize (TODO: many many..) </a>
 	<li> <a href="fcbi.html"> FCBI(Fast Cuvature Based Interpolation) </a>
-	<li> Fish Eye
+	<li> <a href="fisheye.html"> Fish Eye </a>
       </ul>
     <li> Filter
       <ul>