HTML5로 놀면서 배우기 (3) - 픽셀과 색상

1. 색상 이해

실제로 이러한 이미지는 픽셀로 구성되어 있습니다. 그렇다면 픽셀이란 무엇입니까? 색깔은 무엇입니까? (이 두 가지 질문을 한다면 당신은 생각하는 것을 좋아하는 사람임에 틀림없습니다.) 픽셀은 실제로 메모리의 연속적인 이진 비트 집합에 해당합니다. 이진 비트이기 때문에 각 비트의 값은 물론 0 또는 0일 수 있습니다. 벌써 1개! 이러한 방식으로 이 연속된 이진 비트 집합은 0과 1로 여러 상황으로 결합될 수 있으며 각 조합은 픽셀의 색상을 결정합니다. 먼저 아래 사진을 보시면

이 사진은 6개의 픽셀, 총 24개의 작은 정사각형 상자로 이루어진 것을 볼 수 있습니다.

참고: 그림의 작은 상자는 8개의 이진 비트인 바이트를 나타냅니다.

따라서 각 픽셀은 4바이트로 구성됩니다. 이 4바이트의 의미도 그림에 표시되어 있습니다.

첫 번째 바이트는 픽셀의 빨간색 값을 결정합니다

두 번째 바이트는 픽셀의 녹색 값을 결정합니다

세 번째 바이트는 픽셀의 파란색 값을 결정합니다

네 번째 바이트는 픽셀의 투명도 값을 결정합니다

각 색상 값의 크기는 0에서 255까지입니다. (질문: 왜 그렇게 할 수 있나요? 255로만 가시나요?), 투명도 값: 0은 완전히 투명함을 나타내고, 255는 완전히 불투명함을 나타냅니다

이런 식으로 (255, 0, 0, 255) 을 사용하여 메모리에서 순수한 빨간색 픽셀

을 나타내며 다음과 같은 32비트 문자열입니다. 🎜>2. 픽셀 조작

색상과 픽셀의 본질을 이해하면 그래픽에 대해 더 복잡한 처리를 수행할 수 있습니다.

그러나 HTML5

는 현재 setPixel이나 getPixel

과 같이 픽셀을 직접 조작하는 메소드를 제공하지 않습니다. ImageData

객체

사용: ImageData 객체 는 이미지 픽셀 값을 저장하는 데 사용됩니다. 여기에는 너비, 높이 및 데이터의 세 가지

속성

이 있습니다. 데이터 속성은 연속 배열 이며 이미지의 모든 픽셀 값은 실제로 데이터에 저장됩니다.

data 속성은 이전 그림에서 본 것과 똑같은 방식으로 픽셀 값을 저장합니다.

imageData.data[index*4 +0]
imageData.data[index*4 +1]
imageData.data[index*4 +2]
imageData.data[index*4 +3]

위에서는 <🎜를 꺼냅니다. > 데이터 배열의 연속 요소 ​​

네 개의 인접한 값은 각각

번째 인덱스+1 픽셀 <🎜의 빨간색, 녹색, 파란색 및 투명도 값을 나타냅니다. > 이미지 크기.

참고: 색인은 0부터 시작하며, 이미지의 총 너비 * 높이 픽셀과 총 너비 * 높이 * 4가 있습니다. 값은 배열에 저장됩니다. Context 객체 Context에는 ImageData 객체를 생성하고 읽고 설정하는 세 가지 방법이 있습니다.

createImageData(width, height): 메모리에 객체에 지정된 크기의 ImageData 객체(즉, 픽셀 배열)를 만듭니다. 객체의 픽셀은 모두 검은색이고 투명합니다. 즉, rgba(0,0,0,0)getImageData( x, y, width, height): 지정된 영역의 픽셀 배열이 포함된 ImageData 객체를 반환합니다.

putImageData

(data, x , y) : ImageData 객체를 그린다 화면의 지정된 영역으로 이동

3.간단한 이미지 처리

예

위에서 말한 내용이 너무 많습니다. 우리는 이미지

프로그래밍

을 다루기 위해 필요한 지식을 사용하며 언젠가는 Chrome에서

PhotoShop

을 플레이하게 될 것입니다. 프로그램은 다음과 같습니다. 1. 보안 오류(Security_ERR:DOM EXCEPTION 18)가 발생하지 않도록 캔버스 요소에 그림을 그립니다. 블로그 상단에 있습니다. 이 예제를 실행하려면 자신만의 이미지로 변경해야 할 수도 있습니다

2. GRBA의 네 가지 구성 요소를 각각 나타내는 네 개의 슬라이드 막대가 있습니다 3. 슬라이드를 드래그합니다 색상 구성 요소가 증가하거나 감소합니다 4. 이미지가 투명해지면 캔버스 요소의 배경이 표시됩니다. 이 배경을 내 아바타로 설정했습니다. 하하.

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

下面是代码：

简单的图像处理



Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><canvas id="test1" width="507" height="348" 
style="background-image:url(http://images.cnblogs.com/cnblogs_com/myqiao/262115/r_2204793492575248335.jpg)">你的浏览器不支持 <canvas>标签，
请使用 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>

四、绘制随机颜色的点

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

下面是代码和程序实例：

随机颜色的点



Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><canvas id="test2" width="300" height="300" style=" background-color: black">你的浏览器不支持 <canvas>标签，请使用 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>

위 내용은 HTML5로 놀면서 배우기 (3) - 픽셀과 색상의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!