Canvas-Canvas图像处理、图片查看器、图像缩放功能的实现

Canvas---Canvas图像处理、图片查看器、图像缩放功能的实现。

模仿手机图像查看软件用canvas实现一个图像查看器。

目前实现：

利用将图像起点绘制到canvas之外的技术实现了图像的缩放。

包括，图像自适应、图像放大缩小

下一步准备实现：

鼠标拖动图像

截图：

Canvas-Canvas图像处理、图片查看器、图像缩放功能的实现

总结下要点与步骤：

要点：图像缩放与自适应要一起做的话，缩放对象实际是canvas，然后图像去对新的canvas做自适应。

步骤：

1.缩放canvas，得到缩放后的canvas的长宽。

2.图像对于缩放后的canvas做自适应，得到图像的长宽。

3.利用旧canvas的中心点与缩放后图像的长宽，计算图像绘制起点。

4.调用drawImage();方法，传入图像，绘制起点，缩放长宽。

本文由 **** MIKUScallion 原创，更多canvas案例代码：http://blog.****.net/mikuscallion

下面是源代码：

①页面代码

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <style type="text/css">
            canvas{
                background-color: black;
            }
            .contain{
                margin: 0 auto;
                width: 480px;
                height: 640px;
                position: relative;
            }
            .scaleSlider{
                margin: 0px;
                padding: 0px;
                position: absolute;
                /*旋转元素*/
                transform:rotate(-90deg);
                top: 70px;
                left:400px;
            }
        </style>
        <script type="text/javascript" src="mikuCanvasImageUtil.js"></script>
    </head>
    <body>
        <div class="contain">
            <input id="scaleSlider" class="scaleSlider" type="range" min="0.25" max="4" step="0.01" value="1" />
            <canvas  id="canvas" width="480" height="640">
            </canvas>
        </div>
    </body>
    <script type = "text/javascript">
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        var scaleSlider = document.getElementById("scaleSlider");
        var image = new Image();
        var imageUtil = new MikuCanvasImageUtil();
        image.src ="miku01.jpg";
        image.onload = function(){
            //将图像缩放后绘制到canvas中央
            imageUtil.drawScaleImageInCenter(context,image);
        }
        scaleSlider.onchange = function(){
            //清除屏幕
            context.clearRect(0,0,canvas.width,canvas.height);
            //根据缩放比例将图像在中心缩放
            imageUtil.scaleImgInCenter(context,image,scaleSlider.value,false);
        }
    </script>
</html>

②图像工具代码

var MikuCanvasImageUtil = function(){
}
MikuCanvasImageUtil.prototype = {
//---------------------------------------------------------------------------------
    //图像在canvas中心区域按照给定比例缩放
    //noOver表示是，阻止过度缩放？默认true
    //date:2014-1-31
    //author:MIKUScallion
    scaleImgInCenter:function (context,image,scale,noOver){
        //获得原有canvas长宽
        var cw = context.canvas.width;
        var ch = context.canvas.height;
        //获得缩放后的canvas长宽
        var scaledCw = cw*scale;
        var scaledCh = ch*scale;
        //获得相对新canvas的缩放对象
        var scaleObj = this.getScaleObj(image,scaledCw,scaledCh,noOver);
        //获取原有canvas中心坐标
        var canvasCenterX = context.canvas.width/2;
        var canvasCenterY = context.canvas.height/2;
        //相对于canvas中心点计算，图像顶点
        var imageStartPointX = canvasCenterX - scaleObj.width/2;
        var imageStartPointY = canvasCenterY - scaleObj.height/2;
        //绘制图像
        context.drawImage(image,imageStartPointX,imageStartPointY,scaleObj.width,scaleObj.height);
    },
    //将image缩放后绘制到canvas中心
    //date:2014-1-31
    //author:MIKUScallion
    drawScaleImageInCenter:function(context,image){
        //获取canvas中心坐标
        var canvasCenterX = context.canvas.width/2;
        var canvasCenterY = context.canvas.height/2;
        //相对原本的canvas获取缩放对象
        var scaleObj = this.getScaleObj(image,context.canvas.width,context.canvas.height);
        //计算图像顶点
        var imageStartPointX = canvasCenterX - scaleObj.width/2;
        var imageStartPointY = canvasCenterY - scaleObj.height/2;
        //绘制图像
        context.drawImage(image,imageStartPointX,imageStartPointY,scaleObj.width,scaleObj.height);
    },
    //获得图像相对与一个矩形的缩放对象
    //该对象包含：width，height
    //date:2014-1-31
    //author:MIKUScallion
    getScaleObj:function(image,width,height,noOver){
        //默认不能过度缩放
        noOver = noOver===undefined? true:noOver;
        var scaleW,scaleH;
        var widthLonger = image.width - width;
        var heightLonger = image.height - height;
        if(noOver){
            //图像无需缩放
            if(widthLonger <=0 && heightLonger<=0 ){
                scaleW = image.width;
                scaleH = image.height;
                return {
                    width:scaleW,
                    height:scaleH
                };
            }
        }
        //固定宽度缩放
        if(widthLonger >= heightLonger){
            scaleW = width;
            var percent = width/image.width;
            scaleH = image.height*percent;
        }
        //固定长度缩放
        else{
            scaleH = height;
            var percent = height/image.height;
            scaleW = image.width*percent;
        }
        //----------------
        return {
            width:scaleW,
            height:scaleH
        };
    }
}

本文由 **** MIKUScallion 原创，更多canvas案例代码：http://blog.****.net/mikuscallion

Canvas-Canvas图像处理、图片查看器、图像缩放功能的实现

相关推荐