图片裁剪 xImageResizer

---

预览

介绍

兼容PC操作，可双指缩放，单指平移，翻转，也可支持电脑端滚轮缩放，鼠标平移，裁剪框四角缩放，功能齐全，操作方便。 裁剪绘制与导出使用 x-skia-u 画布（不再使用官方 canvas），确认时通过 toTempFilePath 返回临时文件路径。

平台兼容

Harmony	H5	andriod	IOS	小程序	UTS	UNIAPP-X SDK	version
☑	☑	☑️	☑️	☑️	☑️	4.76+	1.1.18

文件路径

@/uni_modules/tmx-ui/components/x-image-resizer/x-image-resizer.uvue

使用

<x-image-resizer></x-image-resizer>

Props 属性

名称	说明	类型	默认值
cropWidth	裁剪框宽，px单位，裁剪后的图片不是这个大小，而是按比例缩放	number	300
cropHeight	裁剪框高，px单位，裁剪后的图片不是这个大小，而是按比例缩放	number	300
compress	压缩质量0-1	number	1
src	待裁剪的图片，任意地址，网络（web要注意跨域），本地地址，相对地址均可。	string	''

Events 事件

名称	参数	说明
confirm	filepath: string	确认时返回文件 app端返回缓存文件路径(file://)，web/微信端返回 dataURL
cancel	-	取消裁剪时触

Slots 插槽

名称	说明	数据

Ref 方法

名称	参数	返回值	说明

示例文件路径

/pages/qita/image-resizer

示例源码

uvue

<template>
	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor" :front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
	<!-- #endif -->
	<view class="imgresize" style="flex:1;background-color:#000000">
		<x-image-resizer :compress="0.5" class="imgresize" @confirm="confirm" @cancel="oncancel" 
		src="https://cdn.tmui.design/xui/tmui4.0banner1.jpg"
		></x-image-resizer>
	</view>
</template>

<script setup lang="ts">
const confirm = (path:string)=>{
	console.log(path)
	// uni.previewImage({
	// 	urls:[path],
	// 	current:path
	// })
}
const oncancel = ()=>{
	uni.navigateBack()
}
</script>


<style>
	/* #ifdef MP-WEIXIN */
	page,body,html{
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: black;
	}
	/* #endif */
	.imgresize{
		width: 100%;
		height: 100%;
		/* #ifdef MP-WEIXIN */
		height: 100vh;
		/* #endif */
	}
</style>