Introduction to how to use Canvas to process images

This article mainly introduces how to use Canvas to process images. The content is quite good. I will share it with you now and give it as a reference.

Canvas, translated as "canvas" in Chinese, has a new element in HTML5, which can be combined with JavaScript to dynamically draw graphics in the canvas.

Today, we will not talk about graphics drawing in Canvas, but how to process pictures.

The process is probably very simple, mainly divided into the following three steps:

Yes, it is as simple as putting an elephant into the refrigerator, haha.

1. Main API

The main Canvas APIs used in the entire process are:

1. Drawing images: drawImage( )

2. Get image data: getImageData()

3. Rewrite image data: putImageData()

4. Export image: toDataURL()

1. drawImage()

As the name suggests, this method is used to draw the image on the Canvas canvas Among them, there are three specific usages:

① Position the image on the canvas: context.drawImage(img,x,y)
② Position the image on the canvas and specify the width and height of the image: context. drawImage(img,x,y,width,height)
③ Cut the image and position the cut part on the canvas: context.drawImage(img,sx,sy,swidth,sheight,x,y,width ,height)

The above parameter values ​​are described in the following table:

Parameter	Description
img	Specifies the image, canvas, or video to use.
sx	Optional. The x-coordinate position at which to start shearing.
sy	Optional. The y-coordinate position to start shearing.
swidth	Optional. The width of the cropped image.
sheight	Optional. The height of the clipped image.
x	Place the x coordinate position of the image on the canvas.
y	Place the y coordinate position of the image on the canvas.
width	Optional. The width of the image to use. (Stretch or shrink the image)
height	Optional. The height of the image to use. (Stretch or shrink the image)

2. getImageData()

This method is used to get image data from the Canvas canvas, The specific usage is as follows:

Get the pixel data within the specified rectangular range of the canvas: var ImageData = context.getImageData(x,y,width,height)
The above parameter values ​​are described in the following table:

Parameters	Description
x	The x at the upper left corner to start copying coordinate.
y	The y coordinate of the upper left corner to start copying.
width	The width of the rectangular area to be copied.
height	The height of the rectangular area to be copied.

This method will return an ImageData object, which has three properties: width, height and data, and what we mainly use is this data array, because It holds data for each pixel in the image. After having these data, we can process them, and finally rewrite them into the Canvas canvas, thus realizing the processing and conversion of the pictures. For the specific usage of the data array, we can see it in the following examples.

3. putImageData()

This method is very simple, it is used to rewrite the image data into the Canvas canvas. The specific usage is as follows:

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

The above parameter values ​​are described in the following table:

Parameter	Description
imgData	Specifies the ImageData object to be put back into the canvas.
x	ImageData The x-coordinate of the upper left corner of the object, in pixels.
y	ImageData The y-coordinate of the upper left corner of the object, in pixels.
dirtyX	Optional. Horizontal value (x), in pixels, where to place the image on the canvas.
dirtyY	Optional. Horizontal value (y), in pixels, where to place the image on the canvas.
dirtyWidth	Optional. The width used to draw the image on the canvas.
dirtyHeight	Optional. The height at which the image is drawn on the canvas.

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绘制笑脸的代码

The above is the detailed content of Introduction to how to use Canvas to process images. For more information, please follow other related articles on the PHP Chinese website!