ifmiss / wx-cropper Goto Github PK

View Code? Open in Web Editor NEW

335.0 9.0 115.0 6.04 MB

:scissors: 微信小程序图片裁剪工具，简单易用

License: MIT License

JavaScript 100.00%

weixin cropper wui wecropper wxcropper weixincropper we-cropper

wx-cropper's Introduction

wx-cropper

基于原生的微信小程序的裁剪组件

引入

支持npm包管理的模式项目目录下执行

npm i @dw/wx-cropper

也可以直接使用项目中的wx-cropper文件夹的文件，放到自己的项目中去

使用

在使用的页面的.json文件中注册

{
  "usingComponents": {
    "my-cropper": "@dw/wx-cropper"
  }
}

注册之后在使用的wxml的文件中引入该组件

<my-cropper
  bind:close="hideCut"
  cutRatio="{{cutRatio}}"
  wx:if="{{showCropper}}"
  imageSrc="{{imageSrc}}"
  cropperRatio={{cropperRatio}}
  cropperWidth={{cropperWidth}}
  minCropperW={{minCropperW}}/>

参数配置

`close`: 事件参数为img, 在点击关闭的时候没有这个参数，只有在生成图片的时候才有

  path: string;
  width: number;
  height: number;

hideCut () {
  this.setData({
    showCropper: false
  })
  const img = arguments[0].detail
  if (img && img.path) {
    console.log(img)
    this.setData({
      imageInfo: img
    })
  }
}

`cutRatio` 初始化的裁剪比例

/**
 * @type         number
 * @description  初始化的裁剪比例
 * @example 0    默认初始化的裁剪区域宽高为图片的宽高，且裁剪比例不固定
 * @example 0.5  宽高比例固定，且宽和高的比例为 1 : 2 的比例
 * @example 2    宽高比例固定，且宽和高的比例为 2 : 1 的比例
 */

`cropperRatio` 组件裁剪显示区域的最大比例

/**
 * @type         number
 * @description  组件裁剪显示区域的最大比例，如果裁剪的图片过长，则做限制，默认最大宽高比例为 宽640 / 高960 (宽高比例)
 * @example 1    如果CROPPER_WIDTH宽度是720px，那么裁剪区域的高度也就是 CROPPER_WIDTH / cropperRatio 为 720px;
 */

`imageSrc` 需要裁剪的图片地址支持本地和线上

`cropperWidth` 裁剪区域的宽度默认720 居中显示

`minCropperW` 裁剪区域最小宽度，如果是等比例按照最短的计算

裁剪区域固定宽高

不固定比例

wx-cropper's People

Contributors

Stargazers

Watchers

Forkers

mars000001 codegather chengshulin 157096879 zhangyq1 caojingfei wyyqm nxy315 lb0726 zeeroc chatfeed shxx eyeshot djllhs wisdon weiguang3100 sunshine824 littlelittletree yale8848 q286714671 itxcx yanxu1206 npm-ued idreamsoft eatingwater nichangjiang zouhuayi ljkfgh2008 codechun flysky66 fuyongfan sevenkismet doupo bingkui swort177 xthit lovea weiguang-yin xiyue0814 doudou2020 harrylxue jc91715 lanhaoo 740685951 zuoerdingcoder crayona zsanpang liujunleo teemwu dean20160218 linginnn sxin-liu linhongyong tonniclin chaosxu2016 cherrise learnother 1c7 mn3711698 xywai1993 ym87498510 csxuan-github gougouccnu diexue cb360 yangmin01 yijunjun1 qq9694526 liuxinqiong mvpleung skrstop windguo pandora-y fpgz6 liangzy xddzh wwlls yimmyly lanzui cloudbam yinhaoyu dearxd rococostudio cced3000 yccbcc copperdong zacat jk-gan yuan1102 vqishi helentim metal88888 ruanbl dchenchen zqfuck jung-li houlijun mayunfang weichengfu qiliangya

wx-cropper's Issues

真机不行啊，是我太坑？

从电脑模拟器选择的图片路径是http开头的，所以点击生成图片的时候可以正常生成图片
从真机相册选择的图片路径是wxfile开头的，点击生成图片就死掉了，直接ctx.draw本地图片也是不行的.....

v2 分支在某些 iOS 机型下(6s / 7 plus) 有裁剪出来只有一小部分的问题

期望行为

裁剪正常，和预览时的框框一致

实际行为

如何复现

OnePlus 6T 无法复现
iPhoneX 无法复现

拿这俩测试纯粹是因为公司里只有这俩

问题机型

iPhone 6S
iPhone 7 Plus

这俩机型是用户告诉我们的

问题出现频率

偶尔出现，解决方法是关了小程序再开

用户的操作步骤

选择多张图片，选择不同的裁剪比例（裁剪框我控制成了无法放大缩小）
移动裁剪框。裁剪。

调试过程

安卓 OnePlus 6T 尝试类似步骤，无法复现。
iPhoneX 无法复现。
Testing 云测使用 iPhone 6S 无法复现
Testing 云测使用 iPhone 7 Plus 无法复现

问题

请问作者有没有思路这可能是什么问题，如何进一步定位。
或者只能是 ┑(￣Д ￣)┍ 了

微信小程序小白来提个问题

话说生成图片了，地址也打印出来了，但是怎么把图片存起来呢？或者怎么用那个图片的地址呢？我不能直接打开啊。是要在小程序里面才能打开那个地址吗？

第一次执行“生成图片”总是无法预览，debug发现首次生成文件为空。
将preview移到complete中可以解决这个问题：
wx.canvasToTempFilePath({
x: canvasL,
y: canvasT,
width: canvasW,
height: canvasH,
destWidth: canvasW,
destHeight: canvasH,
canvasId: 'myCanvas',
complete: function() {
wx.previewImage({
current: '', // 当前显示图片的http链接
urls: [res.tempFilePath] // 需要预览的图片http链接列表
})

      }
    })