更新记录

1.0.14（2025-06-27）

新增返回图片大小与生成类型控制 新增图片质量控制

1.0.13（2025-06-26）

更新案例

1.0.12（2025-06-26）

修复拖动点因边框显示异常，优化裁剪边框样式

平台兼容性

uni-app

mx-image-crop

出于性能考虑拆分为 image-crop crop-canvas 与crop-canvas组件配合使用

imagePath: {
    type: [String]  // 图片路径
},
width: {
    type: String, // 容器宽高 同时与外层canvas组件必须同一宽高 若裁切偏移 请查看canvas与此组件宽高是否一致
    default: ''
},
height: {
    type: String, //  容器宽高 同时与外层canvas组件必须同一宽高
    default: ''
},
pWidth: {
    type: Number, // 遮罩宽高 当传入遮罩固定宽高时将无法拖动四角改变遮罩宽高
    default: 0
},
pHeight: {
    type: Number, // 遮罩宽高 当传入遮罩固定宽高时将无法拖动四角改变遮罩宽高
    default: 0
},
rotate: {
    type: Number, // 图片旋转 旋转角度 只支持 90的倍数
    default: 0
}

暴露方法
getPopupPosition 获取裁切参数 与 crop-canvas 组件配合使用
rotateContentAdd 旋转图片

使用案例

<script setup>
    import {
        onLoad
    } from "@dcloudio/uni-app"
    import {
        computed,
        onMounted,
        reactive,
        ref,
        watch,
        nextTick
    } from 'vue'
    import {
        getDomes
    } from "@/utils/js/dome/index.js"
    import imageCrop from "@/uni_modules/mx-image-crop/components/mx-image-crop/mx-image-crop.vue"
    import cropCanvas from "@/uni_modules/mx-image-crop/components/mx-crop-canvas/mx-crop-canvas.vue"
    import {
        chooseImage
    } from "@/utils/js/media/image.js"
    const rotateContent = ref(0)
    const rotateContentAdd = () => {
        // 可传入rotateContent 也可使用组件暴露的rotateContentAdd函数旋转
        rotateContent.value = (rotateContent.value + 90) % 360
        getPopupPosition()
    }
    const imagesSlNode = ref(null)
    const canvasNode = ref(null)
    const imageCopyPath = ref('')
    const imageCopySize = ref(0)
    const getPopupPosition = async () => {
        // 获取裁切信息
        let res = await imagesSlNode.value.getPopupPosition()
        // 裁切图片
        let newRes = await canvasNode.value.drawImageToCanvas(res)
        imageCopyPath.value = newRes.path
        imageCopySize.value = newRes.size
    };
    // 选择图片
    let imagePath = ref("http://tmp/rPvkhpVHASAY454a4b52aab820291a6926589c48ec34.jpg")
    const selectImage = async () => {
        const res = await chooseImage(9, {
            sourceType: ['album']
        })
        let arrImageList = res.map(item => item.path)
        console.log(arrImageList)
        imagePath.value = arrImageList[0]
    }
    // 图片与canvas容器大小
    let canvasStyle = {
        width: '330px',
        height: '300px'
    }
    const imageSize = ref(0)
    const imageLoad = (res) => {
        imageSize.value = res
        console.log('res')
        getPopupPosition()
    }
</script>
<template>
    <view class="page-content" style="padding-top: 100rpx;">
        <view>
            <imageCrop ref="imagesSlNode" @imageLoad="imageLoad" :rotate="rotateContent" :imagePath="imagePath"
                :width="canvasStyle.width" :height="canvasStyle.height">
            </imageCrop>
        </view>
        <view>
            <image style="width: 750rpx;min-height: 300rpx;" :src="imageCopyPath" mode="widthFix"></image>
        </view>
        <!--  -->
        <view @click="rotateContentAdd">点击旋转</view>
        <view @click="getPopupPosition">
            点击获取位置并裁切
        </view>
        <view @click="selectImage">
            点击选取图片
        </view>
        <view>
            图片大小{{imageSize}}kb -- {{imageCopySize}}kb
        </view>
        <!-- 同层渲染 canvas -->
        <view>
            <cropCanvas ref="canvasNode" :width="canvasStyle.width" :height="canvasStyle.height" :quality="100"
                :measure="100"></cropCanvas>
        </view>
    </view>
</template>
<style lang="scss" scoped>
    .page-content {
        width: 100vw;
        height: 100vh;
    }
</style>