使用canvas進行圖片裁剪簡單功能

1.html部分

使用一個input[type="file"]進行圖片上傳；

canvas進行圖片的裁剪展示

<div>
    <input type="file" id="imgFile">
</div>
<div id="demoBox" style="width: 300px;height: 300px;position: absolute;left: 300px;top: 0;overflow:hidden;border: 1px solid #ccc">
    <img id="demoImg" alt="">
    <div style="width: 150px;height: 150px;border: 1px solid #4fb8e3;background:rgba(255,255,255,.5);position: absolute;left: 0;top: 0;z-index: 1000;cursor:move" id="chooseBox"></div>
</div>
<div style="position: absolute;left: 700px;top: 0">
    <canvas id="myCan" width="150" height="150"></canvas>
    <button id="cut">裁剪文件</button>
    <button id="btn">后台返回獲取裁剪后的文件</button>
    <img id="returnImg" alt="">
</div>

2.js部分

a.使用file文件的files屬性，獲取上傳圖片的基本屬性；

b. new FileReader() 對象，使用其屬性e.target.result將圖片地址轉為base64，賦給img標簽上；

c. 創建一個裁剪選區，用以選擇需要裁剪的部位，同事使用mousedown,mousemove,mouseup事件進行選框的拖拽；

d. 使用canvas中的drawImage()方法進行圖片的裁剪，展示到canvass畫布上；

e.用戶在使用裁剪時候，可多次裁剪，因此需要每次裁剪之后利用clearRect()方法，進行畫布的清除

// 圖片裁剪

    window.onload = function () {

        // 上傳圖片
        var canvas = document.getElementById('myCan');
        var imgFile = $('#imgFile');
        var demoImg = $('#demoImg');
        var ctx = canvas.getContext('2d');
        imgFile.change(function () {
            var file = imgFile[0].files[0];
            console.log(file);
            var reader = new FileReader();
            reader.onload = function (e) {
                console.log(e);
                demoImg.attr('src', e.target.result);
            };
            reader.readAsDataURL(file);
        });

        // 位移選裁框
        var dragDiv = $('#chooseBox');
        dragDiv.mousedown(function (e) {
            var oleft = $(this).position().left;
            var otop = $(this).position().top;
            var X = e.pageX - oleft;
            var Y = e.pageY - otop;
            $(document).mousemove(function (e) {
                var left = e.pageX - X;
                var top = e.pageY - Y;
                if (left <= 0) {
                    left = 0;
                }
                else if (left >= ($('#demoBox').outerWidth(true) - dragDiv.outerWidth(true))) {
                    left = ($('#demoBox').outerWidth(true) - dragDiv.outerWidth(true));
                }

                if (top <= 0) {
                    top = 0;
                }
                else if (top >= ($('#demoBox').outerHeight(true) - dragDiv.outerHeight(true))) {
                    top = ($('#demoBox').outerHeight(true) - dragDiv.outerHeight(true));
                }

                dragDiv.css({
                    left: left,
                    top: top
                });

            });
        });
        $(document).mouseup(function () {
            $(this).unbind('mousemove');
        });

        // 裁剪
        function cut() {
            var sx = dragDiv.position().left;
            var sy = dragDiv.position().top;
            var img = document.getElementById('demoImg');
            ctx.drawImage(img, sx, sy, 150, 150, 0, 0, 150, 150);
        }

        $('#cut').click(function () {
            ctx.clearRect(0, 0, 150, 150);
            cut();
        });

    };