@datagetter.cn/ycc-cropper

image-cropper

Image Cropper used in multiple environments, such as WeChat, Web, H5, powerd by http://datagetter.cn

Image Cropper是一款兼容多平台的图片裁剪工具库，由 http://datagetter.cn 提供技术支持

优势

1. 完全开源，可任意扩展
2. 超高性能，完全基于canvas操作
3. 用法极简，纯函数式调用
4. 功能强大，拖拽、双击、缩放、旋转、多点触控....
5. 多平台兼容，小程序、H5、PC、UniAPP等，有canvas的地方就能用

安装

npm install @datagetter.cn/ycc-cropper --save

小程序用法

wxml文件

<canvas
  type="2d" id="myCanvas"
  bindtouchstart="touchevent" 
  bindtouchmove="touchevent"
  bindtouchend="touchevent">
</canvas>

<!-- 确认裁剪按钮 -->
<button type="primary" size="mini" bindtap="onCropClick">确认</button>

page/index.js脚本文件

// miniprogram/pages/index.js
const Cropper = require('@datagetter.cn/ycc-cropper').default;

Page({
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: async function (options) {
    const self = this;
    // 微信需绑定安全域名，此路径可为微信本地图片路径
    const imageTempUrl = 'http://datagetter.cn:9000/datagetter.cn/public/original/%E5%88%98%E4%BA%A6%E8%8F%B2.jpg';

    wx.createSelectorQuery().select('#myCanvas')
    .fields({ node: true, size: true })
    .exec((res) => {
        // 直接函数式调用 进行初始化
        self.cropper = new Cropper(imageTempUrl,{
            wrapW:wx.getSystemInfoSync().windowWidth,
            wrapH:wx.getSystemInfoSync().windowHeight,
            canvasDom:res[0].node,
            appenv:'wxapp'
        });
    })
  },

  // 确认按钮 处理裁剪后的图片
  async onCropClick(e){
    let res = await cropper.getCropImage('myCanvas');

    // 获取到临时文件路径 res.tempFilePath
    // do something with res.tempFilePath
  },

  // 捕获微信canvas事件
  touchevent(e){
    cropper.ycc.gesture.touchLifeTracer[e.type](e);
  },

})

Web端用法

HTML片段

<canvas id="canvas"></canvas>

<!-- 确认裁剪按钮 -->
<button onclick="takePhoto()">确认</button>

ES6模块调用

import Cropper from '../build/lib.js'

// 微信需绑定安全域名，此路径可为微信本地图片路径
const imageTempUrl = 'http://datagetter.cn:9000/datagetter.cn/public/original/%E5%88%98%E4%BA%A6%E8%8F%B2.jpg';

// 直接函数式调用 进行初始化
var cropper = new Cropper(imageTempUrl,{
    wrapW:300,
    wrapH:400,
    canvasDom:document.getElementById("canvas")
});

// 响应确认按钮
window.takePhoto = function (){
    var imgData = cropper.getCropImage();
    // 获取到临时文件路径 imgData
    // do something with imgData
}

ES5 传统模式调用 可直接引入script脚本

<script src="./node_modules/@datagetter.cn/ycc-cropper/build/lib.js"></script>

new Cropper(imageUrl,option)详细说明

参数说明

参数名	类型	必填	默认值	描述
imageUrl	String	是	null	待裁切的原图地址，小程序内可为本地路径
option.canvasDom	HTMLCanvasDocument	是	null	canvas的元素
option.wrapW	Number	否	800	可视区宽度
option.wrapH	Number	否	800	可视区高度
option.cropW	Number	否	200	裁剪区宽度
option.wrapW	Number	否	800	裁剪区高度
option.maskColor	String	否	'rgba(0,0,0,0.6)'	遮罩的色值
option.lineColor	String	否	'#fff'	线条的色值
option.enableZoom	Boolean	否	true	允许双指缩放
option.enableDoubleTapZoom	Boolean	否	true	允许双击缩放
option.enableRotate	Boolean	否	true	允许旋转
option.enableDrag	Boolean	否	true	允许拖拽

cropper对象 属性

属性	类型	描述
options	Object	只读，cropper实际运行使用的配置
ycc	Ycc	只读，cropper绑定的Ycc对象，参看Ycc文档
layer	Ycc.Layer	只读，cropper绑定的Ycc.Layer对象，参看Ycc文档
imageUI	Ycc.UI.Image	只读，图片的在Ycc的Image对象，参看Ycc文档
initImageRect	Ycc.Math.Rect	只读，图片初始时在Ycc图层的位置信息，参看Ycc文档

cropper对象 方法

方法名	入参	出参	描述
getCropImage	canvasId{String}	image{FilePath|ImageData}	获取裁剪区的图片 小程序返回图片路径，H5、Web返回ImageData
clear			清空当前画布所有内容，当多个Cropper实例公用同一个canvas时，可能需要调用

示例

• Web端示例
• 小程序示例
• H5端示例