html5学习canvas图像处理

最新推荐文章于 2022-06-11 11:50:30 发布

mockingbirds

最新推荐文章于 2022-06-11 11:50:30 发布

阅读量3.7k

点赞数 1

分类专栏： html5

本文链接：https://blog.csdn.net/mockingbirds/article/details/48594969

版权

html5 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

上一篇博客主要学习了关于canvas的图性处理相关用法，这里所有的图形都是通过计算机进行绘制的，今天学些使用canvas来绘制以后的图像以及图像的部分处理操作。

drawImage绘制图像到canvas

可以使用drawImage来将图片绘制到canvas中，该方法有如下参数：

drawImage(image,dx,dy)
imgae :需要绘制的图片，dx，dy：表示绘制的图片左上角的x和y坐标
drawImage(image,dx,dy,dw,dh)
dw,dh：表示需要绘制的图片的大小，此时如果图片大于或者小于canvas画布的大小，会自动进行缩放操作。
drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
这里的意思是将原图像的左上角从sx，sy位置开始截取sw，sh的宽和高，将截取后的图片会知道canvas的从dx，dy开始的，dw，dh大小的画布上。

drawImage(image,dx,dy)

var canvas = document.getElementById("canvas");
canvas.width = 640;
canvas.height = 337;
var context = canvas.getContext("2d");
var image = new Image();
image.src = "tee.jpg";
//alert(image);
image.onload = function() {//当图片完全加载完成，在进行绘制
    context.drawImage(image,0,0);
}

这里，我的canvas的大小正好和图片的大小是一样的，效果如下：
这里写图片描述

drawImage(image,dx,dy,dw,dh)

此时我们将canvas的大小变大和改小，并且将dw和dh参数写为和canvas的大小相同的宽高，缩放效果如下：

var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 500;
var context = canvas.getContext("2d");
var image = new Image();
image.src = "tee.jpg";
image.onload = function() {//当图片完全加载完成，在进行绘制
    context.drawImage(image,0,0,canvas.width,canvas.height);
}

可以看到此时放大的效果如下：
这里写图片描述
再看下缩小效果：

canvas.width = 400;
canvas.height = 400;

这里写图片描述

drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)

var canvas = document.getElementById("canvas");
canvas.width = 400;
canvas.height = 400;
var context = canvas.getContext("2d");
var image = new Image();
image.src = "tee.jpg";
image.onload = function() {//当图片完全加载完成，在进行绘制
    context.drawImage(image,50,50,200,200,100,100,200,200);
}

上面的代码，表示将原图从左上角50,50处开始截取，截取200,200的宽和高，绘制到canvas中100，100，开始200,200大小的画布上，此时效果如下：
这里写图片描述
另外也可以使用如下代码将截取的原图绘制到整个画布上，此时会进行缩放操作。

context.drawImage(image,50,50,200,200,0,0,canvas.width,canvas.height);

这里写图片描述

放大缩小当前的图像

在canvas中，如果当前需要绘制的图像的宽和高大于当前canvas的宽和高的话，则超出部分不进行绘制，利用这一点我们可以结合html5中的新增<input type="range">标签，来实现放大和缩小当前图像。
这里写图片描述
可以看到此时：
图片相对于画布左上角的坐标：
dx = canvas.width/2 - imageWidth / 2;
dy = var dy = canvas.height/2 - imageHeight /2;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style type="text/css">
        canvas{
            margin: 0 auto;
            display: block;
            border: 1px #ff9875 solid;
        }
        input{
            margin: 20px auto;
            display: block;
            width:650px;
        }
    </style>


</head>
<body>
    <canvas id="canvas"></canvas>
    <input type="range" id="scale_range" min="0.5" max="3.0" value="1.0"  step="0.02">

    <script type="text/javascript">
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        var slide = document.getElementById("scale_range");
        var image = new Image();
        window.onload = function(e) {
            canvas.width = 640;
            canvas.height = 337;
            var scale = slide.value; //获得初始的缩放值
            image.src = "tee.jpg";
            image.onload = function() {//当图片完全加载完成，在进行绘制
                drawScaleImage(scale);
                //为slide添加鼠标移动的事件，每次鼠标在该slide上移动的时候更具新的value重新绘制image
                slide.onmousemove = function() {
                    scale = slide.value;//获得当前的缩放值
                    drawScaleImage(scale); //根据新的scale重新绘制image

                }
            }
        }

        function drawScaleImage(scale) {
            //alert("drawScaleImage"+ scale);
            //获得缩放以后的图片的宽和高
            var imageWidth = canvas.width * scale;
            var imageHeight = canvas.height * scale;

            var dx = canvas.width/2 - imageWidth / 2;
            var dy = canvas.height/2 - imageHeight /2;

            //alert("drawScaleImage dx :"+ dx+"   dy"+dy+"   imagewidth:"+imageWidth+"    imageHeight:"+imageHeight);
            //每次在绘制新的image之前先清除当前canvas
            context.clearRect(0,0,canvas.width,canvas.height); 
            context.drawImage(image,dx,dy,imageWidth,imageHeight);
        }
    </script>
</body>
</html>

此时效果如下：
这里写图片描述

为图片添加水印

上面的三个drawImage方法的第一个参数，不仅可以传入一个image对象，同时也可以传入另外一个canvas，当传入另外一个canvas对象的时候，表示将传入的canvas绘制到当前canvas中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style type="text/css">
        #canvas{
            margin: 0 auto;
            display: block;
            border: 1px #ff9875 solid;
        }
        #water{
            display: none;
        }
    </style>

    <script type="text/javascript">
        window.onload = function(e) {
            var canvas = document.getElementById("canvas");
            canvas.width = 640;
            canvas.height = 337;
            var context = canvas.getContext("2d");

            //获得绘制水印的canvas
            var waterCanvas = document.getElementById("water");
            waterCanvas.width = 260;
            waterCanvas.height = 80;
            //获得绘制水印的canvas的context对象
            var waterContext = waterCanvas.getContext("2d");
            //绘制水印，这里的水印添加了0.7的透明度
            waterContext.font = "bold 30px Arial";
            waterContext.fillStyle = "rgba(255,255,255,0.7)";
            waterContext.textBaseline = "middle";
            waterContext.fillText("hello canvas",50,50);


            var image = new Image();
            image.src = "tee.jpg";
            //alert(image);
            image.onload = function() {//当图片完全加载完成，在进行绘制
                context.drawImage(image,0,0);
                //在绘制完成图片以后，在该图片上绘制已经提前绘制好的水印canvas
                context.drawImage(waterCanvas,canvas.width - waterCanvas.width,canvas.height - waterCanvas.height);
            }

        }
    </script>
</head>
<body>
    <canvas id="canvas"></canvas>
    <canvas id="water"></canvas>
</body>
</html>

可以看到这里首先在当前水印canvas上绘制一个带有透明度的文字，然后在当前图片canvas绘制完成之后，将该水印canvas绘制到该图片canvas上。此时效果如下：
这里写图片描述

canvas和鼠标交互

我们可以重写onmousemove,onmousedown等事件来处理鼠标点击或者移动时候的事件。这里是一个简单的：当鼠标在canvas中按下并且滑动的时候，打印当前鼠标相对于canvas左上角的坐标到控制台：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style type="text/css">
        canvas{
            margin: 0 auto;
            display: block;
            border: 1px #ff9875 solid;
        }
    </style>

    <script type="text/javascript">
        window.onload = function(e) {
            var isMouseDown = false;
            var canvas = document.getElementById("canvas");
            canvas.width = 652;
            canvas.height = 348;
            var context = canvas.getContext("2d");
            var image = new Image();
            image.src = "tee.jpg";
            //alert(image);
            image.onload = function() {//当图片完全加载完成，在进行绘制
                context.drawImage(image,0,0,canvas.width,canvas.height);
            }

            //鼠标在canvas移动的时候回调的方法
            canvas.onmousemove = function(e) {
                e.preventDefault();//阻止浏览器默认处理onmousemove的事件
                if (isMouseDown == true) {//如果鼠标按下
                    //获得box对象，该对象中包含了当前canva相对浏览器左上角的位置
                    var box = canvas.getBoundingClientRect(); 
                    //e.clientX - box.left和e.clientY - box.top： 标示当前鼠标点击位置相对于canvas左上角的位置
                    console.log(e.clientX - box.left,e.clientY - box.top)
                };

            }

            canvas.onmousedown = function(e) {
                e.preventDefault();
                isMouseDown = true;//表示当前鼠标被按下
                //console.log(e.clientX,e.clientY); //该clientX和clientY是相对于浏览器左上角的坐标
                var box = canvas.getBoundingClientRect();
                console.log(e.clientX - box.left,e.clientY - box.top);
            }

            canvas.onmouseup = function(e) {
                e.preventDefault();
                isMouseDown = false; //表示当前鼠标抬起
            }

            canvas.onmouseout = function(e) {
                e.preventDefault();
                isMouseDown = false; //当鼠标移出当前canvas对象的时候，将该标示设置为false
            }

        }
    </script>
</head>
<body>
    <canvas id="canvas"></canvas>
</body>
</html>

这里写图片描述

mockingbirds

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5学习canvas图像处理

上一篇博客主要学习了关于canvas的图性处理相关用法，这里所有的图形都是通过计算机进行绘制的，今天学些使用canvas来绘制以后的图像以及图像的部分处理操作。drawImage绘制图像到canvas可以使用drawImage来将图片绘制到canvas中，该方法有如下参数：drawImage(image,dx,dy) imgae :需要绘制的图片，dx，dy：表示绘制的图片左上角的x和y坐标
复制链接

扫一扫