@datagetter.cn/ycc-cropper v1.1.2

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)详细说明

参数说明

cropper对象 属性

cropper对象 方法

示例

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