基于taro框架的高性能图片裁剪组件
基于taro的高性能图片裁剪组件
支持移动
支持旋转
支持缩放
可导出绘制的图片的本地地址
使用
下载代码
赋值
如何拿到绘制的图片地址
src/components/ImageCropper 下的文件到你的项目中
引入import ImageCropper from "@/components/ImageCropper"
使用<ImageCropper imgSrc='xxx.png'>
参数说明
| 属性 | 类型 | 描述 | 必填 |
|---|---|---|---|
| imgSrc | String | 图片地址 | 是 |
| cut_ratio | Number | 裁剪框的 宽/高 比 | 否 |
| img_height | Number | 图片的高度 | 否 |
| img_width | Number | 图片的宽度 | 否 |
| img_left | Number | 图片相对屏幕的左边距 | 否 |
| img_top | Number | 图片相对屏幕的上边距 | 否 |
class demo extend Component{ constructor(props){ super(props) this.imageCropper = Taro.createRef() } async handleGetImg(){ let result = await this.imageCropper.current._getImg() //result== //{ errMsg: "canvasToTempFilePath:ok" // tempFilePath: "xxx.png" } // tempFilePath即是地址 } render(){ return <ImageCropper ref={this.imageCropper}/> } } 结语
如果觉得，这个组件对你有帮助的话，请点个start吧，谢谢
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
