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

2021-05-16 16:29

阅读：559

标签：信息 maxsize style 上传图片 htm spec 后台 asp show

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]);
            });

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

标签：信息 maxsize style 上传图片 htm spec 后台 asp show

原文地址：http://www.cnblogs.com/lbonet/p/7747150.html

上一篇：AJAX异步刷新需要填写的参数

下一篇：centos7安装apache

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：上传、裁剪图片-----Jcrop图片裁剪插件
文章链接：http://soscw.com/index.php/essay/86330.html

亲，登录后才可以留言！

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

评论

热门文章

推荐文章

最新文章

置顶文章