facebook藍勾勾產生器 @ 漫遊於歷史與現代之間

想要當有認證的名人嗎？可以過個乾癮，自己在封面圖上直接加個藍勾勾喔。但是畢竟是假的，顏色有點不同，而且使用手機瀏覽就破功了，趣味一下吧！

201511143 我不太熟悉javascript搭canvas使用，一行一行寫我寫不出來，所以是直接找網路上的範本，使用了「小賴的實戰記錄」的〈JavaScript - 圖片合成、堆疊〉提供的程式碼，看他圖片的網址，可能也是參考其他網站，我就不追本溯源了。實測一下，電腦版的firefox和chrome都沒問題，IE和手機chrome好像開得出來，抓不下來。

直接前往網站：http://studentweb.ncnu.edu.tw/100105503/funny/bluehook.php

以下是程式碼，除了調整高低以外，我主要修改的部分就只是48和49行的圖片參數，然後用php寫一個post傳值，讓使用者可以自己帶入圖片，如果使用者沒帶入圖片，一開始會先載入預設圖，post傳值的php語法很普通，無須多解釋。考慮到有的人名字二個字或更長，改天有空再加一個調整藍勾勾水平位置的按鈕。

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
      #divContext {
	    position:absolute;
		left:100px;
		top:100px;		
      }
    </style>
    <script>
      function loadImages(sources, callback) {
        var images = {};
        var loadedImages = 0;
        var numImages = 0;
        // get num of sources
        for(var src in sources) {
          numImages++;
        }
        for(var src in sources) {
          images[src] = new Image();
          images[src].onload = function() {
            if(++loadedImages >= numImages) {
              callback(images);
            }
          };
          images[src].src = sources[src];
        }
      }

      window.onload = function(images) {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

        var sources = {
          darthVader: "http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg",
          yoda: "http://www.html5canvastutorials.com/demos/assets/yoda.jpg"
        };

        loadImages(sources, function(images) {
		  context.drawImage(images.darthVader, 100, 30, 200, 137);
		  context.drawImage(images.yoda, 250, 55, 93, 104);                    
        });
      };

    </script>
  </head>
  <body>
    <div id="divContext">
		<canvas id="myCanvas" width="578" height="200"></canvas>
	</div>    
  </body>
</html>