HTML5 belajar sambil bermain (3) Piksel dan warna _html5 kemahiran tutorial

1. Memahami Warna

Kita boleh melihat imej berwarna-warni pada skrin komputer Malah, imej ini terdiri daripada piksel. Jadi apakah piksel? Apakah warnanya? (Jika anda bertanya dua soalan ini, anda mesti seorang yang suka berfikir) Piksel sebenarnya sepadan dengan set bit binari berturut-turut dalam ingatan Memandangkan ia adalah bit binari, nilai setiap bit sudah tentu boleh menjadi 0 atau 1 sudah! Dengan cara ini, set bit binari berturut-turut ini boleh digabungkan ke dalam banyak situasi dengan 0 dan 1, dan setiap gabungan menentukan warna piksel. Tengok gambar di bawah

Kenyataan: Artikel ini adalah artikel asal dan penulis berhak semua! Cetakan semula dialu-alukan, sila nyatakan pengarang Zuo Yu dan sumber Blog Garden

Kita dapat lihat bahawa gambar ini menerangkan enam piksel dan terdiri daripada sejumlah 24 kotak kecil.

Nota: Kotak kecil dalam gambar mewakili bait , iaitu 8 bit binari.

Oleh itu, setiap piksel terdiri daripada empat bait . Maksud empat bait ini juga ditandakan dalam gambar:

Bait pertama menentukan nilai merah piksel

Bait kedua menentukan nilai hijau piksel

Bait ketiga menentukan nilai biru piksel

Bait keempat menentukan nilai ketelusan piksel

Saiz setiap nilai warna adalah dari 0 hingga 255 (soalan: mengapa ia hanya boleh pergi ke 255? Nilai ketelusan: 0 mewakili telus sepenuhnya, 255 mewakili legap sepenuhnya

).

Dengan cara ini, kita boleh menggunakan (255, 0, 0, 255) untuk mewakili merah tulen piksel

Dalam ingatan, ia adalah rentetan 32-bit seperti ini: 11111111 00000000 00000000 11111111

2. Manipulasi piksel

Memahami intipati warna dan piksel, kami boleh melakukan pemprosesan yang lebih kompleks pada grafik.

Walau bagaimanapun, HTML5 pada masa ini tidak menyediakan kaedah untuk memanipulasi piksel secara langsung seperti setPixel atau getPixel, tetapi kami juga mempunyai cara

Hanya gunakan objek ImageData:

Objek ImageData digunakan untuk menyimpan nilai piksel imej Ia mempunyai tiga atribut: lebar, tinggi dan data Atribut data ialah tatasusunan berterusan Semua nilai piksel imej sebenarnya disimpan data.

Atribut data menyimpan nilai piksel dalam cara yang sama seperti yang kita lihat dalam imej sebelumnya:

data.data imej[index*4 0]

data.data imej[index*4 1]

data.data imej[index*4 2]

data.data imej[index*4 3]

Di atas mengeluarkan empat nilai bersebelahan berturut-turut dalam tatasusunan data ini masing-masing mewakili indeks 1 piksel.

Nota

: indeks bermula dari 0, terdapat sejumlah lebar * tinggi piksel dalam imej, dan jumlah lebar * tinggi * 4 nilai ​​disimpan dalam tatasusunan

Objek konteks Konteks mempunyai tiga kaedah untuk mencipta, membaca dan menetapkan objek ImageData, ia adalah

createImageData

(lebar, tinggi): Buat objek ImageData (iaitu tatasusunan piksel) dengan saiz yang ditentukan dalam ingatan Piksel dalam objek semuanya berwarna hitam dan lutsinar, iaitu rgba(0,0,. 0,0)

getImageData

(x, y, lebar, tinggi): Mengembalikan objek ImageData ini mengandungi tatasusunan piksel bagi kawasan yang ditentukan

putImageData

(data, x, y): Lukis objek ImageData ke kawasan skrin yang ditentukan

3. Contoh pemprosesan imej yang mudah

Setelah bercakap banyak, kami menggunakan pengetahuan yang kami ada untuk bermain dengan pengaturcaraan imej mungkin suatu hari nanti kami akan bermain PhotoShop dalam Chrome.

Program ini mungkin kelihatan seperti ini:

1. Lukiskan imej pada elemen kanvas Untuk tidak menyebabkan ralat keselamatan (Security_ERR:DOM EXCEPTION 18), saya menggunakan imej latar belakang sepanduk di bahagian atas blog saya. Jika anda ingin menjalankan contoh ini, anda mungkin perlu menukarnya kepada imej anda sendiri

2、有四个滑动条，分别代表 GRBA 四个分量

3、拖动滑动条，图像中对应的颜色分量就会增加或者减少

4、如果图像变成透明，就会显示 canvas 元素的背景，我把这个背景设置成了我的头像，呵呵。

思路：其实就是用 getImageData 方法，将你想改变的那一块区域的像素数组取出来，然后根据你拖动的滑动条和滑动条的数值，来更改那一块区域里所有像素对应颜色分量的值。处理完毕后再用 putImageData 方法绘制到画布上，就是这么简单。

下面是代码：

简单的图像处理

复制代码

代码如下:

<canvas id="test1" width="507" height="348" style="background-image:url(http://images.cnblogs.com/cnblogs_com/myqiao/262115/r_2204793492575248335.jpg)">你的浏览器不支持 &lt;canvas&gt;标签，请使用 Chrome 浏览器 或者 FireFox 浏览器</canvas>
红色：<input type="range" min="1" max="100" onchange="colorChange(event,0)"/>
绿色：<input type="range" min="1" max="100" onchange="colorChange(event,1)"/>
蓝色：<input type="range" min="1" max="100" onchange="colorChange(event,2)"/>
透明：<input type="range" min="1" max="100" onchange="colorChange(event,3)"/>
<script type="text/javascript">
//获取上下文对象
var canvas = document.getElementById("test1");
var ctx = canvas.getContext("2d");
//画布的宽度和长度
var width = parseInt(canvas.getAttribute("width"));
var height = parseInt(canvas.getAttribute("height"));
//装入图像
var image = new Image();
image.onload =imageLoaded;
//顶部背景图片
image.src = "/skins/Valentine/images/banner2.gif";
//用来保存像素数组的变量
var imageData=null;
function imageLoaded() {
// 将图片画到画布上
ctx.drawImage(image, 0, 0);
//取图像的像素数组
imageData = ctx.getImageData(0, 0, width, height);
}
function colorChange(event,offset){
imageLoaded();
for (var y = 0; y < imageData.height; y++) {
for (x = 0;x < imageData.width; x++) {
//index 为当前要处理的像素编号
var index = y * imageData.width + x;
//一个像素占四个字节，即 p 为当前指针的位置
var p = index * 4;
//改变当前像素 offset 颜色分量的数值，offset 取值为0-3
var color = imageData.data[p + offset] * event.target.value / 50;
// 颜色值限定在[0..255]
color = Math.min(255, color);
//将改变后的颜色值存回数组
imageData.data[p + offset]=color
}
}
//输出到屏幕
ctx.putImageData(imageData, 0, 0);
}
</script>

演示效果:

<p><canvas style="background-image: url(http://images.cnblogs.com/cnblogs_com/myqiao/262115/r_2204793492575248335.jpg)" id="test1" height="230" width="295">你的浏览器不支持 &lt;canvas&gt;标签，请使用 Chrome 浏览器 或者 FireFox 浏览器</canvas> </p> <p>红色：<input onchange="colorChange(event,0)" type="range" max="100" min="1"> </p> <p>绿色：<input onchange="colorChange(event,1)" type="range" max="100" min="1"> </p> <p>蓝色：<input onchange="colorChange(event,2)" type="range" max="100" min="1"> </p> <p>透明：<input onchange="colorChange(event,3)" type="range" max="100" min="1"> <script type="text/javascript"> //获取上下文对象 var canvas = document.getElementById("test1"); var ctx = canvas.getContext("2d"); //画布的宽度和长度 var width = parseInt(canvas.getAttribute("width")); var height = parseInt(canvas.getAttribute("height")); //装入图像 var image = new Image(); image.onload =imageLoaded; image.src = "/skins/Valentine/images/banner2.gif"; //用来保存像素数组的变量 var imageData=null; function imageLoaded() { // 将图片画到画布上 ctx.drawImage(image, 0, 0); //为了提高速度，只获取图像中一部分区域的像素数组 imageData = ctx.getImageData(0, 0, width, height); } function colorChange(event,offset){ imageLoaded(); for (var y = 0; y < imageData.height; y++) { for (x = 0;x < imageData.width; x++) { //index 为当前要处理的像素编号 var index = y * imageData.width + x; //一个像素占四个字节，即 p 为当前指针的位置 var p = index * 4; //改变当前像素 offset 颜色分量的数值，offset 取值为0-3 var color = imageData.data[p + offset] * event.target.value / 50; // 颜色值限定在[0..255] color = Math.min(255, color); //将改变后的颜色值存回数组 imageData.data[p + offset]=color } } //输出到屏幕 ctx.putImageData(imageData, 0, 0); } </script></p>
提示：您可以先修改部分代码再运行

 

四、绘制随机颜色的点

这个例子是在画布上随机选择一个点，然后再给他一个随机的颜色值，其实用到的方法和上面的例子大同小异，就是需求不同罢了。

下面是代码和程序实例：
随机颜色的点

复制代码

代码如下:

<canvas id="test2" width="300" height="300" style=" background-color: black">你的浏览器不支持 &lt;canvas&gt;标签，请使用 Chrome 浏览器 或者 FireFox 浏览器</canvas>
<input type="button" value="画随机点" onclick="interval=setInterval(randomPixel,1);" />
<input type="button" value="停止" onclick="clearInterval(interval);"/>
<input type="button" value="清除" onclick="clearCanvas();"/>
<script type="text/javascript">
//获取上下文对象
var canvas = document.getElementById("test2");
var ctx = canvas.getContext("2d");
//画布的宽度和长度
var width = parseInt(canvas.getAttribute("width"));
var height = parseInt(canvas.getAttribute("height"));
var imageData = ctx.createImageData(width, height);
function randomPixel(){
var x= parseInt(Math.random()*width);
var y= parseInt(Math.random()*height);
var index = y * width + x;
var p = index * 4;
imageData.data[p + 0] = parseInt(Math.random() * 256);
imageData.data[p + 1] = parseInt(Math.random() * 256);
imageData.data[p + 2] = parseInt(Math.random() * 256);
imageData.data[p + 3] =parseInt(Math.random() * 256);
ctx.putImageData(imageData,0,0);
}
function clearCanvas(){
ctx.clearRect(0,0,width,height);
imageData = ctx.createImageData(width, height);
}
</script>

演示效果:

<p><canvas style="background-color: black" id="test2" height="300" width="300">你的浏览器不支持 &lt;canvas&gt;标签，请使用 Chrome 浏览器 或者 FireFox 浏览器</canvas> </p> <p><input onclick="interval=setInterval(randomPixel,1);" value="画随机点" type="button"> <input onclick="clearInterval(interval);" value="停止" type="button"> <input onclick="clearCanvas();" value="清除" type="button"> <script type="text/javascript"> //获取上下文对象 var canvas2 = document.getElementById("test2"); var ctx2 = canvas2.getContext("2d"); //画布的宽度和长度 var width2 = parseInt(canvas2.getAttribute("width")); var height2 = parseInt(canvas2.getAttribute("height")); var imageData2 = ctx2.createImageData(width2, height2); function randomPixel(){ var x= parseInt(Math.random()*width2); var y= parseInt(Math.random()*height2); var index = y * imageData2.width + x; var p = index * 4; imageData2.data[p + 0] = parseInt(Math.random() * 256); imageData2.data[p + 1] = parseInt(Math.random() * 256); imageData2.data[p + 2] = parseInt(Math.random() * 256); imageData2.data[p + 3] =parseInt(Math.random() * 256); ctx2.putImageData(imageData2,0,0); } function clearCanvas(){ ctx2.clearRect(0,0,width2,height2); imageData2 = ctx2.createImageData(width2, height2); } </script></p>
提示：您可以先修改部分代码再运行