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

主要步驟：

1)圖像的加載，上篇blog里有www.php.cn/html5-tutorial-358646.html，必須注意apache的配置，否則getImageData()會有安全問題而無法運行！！

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

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

3)為了簡便起見，沒有采用線性插值的方法，直接取整獲得A點的坐標。for (var j=0;j

for(var i=0;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函數，如下所示：

&nbsp放大鏡半徑為

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.οnclick=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);

}

下面是完整代碼：

canvas圖像處理

canvas放大鏡

是時候更換瀏覽器了點擊下載firefox

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.οnmοusemοve=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

for(var i=0;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.οnmοuseοut=function(){context1.drawImage(image,0,0);}//鼠標移出，自動重繪

function isIn(x0,y0,x,y,r){//放大區域

if((x0-x)*(x0-x)+(y0-y)*(y0-y)

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;

}

&nbsp放大鏡半徑為

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.οnclick=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

}

Attention:

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

效果如下：

總結

以上是生活随笔為你收集整理的php 图片 放大镜,详解html5实现图像局部放大镜（可调节）（图文）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。