cropper.js图片裁剪——第二弹

之前有研究过图片裁剪，主要是是获取到裁剪的坐标，然后将坐标以及原图上传到后台，后台进行裁剪的方法：链接地址

今天主要是前端进行裁剪，之后吧裁剪过得图片base64源码，上传至后台的方法：

1.引入资源

资源下载地址：

Cropper v4.0.0
* https://github.com/fengyuanchen/cropper

移动端使用的时候还要修改一些样式适配移动端

这里放一个使用过的样式：

.dialog {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 99;
  top: 0;
  left: 0;
}
.mask {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 1);
}
.main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.handle {
  position: fixed;
  bottom: .7rem;
  right: 0;
  z-index: 100;
  color: #fff;
}
.handle span {
  display: block;
  background: #000;
  line-height: 1.4rem;
  padding: 0 1rem;
  cursor: pointer;
  font-size: .52rem;
  float: left;
  margin-right: .3rem;
}

View Code

2.html结构

<!-- 图片裁剪-->
<div class="dialog">
    <div class="mask"></div>
    <div class="main">
        <img src="" alt="" id="image">
    </div>
    <div class="handle clearfix">
        <span class="cancle">取消</span>
        <span class="finish">完成</span>
    </div>
</div>

View Code

3.js

 $(".dialog").show();
                            //$('#image') 是img 标签，是获取到的result
                            // destroy 销毁cropper并从图像中删除整个cropper
                            //cropper 开始调用裁剪
                            $('#image').cropper('destroy').attr('src', result).cropper({
                                aspectRatio: 0.75, // 纵横比
                                //viewMode定义cropper的视图模式
                                /*  0：没有限制，3可以移动到2外。
                                    1 : 3只能在2内移动。
                                    2：2图片 不全部铺满1 （即缩小时可以有一边出现空隙）
                                    3：2图片填充整个1
                                    */
                                viewMode: 1,
                                //显示在裁剪框上方的虚线
                                guides: false,
                            });
                            $(".finish").on('click', function () {
                                //确定裁剪
                                crop();
                                $(".dialog").hide();
                            });
                            $(".cancle").on('click', function () {
                                //裁剪取消
                                crop_cancle();
                                $(".dialog").hide();
                            });

点击确定和取消的方法

 var resImg = null;      //剪切后图片base64编码资源
    //确定裁剪的方法
    var crop = function () {
        var img = $('#image');
        var $target = $('#upload');
        //getCroppedCanvas画一张剪裁的图片。如果没有剪裁，则返回一个绘制整个im的画布
        resImg = img.cropper('getCroppedCanvas', {
            // width输出Canvas的宽度
            // height输出Canvas的高度
            width: 900,
            height: 1200
        }).toDataURL('image/jpeg');//返回一个包含图片展示的 data URI 。可以使用 type 参数其类型，默认为 PNG 格式。图片的分辨率为96dpi。q
        $target.attr('src', resImg);
      
        //利用表单提交 这个是隐藏input用来提交 裁剪之后的banse64源码
        $('#upImg').val(resImg);
    };
    //取消裁剪
    var crop_cancle = function () {
        console.log( $('#upImg').val())
        //将图片置空
        $('#image').attr('src', '');
    };

这样就可以获取到裁剪之后的banse64源码，利用表单提交

关于cropper的基本用法介绍链接，戳这里

cropper.js图片裁剪——第二弹

猜你喜欢