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">
  1. 引入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>
  1. 使用
<script>
    $(function () {
        var options = {
            container: $('.container'),// container 容器
            indicator: '#test-img',//img
            request_url: 'http://www.api.com/upload.php',
        }
        new SmartPicSnipper(options);
    })
</script>

cut.png

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

Last modification:August 7, 2024
如果觉得我的文章对你有用,请随意赞赏