{"id":15026395,"url":"https://github.com/1977474741/image-cropper","last_synced_at":"2025-04-08T13:08:48.824Z","repository":{"id":37390597,"uuid":"155556959","full_name":"1977474741/image-cropper","owner":"1977474741","description":"💯一款功能强大的微信小程序图片裁剪插件","archived":false,"fork":false,"pushed_at":"2021-12-17T01:14:34.000Z","size":599,"stargazers_count":1430,"open_issues_count":29,"forks_count":351,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-04-01T11:07:56.969Z","etag":null,"topics":["cropper","image","imagecropper","mpvue","shear","uni-app","wechat","wepy"],"latest_commit_sha":null,"homepage":"https://github.com/wx-plugin/image-cropper","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/1977474741.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-10-31T12:52:26.000Z","updated_at":"2025-03-31T09:34:24.000Z","dependencies_parsed_at":"2022-07-07T23:09:27.085Z","dependency_job_id":null,"html_url":"https://github.com/1977474741/image-cropper","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/1977474741%2Fimage-cropper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/1977474741%2Fimage-cropper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/1977474741%2Fimage-cropper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/1977474741%2Fimage-cropper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/1977474741","download_url":"https://codeload.github.com/1977474741/image-cropper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247847611,"owners_count":21006100,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cropper","image","imagecropper","mpvue","shear","uni-app","wechat","wepy"],"created_at":"2024-09-24T20:04:24.390Z","updated_at":"2025-04-08T13:08:48.789Z","avatar_url":"https://github.com/1977474741.png","language":"JavaScript","funding_links":[],"categories":["组件"],"sub_categories":[],"readme":"# image-cropper\n## 一款高性能的小程序图片裁剪插件，支持旋转。\n###### `1.功能强大。`\n###### `2.性能超高超流畅，大图毫无卡顿感。`\n###### `3.组件化，使用简单。`\n###### `4.点击中间窗口实时查看裁剪结果。`\n\u003ch2 align = \"center\" style=\"\"\u003e体验Demo\u003c/h2\u003e\n\u003cdiv align=center \u003e\u003cimg width=\"200\" height=\"200\" src=\"https://pubser-res.zhenai.com/other/temp/202006/19/12085876945182.jpg\"/\u003e\u003c/div\u003e\n\n## 初始准备\n#### 1.json文件中添加image-cropper\n```json\n    \"usingComponents\": {\n       \"image-cropper\": \"../image-cropper/image-cropper\"\n    },\n    \"navigationBarTitleText\": \"裁剪图片\",\n    \"disableScroll\": true\n```\n#### 2.wxml文件\n```html\n\u003cimage-cropper id=\"image-cropper\" limit_move=\"{{true}}\" disable_rotate=\"{{true}}\" width=\"{{width}}\" height=\"{{height}}\" imgSrc=\"{{src}}\" bindload=\"cropperload\" bindimageload=\"loadimage\" bindtapcut=\"clickcut\"\u003e\u003c/image-cropper\u003e\n```\n#### 3.简单示例\n```javascript\n    Page({\n        data: {\n            src:'',\n            width:250,//宽度\n            height: 250,//高度\n        },\n        onLoad: function (options) {\n\t    //获取到image-cropper实例\n            this.cropper = this.selectComponent(\"#image-cropper\");\n            //开始裁剪\n            this.setData({\n                src:\"https://raw.githubusercontent.com/1977474741/image-cropper/dev/image/code.jpg\",\n            });\n            wx.showLoading({\n                title: '加载中'\n            })\n        },\n        cropperload(e){\n            console.log(\"cropper初始化完成\");\n        },\n        loadimage(e){\n            console.log(\"图片加载完成\",e.detail);\n            wx.hideLoading();\n            //重置图片角度、缩放、位置\n            this.cropper.imgReset();\n        },\n        clickcut(e) {\n            console.log(e.detail);\n            //点击裁剪框阅览图片\n            wx.previewImage({\n                current: e.detail.url, // 当前显示图片的http链接\n                urls: [e.detail.url] // 需要预览的图片http链接列表\n            })\n        },\n    })\n```\n## 参数说明\u003cfont color=#C39178 size=2\u003e（高亮属性表示对于上个版本有修改，请注意）\u003c/font\u003e\n| 属性           | 类型   | 缺省值  | 取值  | 描述  | 必填 |\n| ------------- |:------:|:------:|:-----:|:-----:|:-----:|\n| imgSrc      \t| String | 无\t   |无限制|图片地址(如果是网络图片需配置安全域名)|否|\n| disable_rotate| Boolean| false    |true/false|禁止用户旋转(为false时建议同时设置limit_move为false)|否|\n| limit_move\t| Boolean| false    |true/false|限制图片移动范围(裁剪框始终在图片内)(为true时建议同时设置disable_rotate为true)|否|\n| width \t| Number | 200      |超过屏幕宽度自动转为屏幕宽度|裁剪框宽度|否|\n| height        | Number | 200      |超过屏幕高度自动转为屏幕高度|裁剪框高度|否|\n| max_width \t| Number | 300      |裁剪框最大宽度|裁剪框最大宽度|否|\n| max_height        | Number | 300      |裁剪框最大高度|裁剪框最大高度|否|\n| min_width \t| Number | 100      |裁剪框最小宽度|裁剪框最小宽度|否|\n| min_height        | Number | 100      |裁剪框最小高度|裁剪框最小高度|否|\n| disable_width \t| Boolean | false      |true/false|锁定裁剪框宽度|否|\n| disable_height    | Boolean | false      |true/false|锁定裁剪框高度|否|\n| disable_ratio    | Boolean | false      |true/false|锁定裁剪框比例|否|\n| export_scale  | Number | 3        |无限制|输出图片的比例(相对于裁剪框尺寸)|否|\n| quality \t| Number | 1        |0-1|生成的图片质量|否|\n| ~~cut_top~~ \t| Number | 居中     |始终在屏幕内 |裁剪框上边距|否|\n| ~~cut_left~~ \t| Number | 居中     |始终在屏幕内 |裁剪框左边距|否|\n| `img_width` \t| Number | 宽高都不设置，最小边填满裁剪框 |支持%(不加单位为px)(只设置宽度，高度自适应)|图片宽度|否|\n| `img_height` \t| Number | 宽高都不设置，最小边填满裁剪框 |支持%(不加单位为px)(只设置高度，宽度自适应)|图片高度|否|\n| scale \t| Number | 1\t   |无限制|图片的缩放比|否|\n| angle \t| Number | 0\t   |(limit_move=true时angle=n*90)|图片的旋转角度|否|\n| min_scale \t| Number | 0.5\t   |无限制|图片的最小缩放比|否|\n| max_scale \t| Number | 2\t   |无限制|图片的最大缩放比|否|\n| bindload \t| Function | null   |函数名称|cropper初始化完成|否|\n| bindimageload | Function | null  |函数名称|图片加载完成,返回值Object{width,height,path,type等}|否|\n| bindtapcut \t| Function | null  |函数名称|点击中间裁剪框,返回值Object{src,width,height}|否|\n## 函数说明\n| 函数名         | 参数   \t       | 返回值  |描述|参数必填|\n| ------------- |:------:\t   |:------:|:------:|:------:|\n| upload      \t|  无    \t  |   无   |调起wx上传图片接口并开始剪裁|否|\n| pushImg       |  src   \t   |   无   |放入图片开始裁剪|是|\n| getImg        |Function(回调函数) |   `Object{url,width,height}`  |裁剪并获取图片(图片尺寸 = 图片宽高 * export_scale)|是|\n| ~~setCutXY~~     \t|  X、Y  \t  |   无    |设置裁剪框位置|是|\n| setCutSize    |  width、height   |   无    |设置裁剪框大小|是|\n| setCutCenter  |  无   \t   \t  |   无    |设置裁剪框居中|否|\n| setScale      |  scale   \t   |   无    |设置图片缩放比例（不受min_scale、max_scale影响）|是|\n| setAngle      |  deg   \t   |   无    |设置图片旋转角度（带过渡效果）|是|\n| setTransform  |{x,y,angle,scale,cutX,cutY}|   无    |图片在原有基础上的变化(scale受min_scale、max_scale影响)|根据需要传参|\n| imgReset      |无\t          |   无    |重置图片的角度、缩放、位置(可以在onloadImage回调里使用)|否|\n\nDemo地址：https://github.com/wx-plugin/image-cropper-demo\n\n[点击导入代码片段](https://developers.weixin.qq.com/s/Z1VsB9mG7Cpm)\n\n如果有什么好的建议欢迎提issues或者提pr\n\n## 进群 | 鼓励作者\n\n\u003cimg width=\"300\" height=\"300\" src=\"https://pubser-res.zhenai.com/other/temp/202103/19/19084532315057.png\"/\u003e   \u003cimg width=\"300\" height=\"300\" src=\"https://pubser-res.zhenai.com/other/temp/202006/27/15321042129368.jpg\"/\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F1977474741%2Fimage-cropper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F1977474741%2Fimage-cropper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F1977474741%2Fimage-cropper/lists"}