首頁 > web前端 > H5教程 > 主體

詳解html5實現影像局部放大鏡(可調節)(圖文)

黄舟
發布: 2017-03-25 15:42:06
原創
4006 人瀏覽過

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

主要步驟:

1)圖像的加載,上篇blog裡有www.php.cn/html5-tutorial-358646.html,必須注意apache的配置,否則getImageData()會有安全問題而無法運作!後的點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(&#39;x:&#39;+x+&#39;y:&#39;+y);
	      }
登入後複製

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

同樣利用canvas以及onclick函數,如下所示:

	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;
			  }
登入後複製

Attention:

#1)記得將canvas1的寬高設定和

圖片

大小相同,如不同,還要在進行以此計算,比較麻煩;

效果如下:

以上是詳解html5實現影像局部放大鏡(可調節)(圖文)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板