recherche

Maison  >  Article  >  interface Web  >  Explication détaillée de l'implémentation HTML5 de la loupe d'image partielle (réglable) (image et texte)

Explication détaillée de l'implémentation HTML5 de la loupe d'image partielle (réglable) (image et texte)

黄舟
黄舟original
2017-03-25 15:42:064007parcourir

Ce qui suit continue de présenter html5canvascanvas >Magnifying effet verre:

Étapes principales :

1) Chargement des images, il y a www.php.cn/html5-tutorial-358646.html dans le blog précédent, vous devez payer attention à la configuration d'Apache, sinon getImageData() aura des problèmes de sécurité et ne pourra pas s'exécuter

2) Core : mappage entre deux matrices d'images,

Définissez o comme centre du cercle ! , puis transformer Le dernier point A' correspond au point A de l'image originale (c'est l'effet du grossissement !!! Dans cette expérience, le facteur de grossissement est de 2)

3) Par souci de simplicité, la méthode d'interpolation linéaire n'est pas utilisée, directement Round pour obtenir les coordonnées du point 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);
	      }
4) Pour faire ressortir le miroir, réglez le point du bord sur un point noir (c'est-à-dire rgb est 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) S'il y a un point hors limites ou renvoyé à la ligne, ignorez-le (prenez simplement la valeur d'origine) 

		  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) Réglage externe du rayon de la loupe

Utilisez également la fonction canvas et onclick, comme indiqué ci-dessous : 

<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>
Ce qui suit est le code complet : 

<!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>
Attention :

1) N'oubliez pas de définir la largeur et la hauteur de la toile1 sur

Les images sont de la même taille. Si elles sont différentes, vous devez la calculer à nouveau, ce qui est plus gênant.

L'effet est le suivant :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Partage de code d'implémentation du traitement d'image de canevas HTML5Article suivant：Partage de code d'implémentation du traitement d'image de canevas HTML5

Articles Liés

Voir plus