cropper.js 实现HTML5 裁剪图片并上传(裁剪上传头像。)

************* 注： cropper.js 版本更新至1.5.11 。****

github上的官方cropper.js地址是     https://github.com/fengyuanchen/cropperjs

 

新的    下载地址

更新版本后发现监听事件不能用了，查了下监听事件改动了。如下：

// Cropper
    $image.on({
        ready: function (e) {
            //This event fires when the target image has been loaded and the cropper instance is ready for operating.
            //百度翻译：此事件在目标图像已加载且cropper实例已准备好进行操作时激发。
            //即：在我选择完图片后执行
            console.log(e.type);
            $("#containerDiv").show();
            $("#imgEdit").show();
        },
        cropstart: function (e) {
            //操作开始
            //其中action 包含了
            /**
             * Options:
             'crop': create a new crop box    创建了新裁剪框
             'move': move the canvas (image wrapper)   移动了图片
             'zoom': zoom in / out the canvas (image wrapper) by touch.  图片 放大或缩小
             'e': resize the east side of the crop box   裁剪框右边 调整大小
             'w': resize the west side of the crop box   裁剪框左边 调整大小
             's': resize the south side of the crop box   裁剪框下边 调整大小
             'n': resize the north side of the crop box   裁剪框上边 调整大小
             'se': resize the southeast side of the crop box   裁剪框右下角 调整大小
             'sw': resize the southwest side of the crop box   裁剪框左下角 调整大小
             'ne': resize the northeast side of the crop box   裁剪框右上角 调整大小
             'nw': resize the northwest side of the crop box   裁剪框左上角 调整大小
             'all': move the crop box (all directions)    裁剪框 整个块移动
             */
            console.log(e.type, e.detail.action);
        },
        cropmove: function (e) {
            //操作移动中
            console.log(e.type, e.detail.action);
        },
        cropend: function (e) {
            //操作动作结束
            console.log(e.type, e.detail.action);
        },
        crop: function (e) {
            //This event fires when the canvas (image wrapper) or the crop box changed.
            //在画布(图片) 或者裁剪框变化时触发
            console.log(e.type);
        },
        zoom: function (e) {
            //This event fires when a cropper instance starts to zoom in or zoom out its canvas (image wrapper).
            //当放大或缩小时触发
            console.log(e.type, e.detail.ratio);
        }
    }).cropper(options);

 

 

************* 注：以下是根据cropper.js 是 0.7 版，测试的效果,   目前可能会有点问题，在目前的手机浏览器上 拖拽放大缩小图片时 会出现黑图失效   。****

  我的需求功能：在手机端实现上传头像，带裁剪框。

cropper.js  通过canvas实现图片裁剪，最后在通过canvas获取裁剪区域的图片base64串。

cropper 文档：官方文档是全英文的，好吧我看不懂。只能一个个试试效果，就有了下面的总结。官方文档<-点这

1.container 容器   2.canvas 图片   3.crop  裁剪框

option相关参数说明：

 

viewMode 显示模式

• Type: Number
• Default: 0
• Options:
  • 0: the crop box is just within the container    裁剪框只能在 1内移动
  • 1: the crop box should be within the canvas   裁剪框 只能在  2图片内移动
  • 2: the canvas should not be within the container  2图片 不全部铺满1 （即缩小时可以有一边出现空隙）
  • 3: the container should be within the canvas  2图片 全部铺满1 （即 再怎么缩小也不会出现空隙）

dragMode  拖动模式

• Default: 'crop'
• Options:
  • 'crop': create a new crop box  当鼠标 点击一处时根据这个点重新生成一个 裁剪框
  • 'move': move the canvas    可以拖动图片
  • 'none': do nothing  图片就不能拖动了

Define the dragging mode of the cropper.

toggleDragModeOnDblclick   默认true .是否允许 拖动模式 “crop” 跟“move” 的切换状态。。即当点下为crop