Wie Canvas mit Bildern umgeht

Canvas, auf Chinesisch als „Leinwand“ übersetzt, verfügt in HTML5 über ein neues 5ba626b379994d53f7acf72a64f9b697-Element, das mit JavaScript kombiniert werden kann, um Grafiken dynamisch im Canvas zu zeichnen. In diesem Artikel geht es nicht um das Zeichnen von Grafiken in Canvas, sondern um die Verarbeitung von Bildern.

Der Prozess ist wahrscheinlich sehr einfach und hauptsächlich in die folgenden drei Schritte unterteilt:

Ja, es ist so einfach, als würde man einen Elefanten in den Kühlschrank stellen, haha .

1. Haupt-APIs

Die wichtigsten Canvas-APIs, die im gesamten Prozess verwendet werden, sind:

1. Bilder zeichnen: drawImage( )

2. Bilddaten abrufen: getImageData()

3. Bilddaten neu schreiben: putImageData()

4. Bild exportieren: toDataURL()

1. drawImage()

Wie der Name schon sagt, wird diese Methode zum Zeichnen des Bildes verwendet die Canvas-Leinwand Darunter gibt es drei spezifische Verwendungen:

① Positionieren Sie das Bild auf der Leinwand: context.drawImage(img,x,y)
② Positionieren Sie das Bild auf der Leinwand und geben Sie die Breite an und Höhe des Bildes: context.drawImage(img,x,y,width,height)
③ Schneiden Sie das Bild aus und positionieren Sie den ausgeschnittenen Teil auf der Leinwand: context.drawImage(img,sx,sy,swidth,sheight, x,y,width ,height)

Die oben genannten Parameterwerte werden in der folgenden Tabelle beschrieben:

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

2. getImageData()

Diese Methode wird verwendet, um Bilddaten von der Canvas-Leinwand abzurufen. Die spezifische Verwendung ist wie folgt:

Rufen Sie die Pixeldaten innerhalb des angegebenen rechteckigen Bereichs der Canvas ab : var ImageData = context.getImageData(x,y,width,height)
Die oben genannten Parameterwerte werden in der folgenden Tabelle beschrieben:

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

Diese Methode gibt ein ImageData-Objekt zurück, das über drei Attribute verfügt: Breite, Höhe und Daten. Das Wichtigste, was wir verwenden, ist dieses Datenarray, da es die Daten jedes Pixels im Bild speichert. Nachdem wir diese Daten haben, können wir sie verarbeiten und schließlich in die Canvas-Leinwand umschreiben, um so die Verarbeitung und Konvertierung der Bilder zu realisieren. Die spezifische Verwendung des Datenarrays können wir in den folgenden Beispielen sehen.

3. putImageData()

Diese Methode ist sehr einfach, sie wird verwendet, um die Bilddaten in die Canvas-Leinwand umzuschreiben. Die spezifische Verwendung ist wie folgt:

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

Die oben genannten Parameterwerte werden in der folgenden Tabelle beschrieben:

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

4. toDataURL()

这个方法与以上三种方法不同，它是Canvas对象的方法，该方法返回的是一个包含data URI的字符串，该字符串可直接作为图片路径地址填入a1f02c36ba31691bcfe87b2722de723b标签的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);
        };
    };
};

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

以上内容就是Canvas处理图片的方法，希望对大家有帮助。

相关推荐：

HTML5里Canvas常用的绘图技巧

JavaScript+html5 canvas实现图片上画超链接的示例代码

html5 canvas制作一个跟着鼠标移动消失的一堆炫彩小球

Das obige ist der detaillierte Inhalt vonWie Canvas mit Bildern umgeht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!