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的基本用法介绍链接,戳这里

 

 

  

猜你喜欢

转载自www.cnblogs.com/GoTing/p/11363494.html
0条评论
添加一条新回复