• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

【转】小程序图片裁剪组件 - 神奇的旋风

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

【转】小程序图片裁剪组件

最近开始做微信小程序项目,其中有需要图片裁剪的功能。

微信小程序拥有许多方便的API,相机相册调用作为移动端使用频率最高的API之一,小程序做了非常好的封装,使用上也非常舒服。然而,翻遍了整篇小程序开发文档,仍然没能找到裁剪相关的描述。难道小程序官方没考虑过为小程序提供一个裁剪API吗。

裁剪API是没找到,优秀的开源的第三方裁剪组件还是能找到一些的,试用了几个,跟自己预期的裁剪方法不太一样,之前做过一段时间的原生开发,Android系统自带就有一个不错的裁剪方法,我想能不能做一个防Android系统裁剪的小程序组件呢?

好在小程序提供了一个canvas画布组件,提供了非常丰富的API,可以在画布中绘制图片,并将画布中的图形输出,这个组件正合适用来做裁剪功能,事实上,其他一些第三方裁剪组件,也正是基于这个画布组件来制作的。

自己动手丰衣足食,开始自己造轮子。

那么,来吧,放预览图。

 

使用说明

核心逻辑写在组件中,在需要剪裁的页面引入组件即可。同时禁用页面弹动(ios端页面默认有页面弹动属性,需要禁用)。

{
"usingComponents": {
"cropper":"/pages/cropper/cropper"
},
"disableScroll": true
}

 

页面布局部分

<!--pages/cropper/cropper-sample.wxml-->
<view class=\'body\'>
<!-- 裁剪组件 -->
<cropper id=\'cropper\' class=\'stage\'></cropper>
 
<!-- 取消 和 确认 按钮,并绑定事件 -->
<view class=\'bar\'>
<view class=\'btn btn-cancel\' bindtap=\'fnCancel\'>取消</view>
<view class=\'btn btn-submit\' bindtap=\'fnSubmit\'>确定</view>
</view>
</view>

 

页面样式

page{
  height: 100%;
  box-sizing: border-box;
}
.body{
  height: 100%;
  display: flex;
  flex-direction: column;
}
 
.stage{
  flex-grow: 1;
}
 
.bar{
  height: 80rpx;
  padding: 36rpx;
  display: flex;
  flex-direction: row;
  background-color: black;
}
 
.btn{
  position: relative;
  flex-grow: 1;
    border: 2rpx solid grey;
  line-height: 80rpx;
  text-align: center;
    color: white;
   font-size: 32rpx;
}
 
.btn-cancel{
   border-top-left-radius: 40rpx;
   border-bottom-left-radius: 40rpx;
}
 
.btn-submit{
   border-top-right-radius: 40rpx;
   border-bottom-right-radius: 40rpx;
}

 

漂亮的布局有了,接着就可以再js里愉快的裁剪图片了。

 

 

再页面加载回调中,对组件进行初始化。

imagePath必填,其他参数都有默认值,都是可选的。

裁剪的宽高比是可以约束的,只需要设置aspectRatio属性,就可以约束裁剪的宽高比。在裁剪用户头像时,需要裁剪正方形图片时,aspectRatio属性便会变的非常有用,此时,设置aspectRatio为1,就可以裁剪出正方形的图片。

  onLoad: function (options) {
 
    cropper = this.selectComponent(\'#cropper\');
    cropper.fnInit({
      imagePath:\'/assets/test.jpg\',       //*必填
      debug: true,                        //可选。是否启用调试,默认值为false。true:打印过程日志;false:关闭过程日志
      outputFileType: \'jpg\',              //可选。目标文件的类型。默认值为jpg,jpg:输出jpg格式图片;png:输出png格式图片
      quality: 1,                         //可选。图片的质量。默认值为1,即最高质量。目前仅对 jpg 有效。取值范围为 (0, 1],不在范围内时当作 1.0 处理。
      aspectRatio: 1.25,                  //可选。裁剪的宽高比,默认null,即不限制剪裁宽高比。aspectRatio需大于0
      minBoxWidthRatio: 0.2,              //可选。最小剪裁尺寸与原图尺寸的比率,默认0.15,即宽度最小剪裁到原图的0.15宽。
      minBoxHeightRatio: 0.2,             //可选。同minBoxWidthRatio,当设置aspectRatio时,minBoxHeight值设置无效。minBoxHeight值由minBoxWidth 和 aspectRatio自动计算得到。
      initialBoxWidthRatio: 0.6,          //可选。剪裁框初始大小比率。默认值0.6,即剪裁框默认宽度为图片宽度的0.6倍。
      initialBoxHeightRatio: 0.6          //可选。同initialBoxWidthRatio,当设置aspectRatio时,initialBoxHeightRatio值设置无效。initialBoxHeightRatio值由initialBoxWidthRatio 和 aspectRatio自动计算得到。
      });
  }

 

canvas画布裁剪逻辑已经封装好,只需要调用组件的fnCrop方法便可以完成裁剪。

  fnSubmit:function(){
    //do crop
    cropper.fnCrop({
 
      //剪裁成功的回调
      success:function(res){
         //生成文件的临时路径
        console.log(res.tempFilePath);
        wx.previewImage({
          urls: [res.tempFilePath],
        })
      }
 
    });
  }

 

组件源码 和 裁剪demo 放在github: 

https://github.com/light-wind/wx-cropper

from:https://blog.csdn.net/u011054919/article/details/91136038


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序_图片剪切功能(支持多图片上传)发布时间:2022-07-18
下一篇:
小程序图片裁剪组件发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap