{"id":13602567,"url":"https://github.com/IFmiss/wx-cropper","last_synced_at":"2025-04-11T08:33:07.028Z","repository":{"id":57110144,"uuid":"104629059","full_name":"IFmiss/wx-cropper","owner":"IFmiss","description":":scissors: 微信小程序  图片裁剪工具，简单易用","archived":false,"fork":false,"pushed_at":"2024-03-10T14:28:37.000Z","size":6189,"stargazers_count":342,"open_issues_count":5,"forks_count":116,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-12T22:06:31.499Z","etag":null,"topics":["cropper","we-cropper","wecropper","weixin","weixincropper","wui","wxcropper"],"latest_commit_sha":null,"homepage":"","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/IFmiss.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-09-24T08:13:32.000Z","updated_at":"2024-12-09T06:20:29.000Z","dependencies_parsed_at":"2024-06-19T06:16:59.990Z","dependency_job_id":"4624fca9-9b32-4b12-97b1-a366868a644b","html_url":"https://github.com/IFmiss/wx-cropper","commit_stats":{"total_commits":72,"total_committers":3,"mean_commits":24.0,"dds":0.02777777777777779,"last_synced_commit":"c7c53ece3cbb901d054ff921216264efc5e10d92"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IFmiss%2Fwx-cropper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IFmiss%2Fwx-cropper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IFmiss%2Fwx-cropper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IFmiss%2Fwx-cropper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/IFmiss","download_url":"https://codeload.github.com/IFmiss/wx-cropper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248361678,"owners_count":21090962,"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","we-cropper","wecropper","weixin","weixincropper","wui","wxcropper"],"created_at":"2024-08-01T18:01:29.009Z","updated_at":"2025-04-11T08:33:02.003Z","avatar_url":"https://github.com/IFmiss.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"## wx-cropper\n基于原生的微信小程序的裁剪组件\n\n### 引入\n支持npm包管理的模式项目目录下执行\n```code\nnpm i @dw/wx-cropper\n```\n\n也可以直接使用项目中的wx-cropper文件夹的文件，放到自己的项目中去\n\n### 使用\n\n在使用的页面的.json文件中注册\n```json\n{\n  \"usingComponents\": {\n    \"my-cropper\": \"@dw/wx-cropper\"\n  }\n}\n```\n\n注册之后在使用的wxml的文件中引入该组件\n```code\n\u003cmy-cropper\n  bind:close=\"hideCut\"\n  cutRatio=\"{{cutRatio}}\"\n  wx:if=\"{{showCropper}}\"\n  imageSrc=\"{{imageSrc}}\"\n  cropperRatio={{cropperRatio}}\n  cropperWidth={{cropperWidth}}\n  minCropperW={{minCropperW}}/\u003e\n```\n\n### 参数配置\n#### `close`: 事件  参数为img, 在点击关闭的时候没有这个参数，只有在生成图片的时候才有\n```ts\n  path: string;\n  width: number;\n  height: number;\n```\n```code\nhideCut () {\n  this.setData({\n    showCropper: false\n  })\n  const img = arguments[0].detail\n  if (img \u0026\u0026 img.path) {\n    console.log(img)\n    this.setData({\n      imageInfo: img\n    })\n  }\n}\n```\n#### `cutRatio`   初始化的裁剪比例\n```js\n/**\n * @type         number\n * @description  初始化的裁剪比例\n * @example 0    默认初始化的裁剪区域宽高为图片的宽高，且裁剪比例不固定\n * @example 0.5  宽高比例固定，且宽和高的比例为 1 : 2 的比例\n * @example 2    宽高比例固定，且宽和高的比例为 2 : 1 的比例\n */\n```\n\n#### `cropperRatio`   组件裁剪显示区域的最大比例\n```js\n/**\n * @type         number\n * @description  组件裁剪显示区域的最大比例，如果裁剪的图片过长，则做限制，默认最大宽高比例为 宽640 / 高960 (宽高比例)\n * @example 1    如果CROPPER_WIDTH宽度是720px，那么裁剪区域的高度也就是 CROPPER_WIDTH / cropperRatio 为 720px;\n */\n```\n\n#### `imageSrc`   需要裁剪的图片地址 支持本地和线上\n\n#### `cropperWidth`   裁剪区域的宽度 默认720  居中显示\n\n#### `minCropperW`    裁剪区域最小宽度， 如果是等比例 按照最短的计算\n\n#### 裁剪区域固定宽高\n![](https://github.com/IFmiss/wx-cropper//blob/master/1.jpg)\n\n![](https://github.com/IFmiss/wx-cropper//blob/master/2.jpg)\n```js\n```\n\n#### 不固定比例\n\n![](https://github.com/IFmiss/wx-cropper//blob/master/4.jpg)\n\n![](https://github.com/IFmiss/wx-cropper//blob/master/3.jpg)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FIFmiss%2Fwx-cropper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FIFmiss%2Fwx-cropper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FIFmiss%2Fwx-cropper/lists"}