The function of wechat applet to cut pictures

The whole platform （Vue、React、 Wechat applet ） Rotate at any angle Image clipping component | Wechat open community

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

Download it first wechat This folder . Put it in the applet components Inside

  Put it into a component to use . I rename this folder to simple-crop La .

json Introduced inside

{
  "navigationBarTitleText": " essential information ",
  "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 Inside

Page({
    data: {
        avatar1:'',
        crop:{
            src: null, //  Crop image address 
            visible: false, //  Whether or not shown 
            size: { // Cut out the size 
                width: 400,
                height: 400
            },
            cropSizePercent: 0.9, // Crop box display scale 
            borderColor: '#fff', // Crop box border color 
            result: '', // Crop result address 
        }
    },

// After selecting the picture 
uploadCallback(e){
    //console.log(" Image information 0",e)
},
// Close the crop picture pop-up 
closeCallback(e){
    this.setData({
        ['crop.visible']: false,
    })
    console.log(" Image information 1",e)
},
// Cut the picture pop-up and click ok 
cropCallback(e){
    //  Returns the local file path of the selected photo , Access the upload interface 
    this.UploadImg(e.detail.resultSrc);
},
// Click on the user's avatar 
changeHead(){
    var _this = this;
    wx.showActionSheet({
        itemList: [" Taking pictures ", " Choose from the album "],
        itemColor: "#000000",
        success: function (res) {
            if (!res.cancel) {
                if (res.tapIndex == 0) {
                    _this.imgWShow("camera")        // Taking pictures 
                } else if (res.tapIndex == 1) {
                    _this.imgWShow("album")      // Photo album 
                }
            }
        }
    })
},
//  Click to call mobile photo album / Taking pictures 
imgWShow: function (type) {
    var _this = this;

    let len = 0;
    if (_this.data.imgList != null) {
        len = _this.data.imgList.length
    }   // Get the currently existing picture 
    wx.chooseImage({
        count:1,     // The maximum number of pictures that can be uploaded , You can upload up to 1 Zhang 
        sizeType: ['original', 'compressed'],        // You can specify whether it is original or compressed , By default, both of them have 
        sourceType: [type],             // You can specify whether the source is an album or a camera ,  By default, both of them have 
        success: function (res) {
            wx.showToast({
                title: ' Uploading ...',
                icon: "loading",
                mask: true,
                duration: 1000
            })
            _this.setData({
                ['crop.visible']: true,
                ['crop.src']: res.tempFilePaths[0],
            })

        },
        fail: function () {
            wx.showToast({
                title: ' Picture upload failed ',
                icon: 'none'
            })
            return;
        }
    })
},

// Upload the avatar to the interface , Local pictures avatarUrl Turn into online pictures 
UploadImg(avatarUrl){
    uploadFile(avatarUrl).then(res => {
        this.setData({
            ['crop.visible']: false,
            avatar1:res,
        })
    })
},

// Interface encapsulation for uploading pictures

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(' Interface error , Please check ')
            }
        })
    })
},

})