Detaillierte Erläuterung der HTML5-Implementierung der Teilbildlupe (einstellbar) (Bild und Text)-H5-Tutorial-php.cn

Detaillierte Erläuterung der HTML5-Implementierung der Teilbildlupe (einstellbar) (Bild und Text)

黄舟

Freigeben： 2017-03-25 15:42:06

Original

4012 Leute haben es durchsucht

Im Folgenden wird weiterhin html5canvascanvas >Vergrößerung vorgestellt Glaseffekt:

Hauptschritte:

1) Laden von Bildern, es gibt www.php.cn/html5-tutorial-358646.html im vorherigen Blog, Sie müssen bezahlen Achten Sie auf die Apache-Konfiguration, sonst hat getImageData() Sicherheitsprobleme und kann nicht ausgeführt werden!

2) Kern: Zuordnung zwischen zwei Bildmatrizen,

Setzen Sie o als Mittelpunkt des Kreises , dann transformieren. Der letzte Punkt A' entspricht Punkt A des Originalbildes (dies ist der Effekt der Vergrößerung!!! In diesem Experiment beträgt der Vergrößerungsfaktor 2)

3) Der Einfachheit halber, Die lineare Interpolationsmethode wird nicht verwendet, direkt runden, um die Koordinaten von Punkt A zu erhalten

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);
	      }

Nach dem Login kopieren

4) Um den Spiegel hervorzuheben, setzen Sie den Punkt am Rand auf einen schwarzen Punkt (d. h. RGB). ist 0)

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

Nach dem Login kopieren

	       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;
			  }

Nach dem Login kopieren

5) Wenn es einen Punkt außerhalb der Grenzen oder einen umbrochenen Punkt gibt, ignorieren Sie ihn (nehmen Sie einfach den ursprünglichen Wert)

		  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;
		  }

Nach dem Login kopieren

6) Externe Einstellung des Lupenradius

Verwenden Sie auch die Canvas- und Onclick-Funktion, wie unten gezeigt:

<canvas id="bar" height="30" width="305"></canvas>
&nbsp放大镜半径为<span id=&#39;r&#39;></span>
<script>
var canvas2=document.getElementById(&#39;bar&#39;);
var context2=canvas2.getContext(&#39;2d&#39;);
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(&#39;r&#39;).innerHTML=Math.floor(x1/6);
     r=Math.floor(x1/6);
}
</script>

Nach dem Login kopieren

Das Folgende ist der vollständige Code:

<!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(&#39;canvas1&#39;);
    var context1=canvas1.getContext(&#39;2d&#39;);
    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(&#39;x:&#39;+x+&#39;y:&#39;+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(&#39;x:&#39;+x+&#39;y:&#39;+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=&#39;r&#39;></span>
<script>
var canvas2=document.getElementById(&#39;bar&#39;);
var context2=canvas2.getContext(&#39;2d&#39;);
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(&#39;r&#39;).innerHTML=Math.floor(x1/6);
     r=Math.floor(x1/6);//一个划算，使得最大半径为50px
}
</script>
</body>  
</html>

Nach dem Login kopieren

Achtung:

1) Denken Sie daran, die Breite und Höhe von Leinwand1 auf

Die Bilder festzulegen. Wenn sie unterschiedlich sind, müssen Sie sie erneut berechnen, was aufwändiger ist ;

Der Effekt ist wie folgt:

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der HTML5-Implementierung der Teilbildlupe (einstellbar) (Bild und Text). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!