jQuery实现图片上传和裁剪插件Croppie

jQuery是非常流行的JavaScript库，其中包含了大量的函数和方法，方便开发人员处理页面元素和事件。在jQuery插件库中，有非常多的实用插件，比如可以实现图片上传和裁剪的Croppie插件。

Croppie插件介绍：

Croppie是一个专注于图片裁剪的轻量级jQuery插件。它简单易用，支持图片上传、显示和剪切操作，适用于各种Web端、移动端场景。Croppie由Jack Moore开发，提供了一些可以自定义的选项和事件处理函数，可以灵活地满足开发人员的不同需求。使用Croppie插件，几乎不需要编写一行JavaScript代码，只需要简单地引入其CSS和JavaScript文件，即可实现图片上传和裁剪的功能。

Croppie插件的应用：

第一步：引入Croppie插件的CSS和JavaScript文件。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.js"></script>

第二步：创建一个包含一个图片元素和一个“上传”按钮的div容器。

<div id="upload-image">
   <img src="https://picsum.photos/400/400/?random" />
   <button id="upload">Upload Image</button>
</div>

第三步：使用Croppie()函数实例化一个Croppie对象。

var $uploadCrop = $('#upload-image').croppie({
    enableExif: true,
    viewport: {
        width: 200,
        height: 200,
        type: 'square'
    },
    boundary: {
        width: 300,
        height: 300
    }
});

在实例化Croppie对象时，我们可以传递一些自定义选项对象。其中，enableExif选项指定是否启用Exif数据解析，viewport选项指定裁剪框的大小和形状，boundary选项指定裁剪框的边界大小。

第四步：将上传的图片绑定到Croppie对象上，等待裁剪操作。

$('#upload').on('click', function(ev) {
    $uploadCrop.croppie('bind', {
        url: 'test.jpg',
        zoom: 0.5
    });
});

在这里，我们使用了bind()方法将“test.jpg”文件绑定到Croppie对象上，并指定了一个初始缩放比例为0.5。此时，绑定的图片将被显示在viewport区域内。

第五步：执行裁剪操作，并显示裁剪后的图片。

$('#crop').on('click', function(ev) {
    $uploadCrop.croppie('result', {
        type: 'canvas',
        size: 'original'
    }).then(function(resp) {
        $('#cropped-image').attr('src', resp);
    });
});

在这里，我们使用了result()方法执行裁剪操作，并指定了输出类型为canvas，输出大小为原始大小。在裁剪完成后，我们可以在回调函数中获取到裁剪后的数据流，再将其作为img元素的src属性赋值，即可在页面上显示裁剪后的图片。

示例1：使用Croppie插件上传并裁剪图片。

<!DOCTYPE html>
<html>
<head>
    <title>Croppie插件示例</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.css" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.js"></script>
</head>
<body>
    <div id="upload-image">
       <img src="https://picsum.photos/400/400/?random" />
       <div>
           <input type="file" id="upload" accept="image/*">
           <button id="crop">Crop Image</button>
       </div>
       <div>
           <img id="cropped-image" />
       </div>
    </div>
    <script>
        var $uploadCrop = $('#upload-image').croppie({
            enableExif: true,
            viewport: {
                width: 200,
                height: 200,
                type: 'square'
            },
            boundary: {
                width: 300,
                height: 300
            }
        });

        $('#upload').on('change', function() {
            var reader = new FileReader();
            reader.onload = function(e) {
                $uploadCrop.croppie('bind', {
                    url: e.target.result
                });
            }
            reader.readAsDataURL(this.files[0]);
        });

        $('#crop').on('click', function(ev) {
            $uploadCrop.croppie('result', {
                type: 'canvas',
                size: 'original'
            }).then(function(resp) {
                $('#cropped-image').attr('src', resp);
            });
        });
    </script>
</body>
</html>

示例2：使用Croppie插件显示和裁剪网络图片。

<!DOCTYPE html>
<html>
<head>
    <title>Croppie插件示例</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.css" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.js"></script>
</head>
<body>
    <div id="upload-image">
       <img src="https://picsum.photos/400/400/?random" />
       <div>
           <input type="text" id="image-url" placeholder="输入图片地址">
           <button id="load">Load Image</button>
           <button id="crop">Crop Image</button>
       </div>
       <div>
           <img id="cropped-image" />
       </div>
    </div>
    <script>
        var $uploadCrop = $('#upload-image').croppie({
            enableExif: true,
            viewport: {
                width: 200,
                height: 200,
                type: 'square'
            },
            boundary: {
                width: 300,
                height: 300
            }
        });

        $('#load').on('click', function(ev) {
            var url = $('#image-url').val();
            $uploadCrop.croppie('bind', {
                url: url
            });
        });

        $('#crop').on('click', function(ev) {
            $uploadCrop.croppie('result', {
                type: 'canvas',
                size: 'original'
            }).then(function(resp) {
                $('#cropped-image').attr('src', resp);
            });
        });
    </script>
</body>
</html>

以上两个示例中，我们分别演示了如何使用Croppie插件上传和裁剪本地图片，以及如何使用Croppie插件显示和裁剪网络图片。在实际的应用中，我们可以根据不同的需求和场景，进行更加灵活和丰富的操作。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery实现图片上传和裁剪插件Croppie - Python技术站

jQuery实现图片上传和裁剪插件Croppie

相关文章