jquery jcrop 与后台截取图片

最新推荐文章于 2020-12-21 11:42:38 发布

等待逆袭

最新推荐文章于 2020-12-21 11:42:38 发布

阅读量1.4k

点赞数

分类专栏： jquery 文章标签： jquery 图片 jcrop 截取

本文链接：https://blog.csdn.net/hell_liul/article/details/52181525

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

主要是前台工作，后台比较简单

jcrop

                $jQuery('#target').Jcrop({
                          allowSelect: true,
                          bgOpacity: 0.5,
                          baseClass: 'jcrop',
                          //bgOpacity: .6,
                          aspectRatio: 3/2,  //设置选择框的比重
                          boxWidth: 600,//用于设置画布的大小可以将布局按倍数缩放
                          boxHeight: 600,
                          onChange:   showCoords,
                          onSelect:   showCoords,
                          onRelease:  clearCoords
                     }, function() {
                        jcropApi = this;
                        jcropApi.setSelect([30,30,30+270,30+170]);
                        //alert(222);
                        //jcropApi.setImage(blobURL);
                     });

function showCoords(c)
{
$jQuery(‘#x1’).val(c.x);$ jQuery(‘#y1’).val(c.y);
$jQuery(‘#x2’).val(c.x2);$ jQuery(‘#y2’).val(c.y2);
$jQuery(‘#w’).val(c.w);$ jQuery(‘#h’).val(c.h);
};

x、y是左上角坐标
w,h是宽度和高度

这里注意boxWidth：是画布的限制，
如果图片特别大，到了2000px，那么boxwidth就会对他进行限制，
等比例限制到boxWidth下；
原理上：将原来的div、img隐藏、新建一个div img是比例缩放的；
这时候就在画布大小上就可以展示下了，记录下xscale、yscale;

当进行选择onchange 事件后，
回调unscale，让比例等比例返回，这样你得到的x、y和width、height就是原值了
以下相关源码：

      function update(select) //{{{
      {
        var c = Coords.getFixed();

        resize(c.w, c.h);
        moveto(c.x, c.y);
        if (options.shade) Shade.updateRaw(c);

        awake || show();

        if (select) {
          options.onSelect.call(api, unscale(c));
        } else {
          options.onChange.call(api, unscale(c));
        }
      }

    function unscale(c) //{{{
    {
      return {
        x: c.x * xscale,
        y: c.y * yscale,
        x2: c.x2 * xscale,
        y2: c.y2 * yscale,
        w: c.w * xscale,
        h: c.h * yscale
      };
    }