上传图片 裁剪工具 cropper工具类

需要使用layui配合使用开发 

<div class="layui-form-item" style="margin-left:110px">
                        <div class="layui-upload">
                          <div class="layui-upload-list">
                           <img id="srcimgurl" data="0"  οnerrοr="this.src='images/nopic.jpg'" style="height: 80px;width: 80px;margin-top: -25px;" >
                            <p id="demoText"></p>
                          </div>
                        </div> 
                    </div> 

//创建一个裁剪图片的实例
        layui.config({
            base: '../layui/cropper/' //layui自定义layui组件目录
            }).use(['form','croppers'], function () {
            var $ = layui.jquery
                ,form = layui.form
                ,croppers = layui.croppers
                ,layer= layui.layer;

            //创建一个头像上传组件
            croppers.render({
                elem: '#editimg',
                saveW:250,     //保存宽度
                saveH:250,
                autoCrop:true,
                mark:1/1,    //选取比例  保存大小固定  去掉可以自由裁剪
                area:['900px','600px'],  //弹窗宽度
                url: "/imagesave",  //图片上传接口返回和(layui 的upload 模块)返回的JOSN一样
                done: function(url){ //上传完毕回调
                    $("#inputimgurl").val(url);
                    $("#srcimgurl").attr('src',url);
                }
            });

        });

 

posted @   码奴生来只知道前进~  阅读(40)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· [翻译] 为什么 Tracebit 用 C# 开发
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· 2分钟学会 DeepSeek API,竟然比官方更好用!
· .NET 使用 DeepSeek R1 开发智能 AI 客户端
· 刚刚!百度搜索“换脑”引爆AI圈,正式接入DeepSeek R1满血版
点击右上角即可分享
微信分享提示