欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-04-09 09:14:00
...

需要使用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);
                }
            });

        });