SmartPicSnipper是我自己封装的一个小工具，用于图片剪切上传

优点：

1. 强大的裁剪功能

   • 支持自由裁剪，用户可以通过鼠标或触摸操作自定义选择裁剪区域。
   • 能够精确控制裁剪的尺寸和比例。

2. 高灵活性

   • 可以在各种图像格式上工作，包括常见的 JPEG、PNG 等。
   • 允许在不同的前端框架和项目中轻松集成和使用。

3. 良好的用户体验

   • 提供直观和流畅的交互，使用户能够轻松完成裁剪操作。
   • 实时预览裁剪效果，让用户在操作过程中清晰看到最终结果。

4. 丰富的配置选项

   • 可以根据项目需求自定义裁剪框的样式、颜色等。
   • 能够设置不同的缩放模式和限制条件。

5. 跨平台支持

   • 在主流的浏览器上都能稳定运行，包括桌面端和移动端。

6. 开源和活跃的社区

   • 开源意味着开发者可以根据自己的需求进行修改和扩展。
   • 活跃的社区提供了丰富的资源、示例和技术支持。

7. 轻量级

   • 不会给页面加载带来过多的负担，保证了页面的性能。

如何使用

1. 引入css

    <link href="./SmartPicSnipper/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="./SmartPicSnipper/static/css/cropper.min.css" rel="stylesheet">
    <link href="./SmartPicSnipper/static/css/cut.min.css" rel="stylesheet">

2. 引入js

<script src="./SmartPicSnipper/static/js/jquery.min.js"></script>
<script src="./SmartPicSnipper/static/js/bootstrap.min.js"></script>
<script src="./SmartPicSnipper/static/js/cropper.min.js"></script>
<script src="SmartPicSnipper/static/js/cut.min.js"></script>

3. 使用

<script>
    $(function () {
        var options = {
            container: $('.container'),// container 容器
            indicator: '#test-img',//img
            request_url: 'http://www.api.com/upload.php',
        }
        new SmartPicSnipper(options);
    })
</script>

获取完整代码
关注 公共号，回复 rule20240807 获取。