微信小程序上传图片裁剪工具image-cropper使用

image-cropper

一款高性能的小程序图片裁剪插件,支持旋转、设置尺寸

1.性能超高超流畅,大图毫无卡顿感。

2.可以设置导出图片尺寸。

3.组件化,使用非常简单。

4.自由模式和限制可随意切换。

5.点击中间窗口实时查看裁剪结果。

原文档下载地址组件放到项目中即可

https://github.com/wx-plugin/image-cropper


初始准备

1.json文件中添加image-cropper:

 "usingComponents": {
       "image-cropper": "../image-cropper/image-cropper"
  },
  "navigationBarTitleText": "裁剪图片",
  "disableScroll": true
2.wxml文件
<image-cropper id="image-cropper" limit_move="{{true}}" disable_rotate="{{true}}" width="{{width}}" height="{{height}}" imgSrc="{{src}}" bindload="cropperload" bindimageload="loadimage" bindtapcut="clickcut"></image-cropper>

3.简单示例

Page({
        data: {
            src:'',
            width:250,//宽度
            height: 250,//高度
        },
        onLoad: function (options) {
	    //获取到image-cropper对象
            this.cropper = this.selectComponent("#image-cropper");
            //开始裁剪
            this.setData({
                src:"https://raw.githubusercontent.com/1977474741/image-cropper/dev/image/code.jpg",
            });
            wx.showLoading({
                title: '加载中'
            })
        },
        cropperload(e){
            console.log("cropper初始化完成");
        },
        loadimage(e){
            console.log("图片加载完成",e.detail);
            wx.hideLoading();
            //重置图片角度、缩放、位置
            this.cropper.imgReset();
        },
        clickcut(e) {
            console.log(e.detail);
            //点击裁剪框阅览图片
            wx.previewImage({
                current: e.detail.url, // 当前显示图片的http链接
                urls: [e.detail.url] // 需要预览的图片http链接列表
            })
        },
    })

有个地方应注意下,就是获取截取后的图片,需要调用此插件的一个函数才可以取得:

this.cropper.getImg((obj) => {

      // 这里就是想要截取的图片传给后台的虚拟路径

      console.log(obj.url)

})

ps:详细内容查看文档,这里只是介绍一下使用方法和取截取的图片虚拟路径。

  • 3
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值