Comment utiliser Canvas pour traiter des images

Canvas, traduit par « canvas » en chinois, possède un nouvel élément en HTML5, qui peut être combiné avec JavaScript pour dessiner dynamiquement des graphiques dans le canevas. Cet article présente principalement à Hejia les informations pertinentes sur l'utilisation de Canvas pour traiter des images. L'article le présente de manière très détaillée à travers un exemple de code. Il a une certaine valeur d'apprentissage de référence pour l'étude ou le travail de chacun.

Le processus est probablement très simple, principalement divisé en trois étapes suivantes :

Traitement d'image sur toile

Oui, tout comme un grand C'est aussi simple que de le mettre au réfrigérateur, haha.

1. API principales

Les principales API Canvas utilisées dans l'ensemble du processus sont :

• Dessiner des images : drawImage()

• Obtenir les données de l'image : getImageData()

• Réécrire les données de l'image : putImageData()

• Exporter l'image : toDataURL ( )

1. drawImage()

Comme son nom l'indique, cette méthode est utilisée pour dessiner des images dans le canevas Canvas. Il existe trois utilisations spécifiques :

① Positionnez l'image sur le canevas : context.drawImage(img,x,y)

② Positionnez l'image sur le canevas et précisez la largeur et la hauteur de l'image : context.drawImage (img,x, y,width,height)

③ Coupez l'image et positionnez la partie coupée sur la toile : context.drawImage(img,sx,sy,swidth,sheight,x,y ,largeur,hauteur)

Les valeurs des paramètres ci-dessus sont décrites dans le tableau suivant :

参数	描述
img	规定要使用的图像、画布或视频。
sx	可选。开始剪切的 x 坐标位置。
sy	可选。开始剪切的 y 坐标位置。
swidth	可选。被剪切图像的宽度。
sheight	可选。被剪切图像的高度。
x	在画布上放置图像的 x 坐标位置。
y	在画布上放置图像的 y 坐标位置。
width	可选。要使用的图像的宽度。（伸展或缩小图像）
height	可选。要使用的图像的高度。（伸展或缩小图像）

2. getImageData()

Cette méthode est utilisé pour obtenir des données d'image à partir du canevas Canvas, l'utilisation spécifique est la suivante :

Obtenez les données de pixels dans la plage rectangulaire spécifiée du canevas : var ImageData = context.getImageData(x,y,width,height )

Les valeurs des paramètres ci-dessus sont décrites comme suit dans le tableau :

参数	描述
x	开始复制的左上角位置的 x 坐标。
y	开始复制的左上角位置的 y 坐标。
width	将要复制的矩形区域的宽度。
height	将要复制的矩形区域的高度。

Cette méthode renverra un objet ImageData, qui possède trois propriétés : largeur, hauteur et données, et ce que nous utilisons principalement, c'est ce tableau de données, car il enregistre les données d'image pour chaque pixel. Après avoir obtenu ces données, nous pouvons les traiter, et enfin les réécrire dans le canevas Canvas, réalisant ainsi le traitement et la conversion des images. Pour l'utilisation spécifique du tableau de données, nous pouvons le voir dans les exemples suivants.

3. putImageData()

Cette méthode est très simple, elle est utilisée pour réécrire les données d'image dans le canevas Canvas. L'utilisation spécifique est la suivante :

contexte. putImageData(imgData ,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight)

Les valeurs des paramètres ci-dessus sont décrites dans le tableau suivant :

参数	描述
imgData	规定要放回画布的 ImageData 对象。
x	ImageData 对象左上角的 x 坐标，以像素计。
y	ImageData 对象左上角的 y 坐标，以像素计。
dirtyX	可选。水平值（x），以像素计，在画布上放置图像的位置。
dirtyY	可选。水平值（y），以像素计，在画布上放置图像的位置。
dirtyWidth	可选。在画布上绘制图像所使用的宽度。
dirtyHeight	可选。在画布上绘制图像所使用的高度。

4. toDataURL()

Cette méthode est différente des trois méthodes ci-dessus. Il s'agit d'une méthode de l'objet Canvas. Cette méthode renvoie une chaîne contenant l'URI des données, qui peut être directement utilisée comme un. image. L'adresse du chemin est renseignée dans l'attribut src de la balise . L'utilisation spécifique est la suivante :

var dataURL = canvas.toDataURL(type, encoderOptions);

.

Les valeurs des paramètres ci-dessus sont décrites comme suit :

参数	描述
type	可选。图片格式，默认为 image/png。
encoderOptions	可选。在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。

2. Exemple de traitement d'image

Cet exemple présentera brièvement comment traiter des images couleur en images noir et blanc grâce au code.

<!--HTML-->
<canvas id="canvas" width="600" height="600"></canvas>
<input id="handle" type="button" value="处理图片" />
<input id="create" type="button" value="生成图片" />
<p id="result"></p>

//JavaScript
window.onload = function(){
  var canvas = document.getElementById("canvas"),  //获取Canvas画布对象
    context = canvas.getContext('2d'); //获取2D上下文对象，大多数Canvas API均为此对象方法
  var image = new Image(); //定义一个图片对象
  image.src = 'imgs/img.jpg'; 
  image.onload = function(){ //此处必须注意！后面所有操作均需在图片加载成功后执行，否则图片将处理无效
    context.drawImage(image,0,0); //将图片从Canvas画布的左上角(0,0)位置开始绘制，大小默认为图片实际大小
    var handle = document.getElementById("handle");
    var create = document.getElementById("create");
    handle.onclick = function(){ // 单击“处理图片”按钮，处理图片
      var imgData = context.getImageData(0,0,canvas.width,canvas.height);  //获取图片数据对象
      var data = imgData.data; //获取图片数据数组，该数组中每个像素用4个元素来保存，分别表示红、绿、蓝和透明度值
      var average = 0;
      for (var i = 0; i < data.length; i+=4) {
        average = Math.floor((data[i]+data[i+1]+data[i+2])/3); //将红、绿、蓝色值求平均值后得到灰度值
        data[i] = data[i+1] = data[i+2] = average; 将每个像素点的色值重写
      }
      imgData.data = data;
      context.putImageData(imgData,0,0); //将处理后的图像数据重写至Canvas画布，此时画布中图像变为黑白色
    };
    create.onclick = function(){ // 单击“生成图片”按钮，导出图片
      var imgSrc = canvas.toDataURL(); //获取图片的DataURL
      var newImg = new Image();
      var result = document.getElementById("result");
      newImg.src = imgSrc; //将图片路径赋值给src
      result.innerHTML = '';
      result.appendChild(newImg);
    };
  };
};

Recommandations associées :

Traitement d'images Canvas

Traitement d'images PHP Un exemple de combiner plusieurs images en une seule

traitement d'images sur toile

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!