实现图片的缩放,拖动插件

最新推荐文章于 2024-06-13 10:02:08 发布

啊呜啦

最新推荐文章于 2024-06-13 10:02:08 发布

阅读量2.2k

点赞数 1

本文链接：https://blog.csdn.net/qq_39815213/article/details/81451057

版权

前段时间里,项目中需要实现对某一张图片的定点缩放功能,并且还要支持图片能够拖动.只是对图片img这个标签进行改动,是无法达到需求要求的,只能够通过canvas的画布绘制对图片进行编辑了.废话不多说,我先上代码.

<head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #imgCanvas{
                width: 600px;
                height: 400px;
            }
        </style>
    </head>
    <body>
        <div id="imgCanvas">
        </div>
    </body>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
var imgurl='img/123456.jpg' ;
//这里随便找个图片替代吧 
    var rect={
        x:300,
        y:380,
        width:80,
        height:100
    }
//rect 是我项目中对图片中人脸进行画框定位,并且这个框是可以随着图片的缩放,拖动而同步的改变;

    createCvs('#imgCanvas',imgurl,rect);

    //这里是构建方法
    function createCvs(el,imgurlm,rect){
        var width=$(el).width();
        var height=$(el).height();
        var canvas = $('<canvas class="canvas"></canvas>')[0];
        canvas.width = width; canvas.height = height;
        var bgimg = new Image;
            bgimg.src = imgurlm;
        bgimg.onload = function(){
        //这里的   bgimg.onload很重要,是图片加载完成后再对画布进行操作.   
            var ctx = canvas.getContext('2d');
            trackTransforms(ctx);
            function redraw(){
                // Clear the entire canvas
                var p1 = ctx.transformedPoint(0,0);
                var p2 = ctx.transformedPoint(canvas.width,canvas.height);
                ctx.clearRect(p1.x,p1.y,p2.x-p1.x,p2.y-p1.y);

                ctx.drawImage(bgimg,0,0,width,height);//图片分辨率是根据盒子大小来定

                ctx.strokeStyle="red";
                ctx.strokeRect(rect.x*width,rect.y*height,rect.width*width,rect.height*height);
            }

            redraw();

            var lastX=canvas.width/2, lastY=canvas.height/2;
            var dragStart,dragged;
            canvas.addEventListener('mousedown',function(evt){
                document.body.style.mozUserSelect = document.body.style.webkitUserSelect = document.body.style.userSelect = 'none';
                lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);
                lastY = evt.offsetY || (evt.pageY - canvas.offsetTop);
                dragStart = ctx.transformedPoint(lastX,lastY);
                dragged = false;
            },false);
            canvas.addEventListener('mousemove',function(evt){
                lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);
                lastY = evt.offsetY || (evt.pageY - canvas.offsetTop);
                dragged = true;
                if (dragStart){
                    var pt = ctx.transformedPoint(lastX,lastY);
                    ctx.translate(pt.x-dragStart.x,pt.y-dragStart.y);
                    redraw();
                }
            },false);
            canvas.addEventListener('mouseup',function(evt){
                dragStart = null;
                if (!dragged) zoom(evt.shiftKey ? -1 : 1 );
            },false);

            var scaleFactor = 1.1;
            var zoom = function(clicks){
                var pt = ctx.transformedPoint(lastX,lastY);
                ctx.translate(pt.x,pt.y);
                var factor = Math.pow(scaleFactor,clicks);
                ctx.scale(factor,factor);
                ctx.translate(-pt.x,-pt.y);
                redraw();
            }

            var handleScroll = function(evt){
                var delta = evt.wheelDelta ? evt.wheelDelta/40 : evt.detail ? -evt.detail : 0;
                if (delta) zoom(delta);
                return evt.preventDefault() && false;
            };
            canvas.addEventListener('DOMMouseScroll',handleScroll,false);
            canvas.addEventListener('mousewheel',handleScroll,false);
        };
        // Adds ctx.getTransform() - returns an SVGMatrix
        // Adds ctx.transformedPoint(x,y) - returns an SVGPoint
        function trackTransforms(ctx){
            var svg = document.createElementNS("http://www.w3.org/2000/svg",'svg');
            var xform = svg.createSVGMatrix();
            ctx.getTransform = function(){ return xform; };

            var savedTransforms = [];
            var save = ctx.save;
            ctx.save = function(){
                savedTransforms.push(xform.translate(0,0));
                return save.call(ctx);
            };
            var restore = ctx.restore;
            ctx.restore = function(){
                xform = savedTransforms.pop();
                return restore.call(ctx);
            };

            var scale = ctx.scale;
            ctx.scale = function(sx,sy){
                xform = xform.scaleNonUniform(sx,sy);
                return scale.call(ctx,sx,sy);
            };
            var rotate = ctx.rotate;
            ctx.rotate = function(radians){
                xform = xform.rotate(radians*180/Math.PI);
                return rotate.call(ctx,radians);
            };
            var translate = ctx.translate;
            ctx.translate = function(dx,dy){
                xform = xform.translate(dx,dy);
                return translate.call(ctx,dx,dy);
            };
            var transform = ctx.transform;
            ctx.transform = function(a,b,c,d,e,f){
                var m2 = svg.createSVGMatrix();
                m2.a=a; m2.b=b; m2.c=c; m2.d=d; m2.e=e; m2.f=f;
                xform = xform.multiply(m2);
                return transform.call(ctx,a,b,c,d,e,f);
            };
            var setTransform = ctx.setTransform;
            ctx.setTransform = function(a,b,c,d,e,f){
                xform.a = a;
                xform.b = b;
                xform.c = c;
                xform.d = d;
                xform.e = e;
                xform.f = f;
                return setTransform.call(ctx,a,b,c,d,e,f);
            };
            var pt  = svg.createSVGPoint();
            ctx.transformedPoint = function(x,y){
                pt.x=x; pt.y=y;
                return pt.matrixTransform(xform.inverse());
            }
        }

        $(el).append(canvas);

    }


    </script>

希望能对你有所帮助

啊呜啦

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
实现图片的缩放,拖动插件

前段时间里,项目中需要实现对某一张图片的定点缩放功能,并且还要支持图片能够拖动.只是对图片img这个标签进行改动,是无法达到需求要求的,只能够通过canvas的画布绘制对图片进行编辑了.废话不多说,我先上代码.&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; ...
复制链接

扫一扫