教你应用Canvas解决照片的方式

2021-02-23 14:13 jianzhan

Canvas，汉语译为“画布”，HTML5中新增了<canvas>元素，能够融合JavaScript动态性地在画布中绘图图型。

今日，大家不讲Canvas的图型绘图，而是讲怎样对照片开展解决。

大约步骤十分简易，关键分成下列3个流程：

是的，就像把大象装进冰箱1样简易，哈哈。

1、关键API

全部步骤中所用到的关键Canvas API有：

绘图图象： drawImage()
获得图象数据信息： getImageData()
重新写过图象数据信息： putImageData()
导出来图象： toDataURL()

1. drawImage()

说白了，该方式便是用于将图象绘图于Canvas画布之中，实际用法有3种：

① 在画布上精准定位图象：context.drawImage(img,x,y)
② 在画布上精准定位图象，并要求图象的宽度和高宽比：context.drawImage(img,x,y,width,height)
③ 裁切图象，并在画布上精准定位被裁切的一部分：context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

以上主要参数值叙述以下表：

主要参数叙述 img 要求要应用的图象、画布或视頻。 sx 可选。刚开始裁切的 x 座标部位。 sy 可选。刚开始裁切的 y 座标部位。 swidth 可选。被裁切图象的宽度。 sheight 可选。被裁切图象的高宽比。 x 在画布上置放图象的 x 座标部位。 y 在画布上置放图象的 y 座标部位。 width 可选。要应用的图象的宽度。（屈伸或变小图象） height 可选。要应用的图象的高宽比。（屈伸或变小图象）

2. getImageData()

该方式用于从Canvas画布中获得图象数据信息，实际用法以下：

获得画布特定矩形框范畴内的像素数据信息：var ImageData = context.getImageData(x,y,width,height)
以上主要参数值叙述以下表：

主要参数叙述 x 刚开始拷贝的左上角部位的 x 座标。 y 刚开始拷贝的左上角部位的 y 座标。 width 即将拷贝的矩形框地区的宽度。 height 即将拷贝的矩形框地区的高宽比。

该方式会回到1个ImageData目标，该目标有3个特性各自为：width、height和data，而大家最关键用到的便是这个data数字能量数组，由于它储存着图象中每个像素的数据信息。有了这些数据信息以后大家即可以对它们开展解决，最终再将其重新写过至Canvas画布中，这样就完成了对照片的解决变换。针对该data数字能量数组实际用法，大家能够在后边的案例中看到。

3. putImageData()

该方式很简易，便是用于将图象数据信息重新写过至Canvas画布中，实际用法以下：

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

以上主要参数值叙述以下表：

主要参数叙述 imgData 要求要放回画布的 ImageData 目标。 x ImageData 目标左上角的 x 座标，以像素计。 y ImageData 目标左上角的 y 座标，以像素计。 dirtyX 可选。水平值（x），以像素计，在画布上置放图象的部位。 dirtyY 可选。水平值（y），以像素计，在画布上置放图象的部位。 dirtyWidth 可选。在画布上绘图图象所应用的宽度。 dirtyHeight 可选。在画布上绘图图象所应用的高宽比。

4. toDataURL()

这个方式与以上3种方式不一样，它是Canvas目标的方式，该方式回到的是1个包括data URI的标识符串，该标识符串可立即做为照片相对路径详细地址填入<img>标识的src特性之中，实际用法以下：

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

以上主要参数值叙述以下表：

主要参数叙述 type 可选。照片文件格式，默认设置为 image/png。 encoderOptions 可选。在特定照片文件格式为 image/jpeg 或 image/webp的状况下，能够从 0 到 1 的区段内挑选照片的品质。假如超过赋值范畴，可能应用默认设置值 0.92。别的主要参数会被忽视。

2、照片解决案例

本案例将根据编码简易详细介绍怎样把五颜六色照片解决成黑与白照片。

<!--HTML-->
<canvas id="canvas" width="600" height="600"></canvas>
<input id="handle" type="button" value="解决照片" />
<input id="create" type="button" value="转化成照片" />
<div id="result"></div>

//JavaScript
window.onload = function(){
    var canvas = document.getElementById("canvas"),   //获得Canvas画布目标
        context = canvas.getContext('2d');  //获得2D左右文目标，大多数数Canvas API均为此目标方式
    var image = new Image();  //界定1个照片目标
    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);
        };
    };
};

将会上面编码写得并不是很好，看起来也并不是那末好了解，最好是自身可以亲身写1写，这样针对自身了解会更为刻骨铭心1些。

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。

教你应用Canvas解决照片的方式

为您推荐