更新记录

1.0.4(2023-09-22) 下载此版本

解决了一些bug

1.0.3(2023-08-03) 下载此版本

针对评论区提到的问题进行了优化

1.0.2(2023-07-26) 下载此版本

增加了app支持

查看更多

平台兼容性

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

使用说明

目前h5、微信小程序、app已经全部支持,至于其他百度什么的小程序没一个个测,暂且算都能跑的通在兼容的表里都勾上了,后期如果有哪个不可以用诸位可以反映一下,在性能表现上app端由于uniapp本身太多的逻辑和视图交互会导致页面展现效果出现连续的卡顿所以推荐在app平台使用web-view的方式使用,后续会考虑使用nvue看能不能得到改善吧

组件使用方式

js:

import Imagecanvas from '../../uni_modules/Image-canvas/components/Image-canvas/Image-canvas.vue'

html:

<Imagecanvas :Imageurl="imgurl" @cutwidthorheightnotenough="widthorheightnotenough" @imagesavesuccess="imagesavesuccess" @imagecanvasback="imagecanvasback" :condition="Imagecondition"></Imagecanvas>

组件事件

事件 意义
@cutwidthorheightnotenough 当设置了最大可裁剪宽度和高度时裁剪框宽高大于这两个之一并点击确定裁剪
@imagesavesuccess 裁剪后的图片成功保存(APP会返回保存到相册的图片路径,仅 App 3.0.5+ 支持),微信小程序则会返回文件临时地址,h5只会返回ok
@imagecanvasback 如果在图片裁剪后点击导航栏返回箭头不会触发此事件而是会返回到裁剪前的状态,当在裁剪前状态时点击导航栏箭头才会触发这个事件

组件属性

属性 意义
Imageurl 图片链接(注意:在h5端使用此组件时如果是网络图片必须确保其后台开启跨域否则会卡在裁剪前的状态
condition 给裁剪时的一些约束条件,下面为示例
let Imagecondition={
        min_cropbox_width:30, //裁剪框所能缩小的最小宽度(非必填,默认30)
        min_cropbox_height:30, //裁剪框所能缩小的最小高度(非必填,默认30)
        min_result_imgwidth:50, //裁剪时图片不能超过的最大宽度(非必填,默认不限)
        min_result_imgheight:50,//裁剪时图片不能超过的最大高度(非必填,默认不限)
    }

如果还是不明白可以导入示例项目

更多问题可以发到我的邮箱:a1987507463@163.com

感谢您的使用,祝您工作顺心,学习进步

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议

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