圖像的處理

一、繪制圖片的方法

drawImage(image,x,y) 在canvas中(x,y)處繪制圖片
drawImage(image,x,y,width,height) 在canvas中(x,y)處繪制圖片，并將其縮放到指定的寬度和高度
drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,x,y,width,height) 從圖片中切割出一個(gè)矩形區(qū)域(sourceX,sourceY,sourceWidth,sourceHeight)，縮放到指定的寬度和高度，并在canvas中(x,y)繪制出來。

canvas繪制圖像有幾個(gè)需要注意的地方

1、需要先實(shí)例化一個(gè)img對象，
2、通過img對象的src屬性來引入外部圖片
3、繪制圖片語句必須在圖片預(yù)加載完成后進(jìn)行，不然有時(shí)候畫不上去

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>繪制圖片</title>
        <style type="text/css">
            canvas{
                border:1px solid red;
            }
        </style>
    </head>
    <body>
        <canvas id="mycanvas" width="800" height="500">您的瀏覽器不支持canvas</canvas>
    </body>
    <script type="text/javascript">
        var canvas = document.getElementById("mycanvas");
        var context = canvas.getContext("2d");
        var img= new Image();
        img.src = "caomei-003.jpg";
        img.onload = function(){
            //一、控制在畫布上的位置
            context.drawImage(img,0,0);
            //二、控制在畫布上位置+大小
//          context.drawImage(img,0,0,400,200);
            //三、裁剪（原圖起點(diǎn)，寬高，目標(biāo)圖起點(diǎn)，寬高）
//          context.drawImage(img,0,0,100,100,20,20,100,100);
        }
    </script>
</html>

二、像素

我們將圖片畫上去之后，可以利用上下文的getImageData()來獲取指定區(qū)域的像素值，得到一個(gè)對象ImageData,ImageData有三個(gè)屬性：width，height，data

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>繪制圖片</title>
        <style type="text/css">
            canvas{
                border:1px solid red;
            }
        </style>
    </head>
    <body>
        <canvas id="mycanvas" width="800" height="500">您的瀏覽器不支持canvas</canvas>
    </body>
    <script type="text/javascript">
        var canvas = document.getElementById("mycanvas");
        var context = canvas.getContext("2d");
        var img= new Image();
        img.src = "gui.jpg";
        img.onload = function(){
            context.drawImage(img,0,0);
            //獲取畫布上所有像素點(diǎn)
            var imageData = context.getImageData(0,0,800,500);
            console.log(imageData)
context.putImageData(imageData,100,100);
            
        }
    </script>
</html>
圖片.png

width和height表示訪問像素區(qū)域大小
data是一個(gè)包含訪問區(qū)域所有像素信息的屬性

我們不僅可以獲取像素，還可以繪制像素

繪制像素我們用putImageData(imageData,x,y);

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>繪制圖片</title>
        <style type="text/css">
            canvas{
                border:1px solid red;
            }
        </style>
    </head>
    <body>
        <canvas id="mycanvas" width="800" height="500">您的瀏覽器不支持canvas</canvas>
    </body>
    <script type="text/javascript">
        var canvas = document.getElementById("mycanvas");
        var context = canvas.getContext("2d");
        var img= new Image();
        img.src = "gui.jpg";
        img.onload = function(){
            context.drawImage(img,0,0);
            //獲取畫布上所有像素點(diǎn)
            var imageData = context.getImageData(0,0,800,500);
            console.log(imageData)
            //把獲取的像素點(diǎn)重新放到畫布上context.putImageData(imageData,100,100);
        }
    </script>
</html>
圖片.png

三、灰度處理

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>繪制圖片</title>
        <style type="text/css">
            canvas{
                border:1px solid red;
            }
        </style>
    </head>
    <body>
        <canvas id="mycanvas" width="800" height="500">您的瀏覽器不支持canvas</canvas>
    </body>
    <script type="text/javascript">
        var canvas = document.getElementById("mycanvas");
        var context = canvas.getContext("2d");
        var img= new Image();
        img.src = "gui.jpg";
        img.onload = function(){
            context.drawImage(img,0,0);
            //獲取畫布上所有像素點(diǎn)
            var imageData = context.getImageData(0,0,800,500);
            console.log(imageData)
            for(var i=0;i<imageData.data.length;i+=4){
                var r = imageData.data[i];
                var g = imageData.data[i+1];
                var b = imageData.data[i+2];
                var gray = (r+g+b)/3;
                imageData.data[i] = gray;
                imageData.data[i+1] =gray;
                imageData.data[i+2] = gray;
            }
            //把改完的像素點(diǎn)重新放到畫布上
            context.putImageData(imageData,100,100);
        }
    </script>
</html>
圖片.png

imageData.data.length是獲取到的像素點(diǎn)的個(gè)數(shù)，根據(jù)我們的rgba取值，imageData.data[i]表示紅色r，imageData.data[i+1]表示綠色g，imageData[i+2]表示藍(lán)色b，imageData.data[i+3]表示透明度a，我們?nèi)、g、b三者的平均值來得到灰色。
正如上面代碼中的寫法

我們再補(bǔ)充一個(gè)，大家知道怎么取顏色的反色嗎？
反色就是將255-原來的rgb值，得到新的rgb值，就能得到反色，利用這種方法沒我們也可以將圖片進(jìn)行反色處理

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>繪制圖片</title>
        <style type="text/css">
            canvas{
                border:1px solid red;
            }
        </style>
    </head>
    <body>
        <canvas id="mycanvas" width="800" height="500">您的瀏覽器不支持canvas</canvas>
    </body>
    <script type="text/javascript">
        var canvas = document.getElementById("mycanvas");
        var context = canvas.getContext("2d");
        var img= new Image();
        img.src = "caomei-003.jpg";
        img.onload = function(){
            context.drawImage(img,0,0);
            //獲取畫布上所有像素點(diǎn)
            var imageData = context.getImageData(0,0,800,500);
            console.log(imageData)
            for(var i=0;i<imageData.data.length;i+=4){
                var r = imageData.data[i];
                var g = imageData.data[i+1];
                var b = imageData.data[i+2];
                imageData.data[i] = 255-r;
                imageData.data[i+1] =255-g;
                imageData.data[i+2] = 255-b;
            }
//          //把改完的像素點(diǎn)重新放到畫布上
            context.putImageData(imageData,100,100);
            
        }
    </script>
</html>

得到效果如圖

圖片.png

四、canvas 對圖形的存儲(chǔ)

1、canvas.toDataURL()方>法返回一個(gè)包含圖片展示的所有信息，參數(shù)可忽略
2、如果畫布的寬度或高度為0，那么返回字符串“data:,”
3、返回值以“data:image/png,base64”開頭，說明該方法已經(jīng)將圖片轉(zhuǎn)化為base64格式，返回值類型是string類型。

下面我寫個(gè)測試，在點(diǎn)擊按鈕時(shí)會(huì)在畫布上畫一個(gè)一模一樣的圖形

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            canvas{
                border:1px solid red;
            }
        </style>
    </head>
    <body>
        <canvas id="mycanvas" width="=400" height="400"></canvas>
        <button onclick="sub()">點(diǎn)擊</button>
    </body>
    <script type="text/javascript">
        var canvas = document.getElementById("mycanvas");
        context = canvas.getContext("2d");
        context.beginPath();
        context.fillStyle = "red";
        context.fillRect(100,100,100,100);
        console.log(canvas.toDataURL())
        function sub(){
            //將矩形變成圖片
            var base64 = canvas.toDataURL();
            var img = new Image();
            img.src = base64;
            document.getElementsByTagName("body")[0].appendChild(img);
        }
    </script>
</html>
圖片.png

打印出來的圖片信息如下

圖片.png

我們可以直接將該data信息復(fù)制到瀏覽器的地址欄打開

圖片.png
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容