圖片的拖拽，縮放，截圖功能--自寫版

時間 2019-12-12

標籤圖片縮放截圖功能简体版

原文原文鏈接

取名字是個困難的事！！css

先看效果：http://www.sulishibaobei.com/canvas/canvas1/text.html 請在谷歌瀏覽器下查看 html

html代碼：git

    <div class="bg">
        <img src="2.jpg" alt="頭像" id="pic" class="drag">
        <div class="mask">
        </div>
    </div>
    <canvas id='c3' width="200" height="200"></canvas>
    <img src="2.jpg"  class="preview"  >
    <p style="width:100%;">
        <button type="button" id="btn1" onclick="ImageChange(true)">放大</button>
        <button type="button" id="btn2" onclick="ImageChange(false)">縮小</button>
        <button type="button" id="btn3" onclick="RotateChange()">旋轉</button>
        <button type="button" id="btn4" onclick="Screenshot()">截圖</button>
    </p>

css代碼：github

 .bg {
            border: 1px solid #ddd;
            width: 300px;
            height: 300px;
            overflow: hidden;
            position: relative;
            cursor: move;
            margin: 0 auto;
            display: inline-block;
        }

       .bg>img {   
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
            position: absolute;
            vertical-align: middle;         
            width: 100%;
            height: 100%;   
        }

        .mask {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            position: absolute;
            box-shadow: 0px 0px 0px 110px rgba(255, 255, 255, 0.5);
            z-index: 100;
        }
        #c3{
             border:1px solid #ddd;
             display:inline-block; 
             /* position: absolute; */
             margin-left:20px ;

        }
        .preview{
            width:200px;
            height: 200px;
            margin-left:20px;
        }

看效果就是這樣的：canvas

如今是什麼功能都沒有的；瀏覽器

1.如今咱們在作放大縮小；spa

  //放大縮小
        var zoom = 1;
        var left = $("#pic").width(), tops = $("#pic").height();
        function ImageChange(args) {
            var oimg = $("#pic"), imgW = oimg.width(), imgH = oimg.height();
            if (args) {
                if (zoom < 2) {
                    zoom += 0.1;
                    oimg.css({ 'width': imgW * 1.1, 'left': -(imgW * 1.1 - left) / 2 });  用計算寬高，仍是transform ,zoom都是能夠的。不限制
                    oimg.css({ 'height': imgH * 1.1, 'top': -(imgH * 1.1 - tops) / 2 });
                    // oimg.css({ 'transform':'scale('+zoom+')'});
                }
            } else {
                if (zoom > 1) {
                    zoom -= 0.1
                    // oimg.css({ 'transform':'scale('+zoom+')'});
                    oimg.css({ 'width': imgW / 1.1, 'left': -(imgW / 1.1 - left) / 2 });
                    oimg.css({ 'height': imgH / 1.1, 'top': - (imgH / 1.1 - tops) / 2 });
                }
            }
            return zoom;
        }

點擊放大縮小按鈕就能看到效果啦；code

2.鼠標移上圖片滾動時放大縮小：orm

 //鼠標移上去滾動放大縮小
        document.getElementsByClassName('mask')[0].addEventListener("mousewheel", function (e) {
            var e = e || window.event, v = e.wheelDelta || e.detail;
            if (v > 0) { //這裏主要明白是像上滾動仍是下滾動
                ImageChange(true);
                window.event.returnValue = false;
                return false;
            } else {
                ImageChange(false);
                window.event.returnValue = false;
                return false;
            }
        })

這個就比較簡單，只要再次調用放大縮小方法就行。注意這裏不能用Jquery,由於Jquery沒有封裝鼠標的滾輪事件喲。htm

3.接下啦實現圖片的拖拽：

 //拖拽
        var oDiv = document.getElementById('pic');
        var flag = false;
        var clientX, newX;
        $(".mask").on('mousedown', function (e) {
            var disX = e.clientX - oDiv.offsetLeft;
            var disY = e.clientY - oDiv.offsetTop;
            flag = true;
            clientX = e.clientX;
            clientY = e.clientY;
            document.onmousemove = function (ev) {
                newX = clientX - ev.clientX;
                newY = clientY - ev.clientY;
                if (flag && zoom != 1) { //這裏限制了當zoom等於1的時候不容許拖拽
                    //獲取當前移動的距離
                    var a = $("#pic").css('left').replace(/px/, '');
                    var b = $("#pic").css('top').replace(/px/, '');
                    var c = $("#pic").css('right').replace(/px/, '');
                    var d = $("#pic").css('bottom').replace(/px/, '');
                    if (newX < 0) { //向右拖動     //限制拖拽的邊距，不能旁邊留空
                        if (Math.abs(a) > Math.abs(ev.clientX - disX)) {  //據左邊的距離大於拖動的
                            oDiv.style.left = ev.clientX - disX > 0 ? 0 : ev.clientX - disX + "px";
                        }
                    } else {
                        if (Math.abs(c) > Math.abs(ev.clientX - disX)) {  //據右邊的距離大於拖動的
                            oDiv.style.left = ev.clientX - disX > 0 ? 0 : ev.clientX - disX + "px";
                        }
                    }
                    if (newY < 0) { //向上拖動
                        if (Math.abs(b) > Math.abs(ev.clientY - disY)) {  //據上邊的距離大於拖動的
                            oDiv.style.top = ev.clientY - disY > 0 ? 0 : ev.clientY - disY + "px";
                        }
                    } else {
                        if (Math.abs(c) > Math.abs(ev.clientY - disY)) {  //據下邊的距離大於拖動的
                            oDiv.style.top = ev.clientY - disY > 0 ? 0 : ev.clientY - disY + "px";
                        }
                    }
                }
            }
            document.onmouseup = function () {
                document.onmousemove = null;
                document.onmouseup = null;
                flag = false;
            }
        })

當zoom=1時是不容許拖拽，先放大才能拖拽的；

4.圖片旋轉

 //旋轉
        var i = 1;
        function RotateChange() {
            $("#pic").css('transform', 'rotate(' + 90 * i + 'deg)');
            i++;
        }

5.截圖功能

  //截圖功能
        function Screenshot() {
            var canvas = document.getElementById('c3');
            var pic = document.getElementById('pic');
            var mask = document.getElementsByClassName('mask')[0];
            var preview = document.getElementsByClassName('preview');
            var img = new Image();
            img.src = pic.src;
            var c = img.width / $("#pic").width();//計算出原圖和縮放圖的比例
            var b = img.height / $("#pic").height();
            if (canvas.getContext) {
                    var ctx = canvas.getContext('2d');
                    ctx.clearRect(0, 0, 300, 300); //清楚上一次的畫布  
                    ctx.drawImage(pic, Math.abs(pic.offsetLeft) * c, Math.abs(pic.offsetTop) * b, mask.offsetWidth * c, mask.offsetHeight * b, 0, 0, canvas.offsetWidth, canvas.offsetWidth);  //必定要乘以原圖和縮放圖的比例
                    //轉成base64 
                   var dataUrl = canvas.toDataURL('image/jpeg', 0.6);
                   preview[0].src = dataUrl;         
            }
        }