2013年11月11日 星期一

HTML5 Canvas 灰階

img
不支援Canvas。 canvas



<img id="myImg" src=""/>
canvas<canvas height="200" id="myCanvas" width="200">
不支援Canvas。
</canvas>

<input id="myBtn" type="button" value="轉換灰階"/>
<script type="text/javascript">
(function(){
    var canvas,context,img,btn;
    var init = function(){
        canvas = document.getElementById('myCanvas');
        context = canvas.getContext('2d');
        btn = document.getElementById('myBtn');
        img = document.getElementById('myImg');
        img.addEventListener('load' ,loadHandler , false);
       
    };
   
    var loadHandler = function(e){
      btn.addEventListener('click' , converterToGray,false);
    };
   
    var converterToGray = function(e){
       context.drawImage(img , 0, 0);
        var imgData = context.getImageData(0, 0, canvas.width, canvas.height);
        var data = imgData.data;
        var dataSize = data.length;
       
        // console.log(imgData);  is data: Uint8ClampedArray[160000]
        for (var i = 0; i < dataSize ; i=i+4) {
                    var r = data[i] ;
                    var g = data[i + 1];
                    var b = data[i + 2];
                    //灰階主要計算公式
                    data[i] = (r * 0.272) + (g * 0.534) + (b * 0.131);
                    data[i + 1] = (r * 0.349) + (g * 0.686) + (b * 0.168);
                    data[i + 2] = (r * 0.393) + (g * 0.769) + (b * 0.189);
        }
        context.putImageData(imgData, 0, 0);
    };
    init();  
}());
</script>

2013年7月16日 星期二

Jsrender + superfish DEMO

navigate.html
<script id="navigate" type="text/x-jsrender">           
    <li>
        <a href="{{:url}}">{{:name}}</a>
        {{if childList != null && childList.length > 0}}
             <ul>
                {{for childList tmpl='#navigate' }}
                {{/for}}
             </ul>
        {{/if}}
    </li>

</script>​

navigateData.json
[{"name":"men","url":"#","id":"001","childList":[
            {"name":"衣服","url":"#","id":"100","childList":[
                {"name":"夏威夷風","url":"#","id":"100","childList":null},
                {"name":"日本風","url":"#","id":"200","childList":null}
                ]},
            {"name":"褲子","url":"#","id":"200","childList":null}]},
    {"name":"kinds","url":"#","id":"002","childList":[
            {"name":"衣服","url":"#","id":"100","childList":null},
            {"name":"褲子","url":"#","id":"200","childList":null}]},
    {"name":"woman","url":"#","id":"003","childList":[
            {"name":"衣服","url":"#","id":"100","childList":null},
            {"name":"褲子","url":"#","id":"200","childList":null}]}] 

index.html
<!DOCTYPE html>
<html>
    <head id="docHead">
        <title>Jsrender + superfish DEMO</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="content-language" content="zh-TW">
        <!--include Jquery superfish plugin of css-->
        <link rel="stylesheet" href="css/superfish.css"/>
    </head>
    <body>
        <div></div>
        <!--menu-->
        <ul class="sf-menu">          
        </ul>  
        <!--include Jquery-->
        <script src="lib/jquery-1.10.2.min.js" type="text/javascript"></script>
        <!--incude templates Engine-->
        <script src="lib/jsrender.min.js" type="text/javascript"></script>
        <!--incude Jquery superfish menu plugin-->
        <script src="lib/hoverIntent.js" type="text/javascript"></script>
        <script src="lib/supersubs.js" type="text/javascript"></script>
        <!--process-->
        <script type="text/javascript">
            (function(window, undefined) {
                //test for chrome or firefox
                //console.log(window);
                var loadTemplates = function() {
                     $.get("./templates/navigate.html", function(data) {                        
                           $("#docHead").append(data);
                            getNavigateData();
                      }); 
                };

                var getNavigateData = function() {
                      $.get('./data/navigateData.json', function(result) {                        
                         //console.log(result);
                          $(".sf-menu").html($('#navigate').render(result));
                       },"json");
                };

                var init = function() {
                    loadTemplates();
                }
                init();
            })(window);
        </script>
    </body>    
</html>
















參考資料:



2013年6月30日 星期日

Jsoup Java 網路爬蟲套件

使用Jsoup 來分析HTML頁面

使用範例:

import java.net.URL;
import java.util.Iterator;

import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;

public class JsoupCrawlerUT {

public static void main(String[] args)  throws Exception{

//URL 以yahoo股票為測試
        URL url = new URL("http://tw.stock.yahoo.com/q/q?s=2002");
        
        /*
         * 向網頁伺服發出請求,並將回應分析成document。
         * 第一個參數是:請求位置與QueryString。
         * 第二個參數是:連線時間(毫秒),在指定時間內若無回應則會丟出IOException
         */       
        Document doc = Jsoup.parse(url, 3000);
        
        //取回所center下所有的table
        Elements tables = doc.select("center>table");
        
        Iterator iterator;
        
        //print all table 
        /*
        for(Element table : tables)
        {
            //get td Iterator
        iterator = table.select("td").iterator();           
           
            while(iterator.hasNext())
            {               
                System.out.println("data" + ": " + iterator.next().text().trim());
            }        
        } 
        */        
        System.out.println("--------------------------------------------------");        
        Element  table;
        
     //取標頭
        table = tables.get(1).select("table").get(0);        
        iterator = table.select("th").iterator();       
        while(iterator.hasNext())
        {               
            System.out.println("data" + ": " + iterator.next().text().trim());
        } 
        
        System.out.println("--------------------------------------------------");  
        
        //取內容        
        //取索引1的table
        table = tables.get(1).select("table").get(1);
        
        //get td Iterator
     iterator = table.select("td").iterator();       
        while(iterator.hasNext())
        {               
            System.out.println("data" + ": " + iterator.next().text().trim());
        }         
  }
}


輸出:

2013年6月26日 星期三

關於Java JFrame 常用功能


JFrame就是Java桌面的應用程序視窗。

※設定關閉JFrame後的動作:

  • setDefaultCloseOperation(EXIT_ON_CLOSE);
  • 會呼叫系統的Exit method,如此才會釋放OS的記憶體。

是否能夠讓使用者改變視窗大小:

  • setResizable(false);
  • false將不可以改變大小,true可以。


設定JFrame的ICON:
  • setIconImage(new ImageIcon("your image path").getImage());
  • 路徑範例: "images\\frame_icon.png"

設定寬高:
  • setSize(500, 400);

設定視窗顯現:
  • setVisible(true);

※焦點設定到JFrame上
  • setFocusable(true);

※取消組件的Focus效用
  • setFocusable(false);

btn.setFocusPainted(false);


※注意若要使用JFrame的KeyListener事件,那麼Focus一定要在JFrame上才有作用。

※其他組件必須取消或得Focus或是當其他組件事件發生完畢,必須將Focus設定回JFrame。






Java 計算String在畫面上的Width

案例:想知道字串在畫面上的width是否會超出Label的Width。

使用:
  1. 使用Componet中的 FontMetrics getFontMetrics(Font font) 方法取回FontMetrics。
  2. 使用FontMetrics中的int stringWidth(String str) 取回字串寬度。

Componet的名稱空間:

 java.lang.Object
    extended by java.awt.Component

FontMetrics的名稱空間:


範例:

2013年5月10日 星期五

MS-SQL 查詢目前正在使用的database

使用原因說明:

  • 在對database做任何操作前,必須先確定所在database,要不然就會發生斷錯資料庫、資料表建錯地方等等。

查詢目前用正用哪個資料庫語法:
  • SELECT @@DB_NAME();
使用範例:

 1> SELECT DB_NAME()
 2> GO


 ------------------------------------
 --------
 master