Mazic Zoom By HTML5　Canvas

MagicZoomCanvas.js

function MagicZoomCanvas(parm){
 var FinderCanvas = document.getElementById(parm.FinderCanvasId);
 var FinderCanvasCtx = FinderCanvas.getContext('2d');
 FinderCanvas.width = FinderCanvas.getAttribute("width");
 FinderCanvas.height = FinderCanvas.getAttribute("height");

 var FinderBoxW = parm.FinderBoxW;
 var FinderBoxH = parm.FinderBoxH;
 var FinderBoxX = 0;
 var FinderBoxY = 0;
 var FinderImg;

 var ViewerCanvas = document.getElementById(parm.ViewerCanvasId);
 ViewerCanvas.width = ViewerCanvas.getAttribute("width");
 ViewerCanvas.height = ViewerCanvas.getAttribute("height");
 var ViewerCanvasCtx = ViewerCanvas.getContext('2d');

 var image = new Image();
 var imageW,imageH,multiX,multiY,multiW,multiH;
 image.src = parm.ImageSrc + "?" + new Date().getTime();
 image.addEventListener('load',imageload,false);

 function imageload(event){

  var target = event.target;
  imageW = target.naturalWidth,imageH = target.naturalHeight;
  multiX = imageW / FinderCanvas.width , multiY = imageH / FinderCanvas.height ;
  multiW = Math.floor(multiX * FinderBoxW);
  multiH = Math.floor(multiY * FinderBoxH);

  FinderCanvasCtx.drawImage(image,0,0,FinderCanvas.width,FinderCanvas.height);
  FinderImg = FinderCanvasCtx.getImageData(0,0,FinderCanvas.width,FinderCanvas.height);
  
  drowFinderBox(0,0);

  FinderCanvas.addEventListener("mousemove",finderMove,false);

 }

 function drowFinderBox(x,y){

  FinderCanvasCtx.clearRect(FinderBoxX,FinderBoxY,FinderBoxW,FinderBoxH);
  FinderCanvasCtx.globalAlpha = 1;
  FinderCanvasCtx.putImageData(FinderImg,0,0);
  FinderCanvasCtx.globalAlpha = 0.2;
  FinderCanvasCtx.fillStyle = "gray";
  FinderCanvasCtx.fillRect(x,y,FinderBoxW,FinderBoxW);
  FinderBoxX = x;
  FinderBoxY = y;

  drowViewerBox(x,y);

 }

 function drowViewerBox(x,y){

  var sx = Math.floor(x * multiX);
  var sy = Math.floor(y * multiY);
  ViewerCanvasCtx.clearRect(0,0,ViewerCanvas.width,ViewerCanvas.height);
  ViewerCanvasCtx.drawImage(image,Math.floor(x * multiX),Math.floor(y * multiY),
                      multiW,multiH,0,0,ViewerCanvas.width,ViewerCanvas.height);

 }

 function finderMove(event){

  var FinderCanvasRect = event.target.getBoundingClientRect();
  var mouseX = event.clientX - Math.floor(FinderCanvasRect.left); 
  var mouseY = event.clientY - Math.floor(FinderCanvasRect.top);
  var x = mouseX - Math.floor(FinderBoxW / 2);
  var y = mouseY - Math.floor(FinderBoxH / 2);
  x = (0>x)?0:x;
  x = ((FinderCanvas.width - FinderBoxW)<x)?FinderCanvas.width - FinderBoxW:x;
  y = (0>y)?0:y;
  y = ((FinderCanvas.height - FinderBoxH)<y)?FinderCanvas.height - FinderBoxH:y;

  drowFinderBox(x,y);
 }

 function finderEnd(){
  FinderCanvasCtx = ViewerCanvasCtx = null;
  FinderCanvas = ViewerCanvas = null;
  FinderCanvas.removeEventListener("mousemove",finderMove,false);
  image = null;
  image.removeEventListener('load',imageload,false); 
 }

 document.defaultView.addEventListener("unload",finderEnd,false);
}

MagicZoomCanvas(
   {FinderCanvasId:"FinderCanvas",
    ViewerCanvasId:"ViewerCanvas",
    FinderBoxW:50,
    FinderBoxH:50,
    ImageSrc:"/image/unidon.jpg"
   }
);

HTML5　canvas,naturalWidth,naturalHight が使えないとだめ。
Firefox 3.6　、Google Chrome　8.05　で動作確認
デモ（うに丼のマジックズーム）
http://yoneyone.zymichost.com/test/CanvasZoom.htm

メモリーリーク対策
finderEnd()追加、いいのかなあ

Internet Explorer リーク パターンを理解して解決する のことだとしたら、このスクリプトは IE6 で動作しないのでリークパターンを考慮する必要はない気が…。
ひょっとして、ExplorerCanvas を使うことを前提にしているのでしょうか？

＝＞いやいや、今回IEは無視です。スクリプトエンジンが管轄する物と、DOMプロセッサが管轄する物を混ぜちゃいけないって聞きましたけど、クロージャーになってなければ循環参照が断ち切れるって事でしょうかねえ。理解不足でお恥ずかしい。