sunnyqjm / taro-cropper Goto Github PK

View Code? Open in Web Editor NEW

103.0 3.0 44.0 277 KB

Taro框架下的跨端图片裁剪组件，目前支持微信小程序端，QQ小程序端, 支付宝小程序端, 字节跳动小程序端, 百度小程序端和H5端

Home Page: https://sunnyqjm.github.io/taro-cropper/#/

JavaScript 8.30% TypeScript 87.11% HTML 3.30% SCSS 1.30%

taro-cropper's Introduction

taro-cropper

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

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

关于Taro不同版本安装

taro v1.x 和 taro v2.x

如果使用Taro1和2进行开发，库的使用和之前一样，直接安装即可，基本支持微信小程序端, QQ小程序端, 支付宝小程序端, 字节跳动小程序端, 百度小程序端和H5端。
```
npm install --save taro-cropper
```
taro v3.x React

如果使用Taro3进行开发，且使用的React进行开发，则可以选择安装下述包。目前在微信小程序端测试成功，H5端因为taro实现的一些问题，暂时还有问题。
```
npm install --save taro-cropper@react
```

使用方式

首先用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	裁剪失败的回调	() => {}
hideCancelText	boolean	是否隐藏取消按钮	true
onCancel	() => void	点击取消按钮的回调	() => {}
finishText	string	完成按钮文字	完成
cancelText	string	取消按钮文字	取消
fileType	'jpg' \| 'png' \| string	裁剪后导出的图片的格式，只支持 'jpg' 或 'png'	'jpg'
quality	number	导出图片的质量，取值为 0 ~ 1（1表示质量最高）	1

效果展示

taro-cropper's People

Contributors

Stargazers

Watchers

Forkers

nick121212 wqb2017 ks3dev byte16 liurubin markchenlife kinghulu shenghanqin lhoiwin janylee change-j mataoct dongxiaofan wulinshan leadrive dogwars jenerse sandlz guopenghui1003 han88829 zzcandor lmlzc suoutsky diamondto linecode lzs2000131 lannly beautiful-night przeblysk davidalphafox 960590968 zb201307 ddamon ahjoyer xiao252 tjsglion daheaths nono1314 vimko dennsliu lisf lthioy 3vand0ng millionslab

taro-cropper's Issues

taro3.1.0更新到3.2.0报错

🙅 编译失败. 2022/8/22 下午1:47:51

./node_modules/taro-cropper/dist/weapp/components/taro-cropper/index.tsx
Module build failed (from ./node_modules/@tarojs/mini-runner/node_modules/babel-loader/lib/index.js):
SyntaxError: E:\project\deepexi-dm-mobile1\node_modules\taro-cropper\dist\weapp\components\taro-cropper\index.tsx: Unexpected reserved word 'interface'. (10:0)

8 |
9 |

10 | interface TaroCropperComponentProps {
| ^
11 | cropperCanvasId: string, // 画布id
12 | cropperCutCanvasId: string, // 用于裁剪的canvas id
13 | width: number, // 组件宽度

监听文件修改中...
9 |

10 | interface TaroCropperComponentProps {
| ^
11 | cropperCanvasId: string, // 画布id 12 | cropperCutCanvasId: string, // 用于裁剪的canvas id
13 | width: number, // 组件宽度

(node:27628) UnhandledPromiseRejectionWarning: [object Array]
(Use node --trace-warnings ... to show where the warning was created)
(node:27628) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 5)
(node:27628) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

传入高度和宽度自适应问题

描述：顶部和底部的显示是固定的，中间空白的地方放入这个taro-cropper组件，通过select('#id).boundingClientRect()，获取要填充部分的宽高，将此宽高可是传入taro-cropper之后，taro-cropper占据的位置比预测的小很多，请问这个自适应怎么处理，谢谢！

src必须为base64格式吗？

没有取消方法吗

裁剪后的图片可以自定义地址吗

裁剪的图片是放在了本地吗，怎样能拿到裁剪图片的文件流？

hideFinishText无效

全屏模式下Android高度出现问题

全屏模式下Android高度出现问题，导致取消和确定按钮的定位存在问题，会看不见取消和确定

裁剪图片后，图片像素变低了，模糊

hideFinishText传入boolean值为true,自带的完成按钮依然存在

iphone xs max 打开不能滚动页面

模拟器上二次上传不显示图片

第一次裁剪之后，再次上传新图直接黑了应该是没画到 canvas 上

能弄个vue版本吗？

3.0编译报错 (已经使用了taro-cropper@react)

taro版本 3.0.14
基础库 2.14.0
使用 taro-cropper@react 版本之后仍然编译报错, 这是我本地少了什么东西吗
./node_modules/_taro-cropper@1.2.4@taro-cropper/dist/weapp/components/taro-cropper/index.tsx
Module build failed (from ./node_modules/_babel-loader@8.0.6@babel-loader/lib/index.js):
SyntaxError: /Users/zhuowenhao/Desktop/zjcj/weapp/node_modules/_taro-cropper@1.2.4@taro-cropper/dist/weapp/components/taro-cropper/index.tsx: Unexpected reserved word 'interface' (10:0)

taro 3.0 不同裁剪宽度裁剪的图片边缘会留白或者会比图片裁剪的范围小

比如 cropperWidth 设置500 展示的图片比绿框里的小 cropperWidth 设置400 图片会有白边

后续考虑加旋转功能吗

文档写错了呀，不改改吗

请问不通过自带的完成按钮，怎么调取onCut

安卓手机上图片导出体积较大，原因为未设置图片格式和质量

小程序默认导出为png，但是jpg其实比png小很多。再说图片质量，0.8和1，也能差1倍大小。

截图：https://n1image.hjfile.cn/res7/2020/02/15/e09eb0e716500c9039052f2361deabef.png

我自己改为如下代码

Taro.canvasToTempFilePath({
        canvasId: cropperCutCanvasId,
        x: 0,
        y: 0,
        width: this.cropperWidth - 2,
        height: this.cropperHeight - 2,
        destWidth: this.cropperWidth * this.systemInfo.pixelRatio,
        destHeight: this.cropperHeight * this.systemInfo.pixelRatio,
        fileType: 'jpg',
        quality: isAndroid() ? 0.8 : 1,
})

npm install --save taro-cropper

安装报错了~

Maximum call stack size exceeded

百度小程序被裁剪的图片会被放大无法裁剪

支付宝小程序中挪动图片，图片会闪烁，放大缩小同样会。

支付宝版本：10.1.95
测试机：iphone Xs Max
代码：

<TaroCropper
height={600}
fullScreen
src={src}
cropperWidth={400}
cropperHeight={400}
ref={this.catTaroCropper}
onCut={this.handleCutImg}
hideCancelText={false}
quality={1}
onCancel={() => {
Taro.showToast({
icon: 'none',
title: '点击取消'
})
}}
/>