From a8289d32e6cb32a19cc8dbec1b7e403fe6fe8acf Mon Sep 17 00:00:00 2001
From: Jim <dashjim@gmail.com>
Date: Sat, 1 Feb 2014 20:15:04 +0800
Subject: [PATCH] change the post.html layout to be able to automatically
 resize the big pictures

---
 _layouts/post.html                            | 61 +++++++++++++++++++
 .../2014-02-01-Flex-real-time-video-app.md    |  4 ++
 2 files changed, 65 insertions(+)

diff --git a/_layouts/post.html b/_layouts/post.html
index c80f112..ab3178a 100755
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -54,5 +54,66 @@ $(function(){
         }
   });
 })
+
 </script>
 
+<style type="text/css">
+/*resize the big pic*/
+div.resized_image p {
+  margin: 2px;
+  margin-top: 0;
+  font-size: 8px;
+  /* Awesome icon from here: http://www.famfamfam.com/lab/icons/silk/ */
+  background: url(http://i242.photobucket.com/albums/ff244/9861_omikron/error.png) no-repeat;
+  padding-left: 20px;
+  color: #333;
+}
+</style>
+<script type="text/javascript">
+//resize the big pic
+$(document).ready(function() {
+  (
+    function(maxht, maxwt, minht, minwt) {
+      var imgs = document.getElementsByTagName('img');
+      // Image resizing function
+      var resize_image = function(img, newht, newwt) {
+        img.height = newht;
+        img.width  = newwt;
+        $(img).wrap('<table><tr><td class="tborder"><div class="resized_image"><a href="' + img.src + '" target="_blank"></a></div></td></tr></table>');
+        $(img).parent().before('<p>NOTE: This image was resized. To view it full-size, click on the image.</p>');
+        //$(img).parent().after('<p style="text-align:right;background:none;margin:0;padding-right:3px">Image resizing script by <a href="http://aetus.net/217/programming/automatically-resize-large-images-with-javascript/">Aetus Designs</a>.</p>');
+      };
+      
+      for (var i = 0; i < imgs.length; i++) {
+        // Set a variable for the current image to make the code make more sense.
+        var img = imgs[i];
+        if (img.height > maxht || img.width > maxwt) {
+          // Use Ratios to constraint proportions.
+          var old_ratio = img.height / img.width;
+          var min_ratio = minht / minwt;
+          // If it can scale perfectly.
+          if (old_ratio === min_ratio) {
+            resize_image(img, minht, minwt);
+          } 
+          // We need to do some magic now.
+          else {
+            var newdim = [img.height, img.width];
+            // Sort out the height first.
+            newdim[0] = minht;
+            // The logic behind this is that if ratio = ht / wt, then wt = ht / ratio.
+            newdim[1] = newdim[0] / old_ratio;
+            // Do we still have to sort out the width?
+            if (newdim[1] > maxwt) {
+              // Just do what we did with the height
+              newdim[1] = minwt;
+              newdim[0] = newdim[1] * old_ratio;
+            }
+            // So yeah, resize the image
+            resize_image(img, newdim[0], newdim[1]);
+          }
+        }
+      }
+    }
+  )(780, 780, 0, 0);
+});
+</script>
\ No newline at end of file
diff --git a/_posts/2014/2014-02-01-Flex-real-time-video-app.md b/_posts/2014/2014-02-01-Flex-real-time-video-app.md
index 32616b3..90b9c89 100644
--- a/_posts/2014/2014-02-01-Flex-real-time-video-app.md
+++ b/_posts/2014/2014-02-01-Flex-real-time-video-app.md
@@ -23,6 +23,7 @@ tags:
 > **NOTE:**
 > 需要注意抓包的准确性问题。在服务器上如果用tcpdump抓包，特别是像视频实时应用的时候由于数据量大，tcpdump依赖的底层库可能会来不及处理而buffer溢出，使得数据文件不完整。这样在用wireshark分析的时候会看到的丢包量就是不准确的。
 ![](/media/pic2014/0201-2.png)
+
 解决方法参考[tcpdump抓包丢失问题](http://wenku.baidu.com/view/74b3166e1eb91a37f1115cf6.html)。
 
 在分析抓到的包时我们看到大量的丢包，如下图：
@@ -48,8 +49,10 @@ tags:
 注意标称网速不包括自身的信令消耗，所以150M的WiFi实际数据传输速度超不过80兆。3G消耗的信令可能更多。
 
 #### 如何改进
+=====
 
 **带宽检测**
+
 大多数实时通信程序都会在链接建立前发几个包测试带宽，这种做法在传统网络问题不大（会部分受到tcp slow start的影响）。但是在3G下，这几个包如果不丢，测出的速度会过高，如果有丢包，则测出的速度会过低。
 
 所以在3G下的应用必须在链接建立后实时监测通信质量，如果发现延迟增加等情况要实时降低视频分辨率以保证流畅。
@@ -58,4 +61,5 @@ tags:
 
 
 **UDP**
+
 使用基于UDP的传输协议可以从根本上解决以上问题。