zoukankan      html  css  js  c++  java
  • 上传、裁剪图片-----Jcrop图片裁剪插件

    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]);
                });
  • 相关阅读:
    Gym
    博客搬家
    UVA
    UVA
    UVA
    UVA
    UVA
    UVA1589——xiangqi
    SDUSToj第十一次作业源代码格式问题
    【成长之路】【python】python基础3
  • 原文地址:https://www.cnblogs.com/lbonet/p/7747150.html
Copyright © 2011-2022 走看看