更新记录

1.0.1(2021-06-23) 下载此版本

canvas组件触摸事件在微信小程序内的bug

1.0.0(2021-06-22) 下载此版本


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × ×

mosowe-touch-clip-image:涂抹裁剪插件

插件功能

手指触摸绘制图形,裁剪图片

图片来源:从相册选择 / 拍照

平台支持:

APP H5 微信小程序 支付宝小程序 百度小程序 字节跳动小程序 QQ小程序
未测 未测 未测 未测

属性

名称 类型 默认值 说明 版本
image String 选择的图片 1.0.0
radius Number \String 20 宽度 1.0.0
alpha Number \String 0.6 蒙层透明度 1.0.0
touchEndTodo Boolean false 是否触摸结束就裁剪 1.0.0
width Number \String 300 宽度 1.0.0
height Number \String 300 高度 1.0.0

slots

名称 说明

事件

名称 回调参数 说明
clipImageAfter src 裁剪之后的图片

示例

<!-- 触摸裁剪图片 -->
<template>
  <view class='canvas-touch-clip-image'>
        <mosowe-touch-clip-image 
            v-if="!resultImage"
            ref="clipCanvas"
            :image="image"
            :width="width"
            :height="height" 
            radius="30"
            @clipImageAfter="clipImageAfter">
            </mosowe-touch-clip-image >

                <image 
                    v-else
                    mode="aspectFit"
                    class="image-wrap"
                    :src="resultImage"
                />

        <!-- #ifdef MP-WEIXIN -->
            <cover-view class="btn-wrap">
                <cover-view class="btn" @click="chooseImage">
                    选择图片
                </cover-view>
                <cover-view class="btn" @click="clearImage" v-if="!resultImage">
                    重新选择
                </cover-view>
                <cover-view class="btn" @click="confirm" v-if="!resultImage">
                    确定
                </cover-view>
            </cover-view>
        <!-- #endif -->
        <!-- #ifndef MP-WEIXIN -->
            <view class="btn-wrap">
                <view class="btn" @click="chooseImage">
                    选择图片
                </view>
                <view class="btn" @click="clearImage" v-if="!resultImage">
                    重新选择
                </view>
                <view class="btn" @click="confirm" v-if="!resultImage">
                    确定
                </view>
            </view>
        <!-- #endif -->

    </view>
</template>

<script>
export default {
  name: 'canvas-touch-clip-image',
  components: {},
  data () {
    return {
            image: '',
            resultImage: '',
            showClip: true,
            isClip: false,
            width: 300,
            height: 300
    };
  },
    onShow () {
        uni.getSystemInfo({
            success: (res) => {
                this.width = res.screenWidth;
                this.height = res.screenHeight;
            }
        });
    },
  // 页面方法
  methods: {
        // 选择照片
        chooseImage () {
            this.resultImage = '';
            uni.chooseImage({
                count: 1,
                sourceType: ['album', 'camera'],
                success: (res) => {
                    this.image = res.tempFilePaths[0];
                },
                fail: (res) => {
                    console.log(res);
                }
            });
        },
        // 获取裁剪的图片
        clipImageAfter (data) {
            this.isClip = true;
            this.resultImage = data;
            this.image = '';
            this.clearImage();
            // getApp().globalData.image = data;
            // uni.navigateTo({
            //  url: '/pages/canvasTouchClipImage/showImage'
            // });
        },
        // 清空画布
        clearImage () {
            this.$refs.clipCanvas.clearCanavas();
        },
        // 确定
        confirm () {
            this.$refs.clipCanvas.polygon();
        }
    }
};
</script>

<style lang='scss' scoped>
.canvas-touch-clip-image{
    .btn-wrap{
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 3;
        text-align: center;
        height: 60rpx;
        padding: 10rpx 0;
        width: 100%;
        background-color: #fff;
        .btn{
            display: inline-block;
            width: 120rpx;
            height: 60rpx;
            line-height: 60rpx;
            border-radius: 4rpx;
            text-align: center;
            font-size: 18rpx;
            color: #fff;
            background-color: #007AFF;
            margin: 0 10rpx;
        }
    }
}
</style>

版本修復

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问