Permalink
Browse files

add scale feature

  • Loading branch information...
1 parent 391e2cd commit c83e9f2903c3b363ca40a6505452110e179b613e @logicmd committed Mar 1, 2012
Showing with 60 additions and 16 deletions.
  1. +3 −3 dev.htm
  2. +13 −12 readme.md
  3. +44 −1 stereoDraw.js
View
@@ -9,9 +9,9 @@
<script type="application/x-javascript" src="stereoDraw.js"> </script>
- <input type="button" value="stereoDrawImage('s-lr.jpg','StereoLR', 'TrueAnaglyph', 'RedCyan', 'stereoCanvas')" onclick="stereoDrawImage('s-lr.jpg','StereoLR', 'TrueAnaglyph', 'RedCyan', 'stereoCanvas')" /> <br />
- <input type="button" value="stereoDrawImage('s-rl.jpg','StereoRL', 'OptimizedAnaglyph', 'RedCyan', 'stereoCanvas')" onclick="stereoDrawImage('s-rl.jpg','StereoRL', 'OptimizedAnaglyph', 'RedCyan', 'stereoCanvas')" /> <br />
- <input type="button" value="stereoDrawImage('s-rl3.jpg','StereoRL', 'Optimized+Anaglyph', 'GreenMagenta', 'stereoCanvas')" onclick="stereoDrawImage('s-rl3.jpg','StereoRL', 'Optimized+Anaglyph', 'GreenMagenta', 'stereoCanvas')" /> <br />
+ <input type="button" value="stereoDrawImage('s-lr.jpg','StereoLR', 'TrueAnaglyph', 'RedCyan', '1.5', 'stereoCanvas')" onclick="stereoDrawImage('s-lr.jpg','StereoLR', 'TrueAnaglyph', 'RedCyan', '1.5', 'stereoCanvas')" /> <br />
+ <input type="button" value="stereoDrawImage('s-rl.jpg','StereoRL', 'OptimizedAnaglyph', 'RedCyan', '0.5', 'stereoCanvas')" onclick="stereoDrawImage('s-rl.jpg','StereoRL', 'OptimizedAnaglyph', 'RedCyan', '0.5', 'stereoCanvas')" /> <br />
+ <input type="button" value="stereoDrawImage('s-rl3.jpg','StereoRL', 'Optimized+Anaglyph', 'GreenMagenta', '1', 'stereoCanvas')" onclick="stereoDrawImage('s-rl3.jpg','StereoRL', 'Optimized+Anaglyph', 'GreenMagenta', '1', 'stereoCanvas')" /> <br />
<div style="visibility:hidden;">
<h2>Source images</h2>
View
@@ -12,20 +12,21 @@ All codes are rewritten to be more simple and efficient.
- `imgSrc`: url of source, **NOTICE**, the image must be loaded in the html.
- `stereoType`: Stereo type of the source image
- - `"Flat"`
- - `"Anaglyph"`
- - `"StereoLR"`
- - `"StereoRL"`
- - `"StereoUD"`
- - `"StereoDU"`
+ * `"Flat"`
+ * `"Anaglyph"`
+ * `"StereoLR"`
+ * `"StereoRL"`
+ * `"StereoUD"`
+ * `"StereoDU"`
- `anaglyphMode`: Anaglyph Mode of the procedure
- - `"TrueAnaglyph"`
- - `"GrayAnaglyph"`
- - `"ColorAnaglyph"`
- - `"OptimizedAnaglyph"`
+ * `"TrueAnaglyph"`
+ * `"GrayAnaglyph"`
+ * `"ColorAnaglyph"`
+ * `"OptimizedAnaglyph"`
- `glassType`: Anaglyph Mode of the procedure
- - `"RedCyan"`
- - `"GreenMagenta"`
+ * `"RedCyan"`
+ * `"GreenMagenta"`
+- `scaleRate`: Scale the final anaglyph image.
- `cnvsDstID`: Destination Canvas ID,**NOTICE**, the canvas must exist in the html.
View
@@ -13,7 +13,7 @@ visit http://creativecommons.org/licenses/by/3.0/
*/
-function stereoDrawImage(imgSrc, stereoType, anaglyphMode, glassType, cnvsDstID) {
+function stereoDrawImage(imgSrc, stereoType, anaglyphMode, glassType, scaleRate, cnvsDstID) {
/*
* 以下是alt方法获得img的src,无论如何DOM中必须载入
@@ -61,7 +61,12 @@ function stereoDrawImage(imgSrc, stereoType, anaglyphMode, glassType, cnvsDstID)
// 准备Canvas图像数据
imageData = ctx.createImageData(imw, imh);
+
process(imw, imh, iData1, iData2);
+
+ // scale
+ scaleIt(scaleRate);
+
/*
* prepareSize()
@@ -311,8 +316,46 @@ function stereoDrawImage(imgSrc, stereoType, anaglyphMode, glassType, cnvsDstID)
}
break;
}
+
ctx.putImageData(imageData, 0, 0);
};
+ /*
+ * Scale a image in canvas Elements
+ * Ususally 3 steps are needed.
+ * 1. create a temp canvas to contain image data.
+ * specify the width and height to be exactly the
+ * width and height of the image.
+ *
+ * 2. prepare destinate canvas size.
+ *
+ * 3. scale and drawImage from temp canvas to destinate
+ * canvas.
+ *
+ * P.S.
+ * Image Data这种标量数据scale很麻烦,如果是自己画的矢量数据则简单很多
+ * https://developer.mozilla.org/en/Canvas_tutorial/Transformations
+ *
+ */
+
+ function scaleIt(scaleRate) {
+ // Step 1
+ var tmpCvs = document.createElement('canvas');
+ tmpCvs.width = imw;
+ tmpCvs.height = imh;
+ tmpCvs.getContext("2d").putImageData(imageData, 0, 0);
+
+ // Step 2
+ //var sCnvs = document.getElementById("scaleCanvas");
+ cnvs.width = imw * scaleRate;
+ cnvs.height = imh * scaleRate;
+
+ // Step 3
+ //sCtx = sCnvs.getContext("2d");
+ ctx.scale(scaleRate, scaleRate);
+ ctx.drawImage(tmpCvs, 0, 0);
+
+ };
+
}

0 comments on commit c83e9f2

Please sign in to comment.