taro-image-clipper

小程序图片裁剪器，基于Taro

特点

1. 使用简单，样式简洁
2. 支持图片缩放
3. 支持自定义裁剪框宽高
4. 支持自定义放大倍数
5. 缩放、裁剪流畅

效果

安装

npm install taro-image-clipper

引入

import { ImageClipper } from 'taro-image-clipper'

使用

基础

// 是否展示裁剪器
const [showClipper, setShowClipper] = useState(false)
// 选择的原始图片
const [originalImage, setOriginalImage] = useState("")
// 裁剪后图片
const [clippedImage, setClippedImage] = useState("")

<ImageClipper
  visible={showClipper}
  src={originalImage}
  onCut={(imgPath) => {
    setClippedImage(imgPath)
    setShowClipper(false)
  }}
  onCancel={() => {
    setShowClipper(false)
  }}
/>

完整使用demo

import { View, Button, Image } from "@tarojs/components"
import Taro from "@tarojs/taro"
import { useState } from "react"
import { ImageClipper } from 'taro-image-clipper'

// 图片裁剪使用Demo
export default () => {
  // 是否展示裁剪器
  const [showClipper, setShowClipper] = useState(false)
  // 选择的原始图片
  const [originalImage, setOriginalImage] = useState("")
  // 裁剪后图片
  const [clippedImage, setClippedImage] = useState("")

  return (
    <View >
      <View style={{ padding: '20rpx' }}>
        {/* 选择图片按钮 */}
        <Button
          onClick={() => {
            Taro.chooseImage({
              count: 1,
            }).then((res) => {
              setShowClipper(true)
              setOriginalImage(res.tempFilePaths[0])
            })
          }}
        >
          选择图片
        </Button>
        <View style={{ margin: '20px 0' }}>裁剪结果：</View>
        {/* 裁剪结果展示 */}
        <Image
          src={clippedImage}
          style={{
            borderRadius: "16rpx",
            height: "500rpx",
            width: "500rpx",
          }}
        />
      </View>
      {/* 裁剪组件 */}
      <ImageClipper
        visible={showClipper}
        src={originalImage}
        onCut={(imgPath) => {
          setClippedImage(imgPath)
          setShowClipper(false)
        }}
        onCancel={() => {
          setShowClipper(false)
        }}
      />
    </View>
  )
}

参数说明

| 参数 | 类型 | 默认值 | 必填 | 说明 | | :--------- | :--------- | ----------- | :--: | :--------------------- | |visible | boolean | 无 | 是 | 是否展示图片裁剪器 | |src | string | 无 | 是 | 要裁剪的图片 | |clipperWidth | number | 500 | 否 | 裁剪框宽度 | |clipperHeight | number | 500 | 否 | 裁剪框高度 | |maxScale | number | 5 | 否 | 最大放大倍数，maxScale >= 1| |fileType | string | jpg | 否 | 裁剪后导出的图片的格式，只支持 'jpg' 或 'png' | |quality | number | 1 | 否 | 导出图片的质量，取值为 0 ~ 1 | |clipperCutCanvasId| string | clipperCutCanvasId | 否 | 用于裁剪的canvas id | | onCut | (imgPath: string) => void | ( ) => { }| 否 | 点击底部的完成按钮，执行裁剪，成功则触发该回调 | | onCancel | ( ) => void | ( ) => { } | 否 | 点击取消按钮回调 |