mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-06 17:18:40 +08:00
fix: 🐛 修复多个 ImgCropper 存在时生成图片异常的问题
This commit is contained in:
不如摸鱼去
parent
5a3f85df6f
commit
1876fc3d0c
@ -4,9 +4,9 @@
|
||||
|
||||
## 基本用法
|
||||
|
||||
图片裁剪组件需要绑定 `v-model` 来控制组件的显示与隐藏，通过属性 `img-src` 控制展示的图片资源位，也可以通过函数 `resetImg` 来控制组件图片的初始化。进入组件后，可以对图片进行拖拽、双指缩放、旋转等操作。监听 `confirm` 事件获取选中值。
|
||||
图片裁剪组件需要绑定 `v-model` 来控制组件的显示与隐藏，通过属性 `img-src` 控制展示的图片资源。进入组件后，可以对图片进行拖拽、双指缩放、旋转等操作，监听 `confirm` 事件获取裁剪结果。
|
||||
|
||||
> *注意：在使用组件时，最好在一个新页面中使用图片裁剪组件，图片裁剪保持`show`为true，完成裁剪时，返回上一页。*
|
||||
> *注意：建议在新页面中使用图片裁剪组件，保持 `show` 为 true，完成裁剪后返回上一页。*
|
||||
|
||||
```html
|
||||
<wd-img-cropper
|
||||
@ -55,51 +55,13 @@ function handleCancel(event) {
|
||||
}
|
||||
```
|
||||
|
||||
## Attributes
|
||||
## 自定义裁剪比例
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值| 最低版本 |
|
||||
|-----|------|-----|-------|-------|--------|
|
||||
| v-model | 打开图片裁剪组件 | boolean | - | false | - |
|
||||
| img-src | 图片资源链接 | string | - | - | - |
|
||||
| img-width | 截屏预览图片的初始宽度; `1、设置宽度不设置高度，按照宽度等比缩放；2、如果都不设置，预览时图片大小会根据裁剪框大小进行等比缩放，进行锁边处理；`; string 类型只支持 % 单位，number 类型时单位为 px | number / string | - | - | - |
|
||||
| img-height | 截屏预览图片的初始高度; `1、设置高度不设置宽度，按照高度等比缩放；2、如果都不设置，预览时图片大小会根据裁剪框大小进行等比缩放，进行锁边处理；`; string 类型只支持 % 单位，number 类型时单位为 px | number / string | - | - | - |
|
||||
| disabled-rotate | 禁止图片旋转 | boolean | - | false | - |
|
||||
| export-scale | 设置导出图片尺寸 | number | - | 2 | - |
|
||||
| max-scale | 最大缩放倍数 | number | - | 3 | - |
|
||||
| cancel-button-text | 取消按钮文案 | string | - | 取消 | - |
|
||||
| confirm-button-text | 确认按钮文案 | string | - | 完成 | - |
|
||||
| quality | 生成的图片质量 [wx.canvasToTempFilePath属性介绍](https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html#%E5%8F%82%E6%95%B0) | number | 0/1 | 1 | - |
|
||||
| file-type | 目标文件的类型，[wx.canvasToTempFilePath属性介绍](https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html#%E5%8F%82%E6%95%B0) | string | - | png | - |
|
||||
| aspect-ratio | 裁剪框宽高比，格式为 width:height | string | - | 1:1 | $LOWEST_VERSION$ |
|
||||
通过 `aspect-ratio` 属性可以设置裁剪框的宽高比，格式为 `width:height`。
|
||||
|
||||
## Events
|
||||
|
||||
| 事件名称 | 说明 | 参数 | 最低版本 |
|
||||
|---------|-----|-----|---------|
|
||||
| confirm | 完成截图时触发 | `{tempFilePath, width, height}` 分别为生成文件的临时路径 (本地路径)、生成图片宽、生成图片高| - |
|
||||
| cancel | 当取消截图时触发 | - | - |
|
||||
| imgloaderror | 当图片加载错误时触发 | `{err} `| - |
|
||||
| imgloaded | 当图片加载完成时触发 | `{res}` | - |
|
||||
|
||||
## Methods
|
||||
|
||||
对外暴露函数
|
||||
|
||||
| 事件名称 | 说明 | 参数 | 最低版本 |
|
||||
|--------|------|-----|---------|
|
||||
| setRoate | 设置图片旋转角度 | deg (设置的旋转角度)| - |
|
||||
| resetImg | 重置图片的角度、缩放、位置 | - | - |
|
||||
|
||||
## 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|------|--------|
|
||||
| custom-class | 根节点样式 | - |
|
||||
|
||||
## 基本用法
|
||||
### 3:2 适合拍照
|
||||
|
||||
```html
|
||||
<!-- 设置3:2的裁剪框 -->
|
||||
<wd-img-cropper
|
||||
v-model="show"
|
||||
:img-src="src"
|
||||
@ -110,6 +72,34 @@ function handleCancel(event) {
|
||||
</wd-img-cropper>
|
||||
```
|
||||
|
||||
### 16:9 影视比例
|
||||
|
||||
```html
|
||||
<wd-img-cropper
|
||||
v-model="show"
|
||||
:img-src="src"
|
||||
aspect-ratio="16:9"
|
||||
@confirm="handleConfirm"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
</wd-img-cropper>
|
||||
```
|
||||
|
||||
### 16:10 这么阔 很有型
|
||||
|
||||
16:10 的显示比例非常适合展示风景照片或者电影海报等宽屏内容。
|
||||
|
||||
```html
|
||||
<wd-img-cropper
|
||||
v-model="show"
|
||||
:img-src="src"
|
||||
aspect-ratio="16:10"
|
||||
@confirm="handleConfirm"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
</wd-img-cropper>
|
||||
```
|
||||
|
||||
## 裁剪后上传
|
||||
|
||||
结合 `useUpload` 可以实现裁剪完成后自动上传图片的功能。
|
||||
@ -171,3 +161,44 @@ async function handleConfirmUpload(event) {
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值| 最低版本 |
|
||||
|-----|------|-----|-------|-------|--------|
|
||||
| v-model | 打开图片裁剪组件 | boolean | - | false | - |
|
||||
| img-src | 图片资源链接 | string | - | - | - |
|
||||
| img-width | 截屏预览图片的初始宽度; `1、设置宽度不设置高度，按照宽度等比缩放；2、如果都不设置，预览时图片大小会根据裁剪框大小进行等比缩放，进行锁边处理；`; string 类型只支持 % 单位，number 类型时单位为 px | number / string | - | - | - |
|
||||
| img-height | 截屏预览图片的初始高度; `1、设置高度不设置宽度，按照高度等比缩放；2、如果都不设置，预览时图片大小会根据裁剪框大小进行等比缩放，进行锁边处理；`; string 类型只支持 % 单位，number 类型时单位为 px | number / string | - | - | - |
|
||||
| disabled-rotate | 禁止图片旋转 | boolean | - | false | - |
|
||||
| export-scale | 设置导出图片尺寸 | number | - | 2 | - |
|
||||
| max-scale | 最大缩放倍数 | number | - | 3 | - |
|
||||
| cancel-button-text | 取消按钮文案 | string | - | 取消 | - |
|
||||
| confirm-button-text | 确认按钮文案 | string | - | 完成 | - |
|
||||
| quality | 生成的图片质量 [wx.canvasToTempFilePath属性介绍](https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html#%E5%8F%82%E6%95%B0) | number | 0/1 | 1 | - |
|
||||
| file-type | 目标文件的类型，[wx.canvasToTempFilePath属性介绍](https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html#%E5%8F%82%E6%95%B0) | string | - | png | - |
|
||||
| aspect-ratio | 裁剪框宽高比，格式为 width:height | string | - | 1:1 | $LOWEST_VERSION$ |
|
||||
|
||||
## Events
|
||||
|
||||
| 事件名称 | 说明 | 参数 | 最低版本 |
|
||||
|---------|-----|-----|---------|
|
||||
| confirm | 完成截图时触发 | `{tempFilePath, width, height}` 分别为生成文件的临时路径 (本地路径)、生成图片宽、生成图片高| - |
|
||||
| cancel | 当取消截图时触发 | - | - |
|
||||
| imgloaderror | 当图片加载错误时触发 | `{err} `| - |
|
||||
| imgloaded | 当图片加载完成时触发 | `{res}` | - |
|
||||
|
||||
## Methods
|
||||
|
||||
对外暴露函数
|
||||
|
||||
| 事件名称 | 说明 | 参数 | 最低版本 |
|
||||
|--------|------|-----|---------|
|
||||
| setRoate | 设置图片旋转角度 | deg (设置的旋转角度)| - |
|
||||
| resetImg | 重置图片的角度、缩放、位置 | - | - |
|
||||
|
||||
## 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|------|--------|
|
||||
| custom-class | 根节点样式 | - |
|
||||
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: weisheng
|
||||
* @Date: 2023-09-20 11:10:41
|
||||
* @LastEditTime: 2025-03-25 22:59:47
|
||||
* @LastEditTime: 2025-03-26 09:55:00
|
||||
* @LastEditors: weisheng
|
||||
* @Description:
|
||||
* @FilePath: /wot-design-uni/src/pages/imgCropper/Index.vue
|
||||
@ -32,7 +32,7 @@
|
||||
|
||||
<demo-block title="自定义裁剪比例" style="text-align: center">
|
||||
<view class="profile-grid">
|
||||
<view v-for="(ratio, index) in ['1:1', '3:2', '16:9']" :key="index" class="profile-item">
|
||||
<view v-for="(ratio, index) in ['3:2', '16:9', '16:10']" :key="index" class="profile-item">
|
||||
<wd-img-cropper
|
||||
v-model="showCustom[index]"
|
||||
:img-src="srcCustom[index]"
|
||||
@ -45,7 +45,7 @@
|
||||
</view>
|
||||
<wd-img
|
||||
v-if="imgSrcCustom[index]"
|
||||
:width="ratio === '1:1' ? '200px' : '300px'"
|
||||
width="300px"
|
||||
:height="getHeight(ratio)"
|
||||
:src="imgSrcCustom[index]"
|
||||
mode="aspectFit"
|
||||
@ -262,13 +262,7 @@ function getHeight(ratio: string): string {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.profile-item:first-child .img {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.profile-item:nth-child(2) .img {
|
||||
.profile-item:nth-child(1) .img {
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -48,8 +48,8 @@
|
||||
</view>
|
||||
<!-- 绘制的图片canvas -->
|
||||
<canvas
|
||||
canvas-id="wd-img-cropper-canvas"
|
||||
id="wd-img-cropper-canvas"
|
||||
:canvas-id="canvasId"
|
||||
:id="canvasId"
|
||||
class="wd-img-cropper__canvas"
|
||||
:disable-scroll="true"
|
||||
:style="`width: ${Number(canvasWidth) * canvasScale}px; height: ${Number(canvasHeight) * canvasScale}px;`"
|
||||
@ -80,10 +80,12 @@ export default {
|
||||
import wdIcon from '../wd-icon/wd-icon.vue'
|
||||
import wdButton from '../wd-button/wd-button.vue'
|
||||
import { computed, getCurrentInstance, ref, watch } from 'vue'
|
||||
import { addUnit, objToStyle } from '../common/util'
|
||||
import { addUnit, objToStyle, uuid } from '../common/util'
|
||||
import { useTranslate } from '../composables/useTranslate'
|
||||
import { imgCropperProps, type ImgCropperExpose } from './types'
|
||||
|
||||
const canvasId = ref<string>(`cropper${uuid()}`) // canvas 组件的唯一标识符
|
||||
|
||||
// 延时动画设置
|
||||
let CHANGE_TIME: any | null = null
|
||||
// 移动节流
|
||||
@ -373,7 +375,7 @@ function computeImgSize() {
|
||||
*/
|
||||
function initCanvas() {
|
||||
if (!ctx.value) {
|
||||
ctx.value = uni.createCanvasContext('wd-img-cropper-canvas', proxy)
|
||||
ctx.value = uni.createCanvasContext(canvasId.value, proxy)
|
||||
}
|
||||
}
|
||||
|
||||
@ -575,7 +577,7 @@ function canvasToImage() {
|
||||
destHeight: Math.round(cutHeight.value * exportScale),
|
||||
fileType,
|
||||
quality,
|
||||
canvasId: 'wd-img-cropper-canvas',
|
||||
canvasId: canvasId.value,
|
||||
success: (res: any) => {
|
||||
const result = { tempFilePath: res.tempFilePath, width: cutWidth.value * exportScale, height: cutHeight.value * exportScale }
|
||||
// #ifdef MP-DINGTALK
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user