使用canvas进行图片裁剪简单功能

Posted 2020-09-16 还能再菜点吗？

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();
        });

    };