Layui+photoclip插件实现图片裁剪功能

最新推荐文章于 2024-08-15 11:02:18 发布

置顶

做一只有理想的猫

最新推荐文章于 2024-08-15 11:02:18 发布

阅读量1.3k

点赞数

分类专栏： layui 文章标签： layui 图片上传图片裁剪

本文链接：https://blog.csdn.net/gods_boy/article/details/108298052

版权

该博客介绍了如何结合Layui框架与photoclip插件来实现图片裁剪功能。首先，需要引入两者对应的JS文件。接着，在HTML中编写必要的结构。最后，通过js代码调用UploadImg方法，该方法与Layui图片上传功能类似，实现了图片裁剪的功能。

摘要由CSDN通过智能技术生成

Layui 图片上传功能实现后，现在来实现图片裁剪功能，代码还是接着使用图片上传的代码。没有看过的可以移步到 Layui图片上传文章

引入photoclip和Layui的js文件

在这q

HTML代码

  <form class="layui-form" onsubmit="return false">
        <div class="layui-row">
            <div class="">
                <div id="clipArea"></div>
                <input id="bas" type="hidden" />
                <input type="file" id="file">
                <div id="view"></div>
                <div class="layui-form-item" style="text-align:center">
                    <button class="layui-btn" id="clipBtn">截取</button>
                    <button class="layui-btn layui-btn-danger" id="BtnSure">确认</button>
                    <button class="layui-btn layui-btn-normal" id="btnClose" style="margin-left:10px;">关闭</button>
                </div>

            </div>

        </div>