图像的处理

作者: 雅玲哑铃 | 来源:发表于2017-12-30 14:58 被阅读60次

一、绘制图片的方法

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) 从图片中切割出一个矩形区域(sourceX,sourceY,sourceWidth,sourceHeight),缩放到指定的宽度和高度,并在canvas中(x,y)绘制出来。

canvas绘制图像有几个需要注意的地方

1、需要先实例化一个img对象,
2、通过img对象的src属性来引入外部图片
3、绘制图片语句必须在图片预加载完成后进行,不然有时候画不上去

<!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);
            //三、裁剪(原图起点,宽高,目标图起点,宽高)
//          context.drawImage(img,0,0,100,100,20,20,100,100);
        }
    </script>
</html>

二、像素

我们将图片画上去之后,可以利用上下文的getImageData()来获取指定区域的像素值,得到一个对象ImageData,ImageData有三个属性: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);
            //获取画布上所有像素点
            var imageData = context.getImageData(0,0,800,500);
            console.log(imageData)
context.putImageData(imageData,100,100);
            
        }
    </script>
</html>

图片.png

width和height表示访问像素区域大小
data是一个包含访问区域所有像素信息的属性

我们不仅可以获取像素,还可以绘制像素

绘制像素我们用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);
            //获取画布上所有像素点
            var imageData = context.getImageData(0,0,800,500);
            console.log(imageData)
            //把获取的像素点重新放到画布上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);
            //获取画布上所有像素点
            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;
            }
            //把改完的像素点重新放到画布上
            context.putImageData(imageData,100,100);
        }
    </script>
</html>

图片.png

imageData.data.length是获取到的像素点的个数,根据我们的rgba取值,imageData.data[i]表示红色r,imageData.data[i+1]表示绿色g,imageData[i+2]表示蓝色b,imageData.data[i+3]表示透明度a,我们去r、g、b三者的平均值来得到灰色。
正如上面代码中的写法

我们再补充一个,大家知道怎么取颜色的反色吗?
反色就是将255-原来的rgb值,得到新的rgb值,就能得到反色,利用这种方法没我们也可以将图片进行反色处理

<!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);
            //获取画布上所有像素点
            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;
            }
//          //把改完的像素点重新放到画布上
            context.putImageData(imageData,100,100);
            
        }
    </script>
</html>

得到效果如图

图片.png

四、canvas 对图形的存储

1、canvas.toDataURL()方>法返回一个包含图片展示的所有信息,参数可忽略
2、如果画布的宽度或高度为0,那么返回字符串“data:,”
3、返回值以“data:image/png,base64”开头,说明该方法已经将图片转化为base64格式,返回值类型是string类型。

下面我写个测试,在点击按钮时会在画布上画一个一模一样的图形

<!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()">点击</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信息复制到浏览器的地址栏打开

图片.png

相关文章

  • 20180222周四~图像处理

    图像处理,分低层处理,输入图像,输出图像。中层处理,输入图像,输出数据。如分割。高层处理,输入图像,输出语义。...

  • 四 图像处理

    图像处理技术概述: 图像处理技术 image processing 图像处理技术是用计算机对 图像信息进行处理的技...

  • 1. 图像处理、计算机视觉与OpenCV

    图像处理(数字图像处理): 图像处理是用计算机对图像进行分析,以达到所需结果的技术,主要包括图像压缩,增强与复原,...

  • 图像平滑处理

    图像平滑处理(Smoothing Images)图像模糊处理(Blurring Images)图像滤波(Image...

  • 《数字图像处理与分析》学习笔记 1

    第一章:图像处理的基本知识 1.1数字图像处理概述 【1、数字图像处理及其特点】 1.图像与数字图像 图像是自然界...

  • PHP基础 —— 图形处理

    图像处理 GD和图像处理,不仅可以创建文件,而且可以处理已有图像 创建图像基本步骤 创建图像 所有的操作都需要在此...

  • iOS OpenCV 图像灰度处理

    iOS OpenCV 图像灰度处理 iOS OpenCV 图像灰度处理

  • OpenCV入门

    图像处理的基本操作  在图像处理的过程中,读取图像、显示图像和保存图像是最基本的操作 1. 读取图像 retval...

  • 信号处理(三)

    本篇介绍 本篇接续信号处理的介绍。 图像中的信号处理 信号处理在采样图像中使用的最为广泛。比如图像的模糊就是将图像...

  • Metal图像处理——直方图均衡化

    Metal图像处理——直方图均衡化 Metal图像处理——直方图均衡化

网友评论

    本文标题:图像的处理

    本文链接:https://www.haomeiwen.com/subject/rjcbgxtx.html