Giter Club home page Giter Club logo

taro-cropper's Introduction

taro-cropper

项目地址: https://github.com/SunnyQjm/taro-cropper

TaroCropper 是Taro小程序框架下使用的图片裁剪,基于canvasAPI进行实现,支持滑动和缩放,目前测试在微信小程序端和H5端可以正常使用。

使用方式

  • 首先用npm安装

    npm install --save taro-cropper
  • 引入组件库

    import {
      TaroCropper
    } from 'taro-cropper';
  • 在项目配置文件 config/index.js 中添加如下配置

    h5: {
        esnextModules: ['taro-cropper']
    }

    该配置的作用是,在H5端使用本库的时候,对应的单位会进行转换(px => rem

  • 在代码中使用

    <TaroCropper
      fullScreen
      onCut={res => {
           this.setState({
           cutImagePath: res
          })
      }}
    />

    具体的使用实例参考taro-cropper-demo

参数说明

参数名 参数类型 参数说明 默认值
cropperCanvasId string 用于绘制的Canvas的id cropperCanvasId
cropperCutCanvasId string 用于裁剪的Canvas的id cropperCutCanvasId
width number 整个控件的宽度(单位为rpx) 750(即充满屏幕宽度)
height number 整个控件的高度(单位为rpx) 1200
cropperWidth number 裁剪框的宽度(单位为rpx) 400
cropperHeight number 裁剪框的高度(单位为rpx) 400
themeColor string 主题色(裁剪框四角的颜色以及底部完成按钮的颜色) #0f0(绿色)
maxScale number 最大放大倍数(maxScale > 1) 3
fullScreen boolean 控件是否充满全屏 false
src string 待裁剪的图片的路径 ‘’
hideFinishText boolean 是否隐藏底部的完成按钮 false
onCut (cutImagePath: string) => void 点击底部完成按钮时会执行裁剪操作,可以通过此回调接收裁剪结果 () => {}
onFail (err) => void 裁剪失败的回调 () => {}

效果展示

taro-cropper's People

Contributors

sunnyqjm avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.