canvas 实现图像旋转放大图像处理边缘检测

canvas控制图像旋转：

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.
</canvas>

<input type="button" id="angle_v" onclick="myRotate()" value="旋转" />
js:
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var img_w,img_h;
   // ctx.fillRect(50,25,100,50);
    var imgsc = new Image();
    imgsc.src = "./s_02.png";
    img_w = imgsc.width;
    img_h = imgsc.height;

    ctx.drawImage(imgsc,50,100,imgsc.width,imgsc.height);
    var angle = 0;
    function myRotate()
    {
        ctx.translate(50+imgsc.width/2,100+imgsc.height/2);
        ctx.clearRect(-imgsc.width/2,-imgsc.height/2,imgsc.width,imgsc.height);//x2 是为了把原来的图全部抹掉（不留下痕迹）
        angle = 90;
        ctx.rotate(angle*Math.PI/180);
        ctx.drawImage(imgsc,-imgsc.width/2,-imgsc.height/2);
        ctx.translate(-50-imgsc.width/2,-100-imgsc.height/2);
      //  setTimeout(myRotate,1000);
    }

canvas实现图像边缘检测算法：

<!DOCTYPE HTML>
<html>
<head>
    <title>检测图像的边缘</title>
    <script>
        var image = new Image();
        window.onload = function () {
            image.onload = demo;
            image.src = "lugage.png";
        };
        function demo() {
            var canvas = document.getElementsByTagName('canvas')[0];
            var context = canvas.getContext('2d');

            // 在canvas上描画图像（之后检出的边缘图像会重叠之上）
            context.drawImage(image, 0, 0);

            // 获取图像数据
            var input = context.getImageData(0, 0, canvas.width, canvas.height);

            //生成盛放数据的空ImageData对象
            var output = context.createImageData(canvas.width, canvas.height);

            // 定义变量
            // （这里使用了 input.width 与 input.height
            // 使用了canvas.width 与 canvas.height时，
            // 在高解像度的显示屏上的显示是不同的
            var w = input.width, h = input.height;
            var inputData = input.data;
            var outputData = output.data;

            // 检测边缘[0 1 0; 1 -4 1; 0 0 0]。
            for (var y = 1; y < h-1; y += 1) {
                for (var x = 1; x < w-1; x += 1) {
                    for (var c = 0; c < 3; c += 1) {
                        var i = (y*w + x)*4 + c;
                        outputData[i] = 127 + -inputData[i - w*4 - 4] -   inputData[i - w*4] - inputData[i - w*4 + 4] +
                                -inputData[i - 4]       + 8*inputData[i]       - inputData[i + 4] +
                                -inputData[i + w*4 - 4] -   inputData[i + w*4] - inputData[i + w*4 + 4];
                    }
                    outputData[(y*w + x)*4 + 3] = 255; // alpha
                }
            }

            //描画图像
            context.putImageData(output, 0, 0);
        }
    </script>
</head>
<body>
<h2>图像文件边缘检测演示及源代码</h2>
<h3>使用的图像</h3>
<p><img src="lugage.png" alt="Edge detection"></p>

<h3>在原来图像上描画使用canvas检测出的图像边缘</h3>
<canvas width="425" height="318"></canvas>
</body>
</html>

canvas实现拖动进度条实现图像放大效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="canvas" style="display: block;margin: 0 auto;border: 1px solid #aaaaaa;">
    你的浏览器不支持canvas
</canvas>
<input type="range" id="scale-range" min=".5" max="3" step="0.1" value="1" style="display: block;margin: 20px auto; width: 400px" />
<script>
    var canvas = document.getElementById("canvas");
    var  context = canvas.getContext("2d");
    var slider = document.getElementById("scale-range");
    var image = new Image();
    window.onload = function(){
        canvas.width = 480;
        canvas.height = 300;

        var scale = slider.value;
        image.src = "./bj.jpg";
        image.onload = function () {
            //context.drawImage(image, 0 , 0 ,canvas.width, canvas.height);
            drawImageByScale(scale);
            slider.onclick = function () {
                scale = slider.value;
                drawImageByScale(scale);
            }
        };

        function drawImageByScale(scale) {
            var imagewidth = 480 * scale;
            var imageheight = 300 * scale;

           // var sx = imagewidth / 2 - canvas.width /2;
           // var sy = imageheight / 2 - canvas.height /2;

           // context.drawImage(image,sx,sy,canvas.width,canvas.height,0,0,canvas.width,canvas.height)
            var dx = canvas.width / 2 - imagewidth/2;
            var dy = canvas.height / 2 - imageheight/2;

            context.clearRect(0 ,0, canvas.width,canvas.height );
            context.drawImage(image,dx,dy,imagewidth,imageheight);
        }
    }
</script>
</body>
</html>

canvas 实现图像旋转 放大 图像处理 边缘检测

猜你喜欢

canvas 实现图像旋转放大图像处理边缘检测