Une introduction à l'utilisation de Canvas pour traiter des images

Cet article présente principalement comment utiliser Canvas pour traiter des images. Le contenu est plutôt bon. Maintenant, je le partage avec vous et le donne comme référence.

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.

Aujourd'hui, nous ne parlerons pas de dessin graphique dans Canvas, mais de comment traiter des images.

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

Oui, c'est aussi simple que de mettre un éléphant au réfrigérateur, haha .

1. API principales

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

1. Dessiner des images : drawImage( )

2. Obtenir les données d'image : getImageData()

3. Réécrire les données d'image : putImageData()

4. Exporter l'image : toDataURL()

1. drawImage()

Comme son nom l'indique, cette méthode est utilisée pour dessiner l'image sur le canevas Canvas Parmi eux, il existe trois utilisations spécifiques :

① Positionner l'image sur le canevas : context.drawImage(img,x,y)
② Positionner l'image sur le canevas et préciser la largeur et hauteur de l'image : context. drawImage(img,x,y,width,height)
③ Coupez l'image et positionnez la partie coupée sur le canevas : context.drawImage(img,sx,sy,swidth,sheight, x,y,width,height)

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ée pour récupérer des données du canevas. Obtenez des données d'image, 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 dans le tableau suivant :

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

Cette méthode renverra un objet ImageData. Cet objet a trois attributs : width, height. et les données. La chose la plus importante que nous utilisons est ce tableau de données, car il enregistre chaque élément de l'image. 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 de l'image dans le canevas Canvas. 🎜>

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

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

4. toDataURL()

这个方法与以上三种方法不同，它是Canvas对象的方法，该方法返回的是一个包含data URI的字符串，该字符串可直接作为图片路径地址填入标签的src属性当中，具体用法如下：

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

以上参数值描述如下表：

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

二、图片处理实例

本实例将通过代码简单介绍如何把彩色图片处理成黑白图片。

<!--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 = &#39;&#39;;
            result.appendChild(newImg);
        };
    };
};

可能上面代码写得不是很好，看起来也不是那么好理解，最好自己能够亲自写一写，这样对于自己理解会更加深刻一些。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

HTML5 Plus 实现手机APP拍照或相册选择图片上传的功能

利用HTML5中的Canvas绘制笑脸的代码

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!