微信小程序剪切图片的功能

全平台（Vue、React、微信小程序）任意角度旋转 图片裁剪组件 | 微信开放社区

 Simple-Crop/USAGE-wechat.md at master · newbieYoung/Simple-Crop · GitHub

首选下载下来wechat这个文件夹。放在小程序的components里面

 把它放做一个组件来用啦.我把这个文件夹重命名为simple-crop啦。

json里面引入

{
  "navigationBarTitleText": "基本信息",
  "usingComponents": {
    "simple-crop": "../components/simple-crop/index"
  },
  "navigationStyle": "custom"
}

<button class="avatar-wrapper" bindtap='changeHead' >
    <image class="avatar" src="{
   {avatar1}}"></image>
</button>

<simple-crop wx:if="{
   {crop.visible}}" size="{
   {crop.size}}" src="{
   {crop.src}}" cropSizePercent="{
   {crop.cropSizePercent}}" borderColor="{
   {crop.borderColor}}" bindcropUpload="uploadCallback" bindcropClose="closeCallback" bindcropCrop="cropCallback"></simple-crop>

js里面

Page({
    data: {
        avatar1:'',
        crop:{
            src: null, // 裁剪图片地址
            visible: false, // 是否显示
            size: { //裁剪尺寸
                width: 400,
                height: 400
            },
            cropSizePercent: 0.9, //裁剪框显示比例
            borderColor: '#fff', //裁剪框边框颜色
            result: '', //裁剪结果地址
        }
    },

//选中图片以后
uploadCallback(e){
    //console.log("图片信息0",e)
},
//关闭裁剪图片弹窗
closeCallback(e){
    this.setData({
        ['crop.visible']: false,
    })
    console.log("图片信息1",e)
},
//裁剪图片弹窗点击确定
cropCallback(e){
    // 返回选定照片的本地文件路径,访问上传接口
    this.UploadImg(e.detail.resultSrc);
},
//点击用户头像
changeHead(){
    var _this = this;
    wx.showActionSheet({
        itemList: ["拍照", "从相册中选择"],
        itemColor: "#000000",
        success: function (res) {
            if (!res.cancel) {
                if (res.tapIndex == 0) {
                    _this.imgWShow("camera")        //拍照
                } else if (res.tapIndex == 1) {
                    _this.imgWShow("album")      //相册
                }
            }
        }
    })
},
// 点击调用手机相册/拍照
imgWShow: function (type) {
    var _this = this;

    let len = 0;
    if (_this.data.imgList != null) {
        len = _this.data.imgList.length
    }   //获取当前已有的图片
    wx.chooseImage({
        count:1,     //最多还能上传的图片数,这里最多可以上传1张
        sizeType: ['original', 'compressed'],        //可以指定是原图还是压缩图,默认二者都有
        sourceType: [type],             //可以指定来源是相册还是相机, 默认二者都有
        success: function (res) {
            wx.showToast({
                title: '正在上传...',
                icon: "loading",
                mask: true,
                duration: 1000
            })
            _this.setData({
                ['crop.visible']: true,
                ['crop.src']: res.tempFilePaths[0],
            })

        },
        fail: function () {
            wx.showToast({
                title: '图片上传失败',
                icon: 'none'
            })
            return;
        }
    })
},

//上传头像给接口，本地图片avatarUrl转成网络图片
UploadImg(avatarUrl){
    uploadFile(avatarUrl).then(res => {
        this.setData({
            ['crop.visible']: false,
            avatar1:res,
        })
    })
},

// 上传图片的接口封装

uploadFile: (filePath) => {
    let url = "XXXXX/uploaded_file"
    return new Promise((resolve, reject) => {
        wx.uploadFile({
            url: url,
            filePath: filePath,
            name: "file",
            header: {
                'content-type': 'application/json',
                'token': getToken(),
            },
            success: (res) => {
                console.log(res)
                let result = JSON.parse(res.data)
                let {code} = result
                // resolve(res.data.data)
                if (code === 401 || code === 402 || code === 403) {
                    wx.redirectTo({
                        url: "/pages/site/login/login"
                    })
                    return
                } else if (code === 200) {
                    return resolve(result.data)
                } else {
                    return reject(result.message)
                }
            },
            fail() {
                reject('接口有误，请检查')
            }
        })
    })
},

})