HTML5_canvas_像素操做_圖片馬賽克_圖片反相

時間 2019-11-08

標籤 html5 html canvas 像素圖片馬賽克反相欄目 HTML5 简体版

原文原文鏈接

canvas 像素操做javascript

像素，即像素點，一個像素只有一個顏色css

100*100 的 px 的屏幕區域有 100*100*4 個像素點，即 width*height*4html

rgba(0, 0, 0, 1); 在 css 中透明的範圍爲 0-1java

rgba(0, 0, 0, 255); 在 canvas 中透明的範圍也爲 0-255canvas

讀取空白畫布的像素點，爲黑色透明色 (0, 0, 0, 0)____即便畫布設置顏色爲 red數組

因此，通常讀取繪畫的像素點瀏覽器

讀取已有像素，改寫後再繪製

// 1. 讀取矩形像素信息參數1，參數2 矩形左上角座標app

var imgData = pen.getImageData(100, 100, 100, 100); 參數3，參數4 矩形的 width 和 heightdom

// 2. 改變像素函數

for(var i=0; i<imgData.data.length; i++){

imgData.data[4*i+0] = 144;

imgData.data[4*i+1] = 144;

imgData.data[4*i+2] = 144;

imgData.data[4*i+3] = 144;

}

// 3. 將改變的像素數組，繪製帶畫布 (100, 100) 區域

pen.putImageData(imgData, 100, 100);

自建一個像素數據數據，改寫後繪製

// 1. 建立像素對象返回的像素數組，也是黑色透明色 (0, 0, 0, 0);

var imgData = pen.createImagData(100, 100);

// 2. 改變像素信息

for(var i=0; i<imgData.length; i++){

imgData.data[4*i+0] = 14;

imgData.data[4*i+1] = 164;

imgData.data[4*i+2] = 154;

imgData.data[4*i+3] = 255;

}

// 3. 寫入已改變像素點數組

pen.putImageData(imgData, 100, 100);

單個像素寫入操做 (封裝)

1. 獲取畫布全部像素點的信息

var imgData = pen.getImageData(0, 0, myCanvas.width, myCanvas.height);

2. 設置 (99, 99) 點爲藍色

setPxInfo(imgData, 99, 99, [0, 0, 255, 0]);

3. 函數封裝

function setColorPos(imgArr, x, y, rgba){
    imgArr.data[(imgArr.width*y+x)*4+0] = rgba[0];
    imgArr.data[(imgArr.width*y+x)*4+1] = rgba[1];
    imgArr.data[(imgArr.width*y+x)*4+2] = rgba[2];
    imgArr.data[(imgArr.width*y+x)*4+3] = rgba[3];
};

讀取單個像素顏色操做 (封裝)

1. 獲取畫布全部像素點的信息

var imgData = pen.getImageData(0, 0, myCanvas.width, myCanvas.height);

2. 設置 (99, 99) 點爲藍色

getPxInfo(imgData, 99, 99);

3. 函數封裝

function getColorPos(imgArr, x, y){
    var rgba = [];
    rgba[0] = imgArr.data[(imgArr.width*y+x)*4+0];
    rgba[1] = imgArr.data[(imgArr.width*y+x)*4+1];
    rgba[2] = imgArr.data[(imgArr.width*y+x)*4+2];
    rgba[3] = imgArr.data[(imgArr.width*y+x)*4+3];
                
    return rgba;
};

圖片馬賽克處理案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title></title>
        
        <link rel="stylesheet" type="text/css" href="./css/index.css" />
        
        <script type="text/javascript" src="./js/kjfFunctions.js"></script>
        <script type="text/javascript" src="./js/index.js"></script>
        
        <style type="text/css">
            body {
                width: 100%;
                color: #000;
                background: #96b377;
                font: 14px Helvetica, Arial, sans-serif;
            }
            
            #wrap {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }
        </style>
    </head>
    
    <body>
        
        
        <div id="wrap"></div>
        
            
        
        
        <!-- javascript 代碼 -->
        <script type="text/javascript">
            //                建立 畫布的width  畫布的height  背景顏色 父元素
            function createCanvasTo(canvasWidth, canvasHeight, bgColor, parentObj){
                var myCanvas = document.createElement("canvas");
                myCanvas.width = canvasWidth;
                myCanvas.height = canvasHeight;
                myCanvas.innerText = " 您的瀏覽器不支持 canvas，建議更新或者更換瀏覽器。";
                if(bgColor){
                    myCanvas.style.backgroundColor = bgColor;
                };
                if(parentObj){
                    parentObj.appendChild(myCanvas);
                };
                
                return myCanvas;
            };
            
            var wrap = document.getElementById("wrap");
            var myCanvas = createCanvasTo(1040, 480, "#eee", wrap);
            
            // 獲取畫筆
            var pen = myCanvas.getContext("2d");
            pen.fillStyle = 'olive';    // 填充的顏色
            pen.strokeStyle = "blue";    //  筆的顏色
            pen.lineWidth = 4;    // 筆寬
            pen.lineCap = "round";    // 圓形結束
            pen.lineJoin = "round";    // 圓角
            
            // 開始繪製
            var imgObj = new Image();
            imgObj.src = "./img/Nick.jpg";
            imgObj.onload = function(){
                pen.drawImage(imgObj, 0, 0, 520, 480);
                
                var imgData = pen.getImageData(0,0,520,480);
                
                size = 5;
                var i = 0,
                    j = 0,
                    a = 0,
                    b = 0;
                for(i=0; i<imgData.width; i++){
                    for(j=0; j<imgData.height; j++){
                        var colorPoint = getColorPos( imgData, Math.floor(i*size+Math.random()*size), Math.floor(j*size+Math.random()*size)); for(a=0; a<size; a++){ for(b=0; b<size; b++){ setColorPos(imgData, i*size+a, j*size+b, colorPoint); }; };
                    };
                };
                pen.putImageData(imgData, 520, 0);
            };
            
            function getColorPos(imgArr, x, y){ var rgba = []; rgba[0] = imgArr.data[(imgArr.width*y+x)*4+0]; rgba[1] = imgArr.data[(imgArr.width*y+x)*4+1]; rgba[2] = imgArr.data[(imgArr.width*y+x)*4+2]; rgba[3] = imgArr.data[(imgArr.width*y+x)*4+3]; return rgba; }; function setColorPos(imgArr, x, y, rgba){ imgArr.data[(imgArr.width*y+x)*4+0] = rgba[0]; imgArr.data[(imgArr.width*y+x)*4+1] = rgba[1]; imgArr.data[(imgArr.width*y+x)*4+2] = rgba[2]; imgArr.data[(imgArr.width*y+x)*4+3] = rgba[3]; }; </script>
    </body>
</html>

圖片反相處理

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>圖片反相</title>

        <style type="text/css">
            body {
                width: 100%;
                color: #000;
                background: #96b377;
                font: 14px Helvetica, Arial, sans-serif;
            }
            
            #wrap {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }
        </style>
    </head>
    
    <body>
        
        
        <div id="wrap"></div>
        
            
        
        
        <!-- javascript 代碼 -->
        <script type="text/javascript">
            //                建立 畫布的width  畫布的height  背景顏色 父元素
            function createCanvasTo(canvasWidth, canvasHeight, bgColor, parentObj){
                var myCanvas = document.createElement("canvas");
                myCanvas.width = canvasWidth;
                myCanvas.height = canvasHeight;
                myCanvas.innerText = " 您的瀏覽器不支持 canvas，建議更新或者更換瀏覽器。";
                if(bgColor){
                    myCanvas.style.backgroundColor = bgColor;
                };
                if(parentObj){
                    parentObj.appendChild(myCanvas);
                };
                
                return myCanvas;
            };
            
            var wrap = document.getElementById("wrap");
            var myCanvas = createCanvasTo(520*3, 480, "#eee", wrap);
            
            var imgObj = new Image();
            imgObj.src = "./img/Nick.jpg";
            imgObj.onload = function(){
                var pen = myCanvas.getContext("2d");
                pen.drawImage(imgObj, 0, 0, 520, 480);
                pen.drawImage(imgObj, 520, 0, 520, 480);

                var pxObj = pen.getImageData(520+100, 100, 100, 160);
                setColorInversion(pxObj);
                pen.putImageData(pxObj, 520+100, 100);
                
                pxObj = pen.getImageData(0, 0, 520, 480);
                setColorInversion(pxObj);
                pen.putImageData(pxObj, 520*2, 0);
            };
            
            function setColorInversion(pxObj){
                var i = 0;
                var j = 0;
                for(i=0; i<pxObj.width; i++){
                    for(j=0; j<pxObj.height; j++){
                        pxObj.data[(pxObj.width*j+i)*4+0] = 255 - pxObj.data[(pxObj.width*j+i)*4+0];
                        pxObj.data[(pxObj.width*j+i)*4+1] = 255 - pxObj.data[(pxObj.width*j+i)*4+1];
                        pxObj.data[(pxObj.width*j+i)*4+2] = 255 - pxObj.data[(pxObj.width*j+i)*4+2];
                        pxObj.data[(pxObj.width*j+i)*4+3] = 150;
                    };
                };
            };
        </script>
    </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。