上传裁剪图片-----Jcrop图片裁剪插件

Posted 2020-10-12 LBO.net

Jcrop文档:http://code.ciaoca.com/jquery/jcrop/
C#裁剪:http://www.cnblogs.com/xyang/archive/2013/02/25/2932145.html

上传图片思路:
　　

1.file选择图片:
<input type="file" class="file" accept="image/gif,image/jpeg,image/png" />

2.上传图片--接口返回上传后服务器图片路径到前端

3.将图片展示出来

4. 启用裁剪

  var core = {
        showCoords: function (c) {
           //存储裁剪信息
            vm.imgX(c.x);
            vm.imgX2(c.x2);
            vm.imgY(c.y);
            vm.imgY2(c.y2);
            vm.imgHeight(c.h);
            vm.imgWidth(c.w);
        },
}

     var jcropApi;
     var jm = {
        allowSelect: true,
        allowMove: true,
        allowResize: true,
        bgOpacity: 0.3,
        aspectRatio: 1,
        minSize: [30, 30],
        maxSize: [1000, 1000],
        onChange: core.showCoords,
        onSelect: core.showCoords
       }  
        //启用裁剪
            $("#defaultImg").Jcrop(jm, function () {
                jcropApi = this;
                //是否初始选框
                    jcropApi.setSelect([0, 0, 140, 140]);
            });   

5.将裁剪信息与图片路径传入后台进行处理保存到服务器并返回裁剪后的图片路径

提示:
更换图片
jcropApi.setImage(新的图片路径, function () {
                jcropApi = this;
                jcropApi.setSelect([0, 0, 140, 140]);
            });