html5 圖像局部放大鏡（可調節）

下面繼續介紹基於html5畫布canvas的放大鏡效果：

主要步驟：

1）圖像的加載，上篇blog裏有http://www.cnblogs.com/blue-lg/archive/2011/12/23/2299019.html，必須注意apache的配置，否則getImageData()會有安全問題而無法運行！！

2）核心：兩個圖像矩陣間的映射，

設o爲圓心，則變換後的點A‘對應的是原圖像的A點（此乃放大的效果！！！本實驗取放大倍數爲2）

3）爲了簡便起見，沒有采用線性插值的方法，直接取整獲得A點的座標。

for (var j=0;j<image.height;j++){
	     for(var i=0;i<image.width;i++){
		   var k=4*(image.width*j+i);
		   var k1=4*(image.width*Math.floor((j+y0)/2)+Math.floor((i+x0)/2));
                   ...
                    else if(isIn(x0,y0,i,j,r)){//isIn()判定點是否在園內
			  if(k1>=0&&k1<=4*image.height*image.width){
		      imagedata2.data[k+0]=imagedata1.data[k1+0];
			  imagedata2.data[k+1]=imagedata1.data[k1+1];
			  imagedata2.data[k+2]=imagedata1.data[k1+2];
			  imagedata2.data[k+3]=255;
			 // console.log('x:'+x+'y:'+y);
	      }

4）爲使鏡子凸顯，設定邊緣處點爲一黑點（即rgb均爲0）

	function isOn(x0,y0,x,y,r){//放大鏡邊緣
	    if((x0-x)*(x0-x)+(y0-y)*(y0-y)==r*r)
		  return true;
		else
		  return false;
	}

	       if (isOn(x0,y0,i,j,r)){
		      imagedata2.data[k+0]=0;
			  imagedata2.data[k+1]=0;
			  imagedata2.data[k+2]=0;
			  imagedata2.data[k+3]=255;
			  }

　5）越界或者換行的點（若存在），忽略之（取原值即可）

		  else{
		      imagedata2.data[k+0]=imagedata1.data[k+0];
			  imagedata2.data[k+1]=imagedata1.data[k+1];
			  imagedata2.data[k+2]=imagedata1.data[k+2];
			  imagedata2.data[k+3]=255;
		  }

　6）放大鏡半徑的外界設定

同樣利用canvas以及onclick函數，如下所示：

<canvas id="bar" height="30" width="305"></canvas>
&nbsp放大鏡半徑爲<span id='r'></span>
<script>
var canvas2=document.getElementById('bar');
var context2=canvas2.getContext('2d');
context2.beginPath();
context2.lineWidth = 1;//邊框寬度                           
context2.strokeStyle = "#ff00ff";//邊框顏色
context2.strokeRect(10,0,295,28);//邊框座標及大小
context2.closePath();
canvas2.onclick=function(e){
     var x1=e.clientX-e.target.offsetLeft;
     context2.clearRect(0,0,305,30);//擦除上次的痕跡
     context2.beginPath();
     context2.lineWidth = 1;//邊框寬度                           
     context2.strokeStyle = "#ff00ff";//邊框顏色
     context2.strokeRect(10,0,295,28);//邊框座標及大小
     context2.fillStyle = "#00ff00";//填充canvas的背景顏色
     context2.fillRect(0, 0, x1,28);//參數分別表示 x軸,y軸,寬度,高度
     document.getElementById('r').innerHTML=Math.floor(x1/6);
     r=Math.floor(x1/6);
}
</script>

下面是完整代碼：

<!DOCTYPE html>   
<html>
<head>   
<title>canvas圖像處理</title>  
</head>  
<body>  
<h1>canvas放大鏡</h1>  
<canvas  id="canvas1" width="600" height="450">是時候更換瀏覽器了<a href="http://firefox.com.cn/download/">點擊下載firefox</a></canvas>

<!--當瀏覽器不支持html5時，會顯示連接提示下載firefox-->
<script>
    var canvas1=document.getElementById('canvas1');
    var context1=canvas1.getContext('2d');
    image=new Image();
    image.src="photo.jpg";
    context1.drawImage(image,0,0);//繪製原始圖像，（0,0）表示圖像的左上角位與canvas畫布的位置
var imagedata1=context1.getImageData(0,0,image.width,image.height);
    var imagedata2=context1.createImageData(image.width,image.height);    
    r=40;//放大鏡半徑,原始默認值，可以通過最下面的進度條設置
    canvas1.onmousemove=function(e){
       var x=e.clientX-e.target.offsetLeft;
       var y=e.clientY-e.target.offsetTop;
       x0=x;y0=y;
       //console.log('x:'+x+'y:'+y);
for (var j=0;j<image.height;j++){
         for(var i=0;i<image.width;i++){
           var k=4*(image.width*j+i);
           var k1=4*(image.width*Math.floor((j+y0)/2)+Math.floor((i+x0)/2));//對應的原始圖像上的點
           if (isOn(x0,y0,i,j,r)){//放大鏡邊緣上的點

              imagedata2.data[k+0]=0;
              imagedata2.data[k+1]=0;
              imagedata2.data[k+2]=0;
              imagedata2.data[k+3]=255;
              }
           else if(isIn(x0,y0,i,j,r)){//放大區域的點
              if(k1>=0&&k1<=4*image.height*image.width){//放大效果的的時候，這一步其實可以省略
              imagedata2.data[k+0]=imagedata1.data[k1+0];
              imagedata2.data[k+1]=imagedata1.data[k1+1];
              imagedata2.data[k+2]=imagedata1.data[k1+2];
              imagedata2.data[k+3]=255;
             // console.log('x:'+x+'y:'+y);
          }
          }
          else{//其他剩下不受影響的點
              imagedata2.data[k+0]=imagedata1.data[k+0];
              imagedata2.data[k+1]=imagedata1.data[k+1];
              imagedata2.data[k+2]=imagedata1.data[k+2];
              imagedata2.data[k+3]=255;
          }
       }}
       context1.putImageData(imagedata2,0,0);//canvas顯示
    }
    canvas1.onmouseout=function(){context1.drawImage(image,0,0);}//鼠標移出，自動重繪
    function isIn(x0,y0,x,y,r){//放大區域
if((x0-x)*(x0-x)+(y0-y)*(y0-y)<r*r)
          return true;
        else
          return false;
    }
    function isOn(x0,y0,x,y,r){//放大鏡邊緣
if((x0-x)*(x0-x)+(y0-y)*(y0-y)==r*r)
          return true;
        else
          return false;
    }
    </script>
    <br/>
<canvas id="bar" height="30" width="305"></canvas>
&nbsp放大鏡半徑爲<span id='r'></span>
<script>
var canvas2=document.getElementById('bar');
var context2=canvas2.getContext('2d');
context2.beginPath();
context2.lineWidth = 1;//邊框寬度                           
context2.strokeStyle = "#ff00ff";//邊框顏色
context2.strokeRect(10,0,295,28);//邊框座標及大小
context2.closePath();
canvas2.onclick=function(e){
     var x1=e.clientX-e.target.offsetLeft;
     context2.clearRect(0,0,305,30);
     context2.beginPath();
     context2.lineWidth = 1;//邊框寬度                           
     context2.strokeStyle = "#ff00ff";//邊框顏色
     context2.strokeRect(10,0,295,28);//邊框座標及大小
     context2.fillStyle = "#00ff00";//填充canvas的背景顏色
     context2.fillRect(0, 0, x1,28);//參數分別表示 x軸,y軸,寬度,高度
     document.getElementById('r').innerHTML=Math.floor(x1/6);
     r=Math.floor(x1/6);//一個划算，使得最大半徑爲50px
}
</script>
</body>  
</html>

Attention:

1)記得將canvas1的寬高設置和圖片大小相同，如不同，還要在進行以此計算，比較麻煩;

效果如下：

如有不妥，還請指正！

轉載請註明：

http://www.cnblogs.com/blue-lg/archive/2011/12/23/2299464.html

html5 圖像局部放大鏡（可調節）

Lost Red Rose

簡易版 html5 撕掉mm的衣服

純javascript版天氣預報

簡單的基於YCrCb顏色空間的人臉檢測（膚色）

html5 圖像局部放大鏡（可調節）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結