【微信小程序】选择图片并裁剪图片 前端裁剪上传

Cropping

小程序码

【微信小程序】选择图片并裁剪图片 前端裁剪上传_第1张图片

组件介绍

微信小程序裁剪组件,支持前端裁剪和后端裁剪两种方式

1.前端裁剪:将裁剪框指定的区域,单独生成图片,获取裁剪图片的临时文件路径

2.后端裁剪:获取裁剪框相对于原图的像素坐标位置,将裁剪区域坐标以及原图临时文件路径,传到后端进行图片裁剪

git地址

https://gitee.com/gnliscream/image-cropper

软件架构

使用微信小程序自定义组件开发

小程序自定义组件官网:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html

使用说明

目录结构

【微信小程序】选择图片并裁剪图片 前端裁剪上传_第2张图片
image

使用步骤

1.下载组件源代码,放入小程序里自己定义的组件文件夹(例如/component)

2.创建图片裁剪界面(例如/pages/image)

3.image.json引入image-cropper组件

{
  "usingComponents": {
    "image-cropper":"/component/image-cropper/index"
  }
}

4.image.wxss设置背景色为黑色

page{
  background-color: black;
}

.white{
  color: #fff;
  font-size: 30rpx;
}

.black{
  color: #333333;
  font-size: 30rpx;
  margin-top:10rpx;
}

5.image.wxml

添加image-cropper标签,如下


可以在image-cropper标签内添加操作按钮,如下



  
  
    裁剪框宽高比值
    
    裁剪图片质量
    
    
      
      
    
    
    
  

6.image.js

首先需要在onLoad方法中,设置裁剪标签属性

// 裁切对象
var cropper
Page({
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 根据标签id,获取到image-cropper对象,存储在全局变量cropper中
    cropper = this.selectComponent("#my-cropper");

    // 设置标签属性
    this.setData({
      // 从图片选择界面传原图临时文件地址给src
      src: options.imagePath,
      // 设置裁剪框宽高比值为 1(宽:高=1:1=1)
      aspectRatio: 1,
      // 设置是否等比缩放
      isProportion: true,
      // 设置裁剪后的图片质量
      quality: 1
    })
  },
})

然后添加按钮相应的绑定方法

// 裁切对象
var cropper
Page({
  /**
   * 页面的初始数据
   */
  data: {
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 根据标签id,获取到image-cropper对象,存储在全局变量cropper中
    cropper = this.selectComponent("#my-cropper");

    // 设置标签属性
    this.setData({
      src: options.imagePath,
      aspectRatio: 1,
      isProportion: true,
      quality: 1
    })
  },
  btn1(e){
    // 图片宽高比值
    this.setData({
      aspectRatio: e.detail.value.toFixed(1)
    })
  },
  btn2(e){
    // 图片质量
    this.setData({
      quality: e.detail.value.toFixed(1)
    })
  },
  btn3(){
    // 打开等比缩放
    this.setData({
      isProportion: true
    })
  },
  btn4(){
    // 关闭等比缩放
    this.setData({
      isProportion: false
    })
  },
  btn5(){
    // 调用image-cropper对象的getResults函数,获取裁剪参数
    cropper.getResults(res =>{
      console.log(res)
    })
  },
  btn6(){
    // 调用image-cropper对象的getImagePath函数,获取裁剪后图片的地址
    cropper.getImagePath(res =>{
      console.log(res)
    })
  }
})

组件文档

标签属性

参数 类型 默认值 说明
src String - 图片路径
aspectRatio Number 1 裁剪框宽高比值,范围 [0.4,3]
isProportion Boolean false 是否开启宽高等比缩放
quality Number 1 前端裁剪的裁剪图片质量,范围 (0,1]

标签对象函数

1.获取裁剪结果参数
getResults(res=>{ })

获取到的res如下

{
    "crop":{
        "width": 1000, //裁剪完成的图片宽
        "height": 1000, //裁剪完成的图片高
        "top": 100, //裁剪完成的图片左上角,到原图顶部的距离
        "left": 200 //裁剪完成的图片左上角,到原图左边的距离
    },
    "originalImageInfo":{
        "width": 1920, //原图宽
        "height": 1080, //原图高
        "path": "images/1.jpg", //原图路径
        "type": "jpeg", //原图类型
        "orientation": "up" //原图拍摄设备方向
    }
}

获取到的裁剪参数的对应关系图

【微信小程序】选择图片并裁剪图片 前端裁剪上传_第3张图片

获取到裁剪参数后,将原图以及裁剪参数传到后台进行裁剪

2.获取裁剪图片地址

getImagePath(res=>{ })

获取到的res如下

{ "path" : "http://tmp/wxb172f5d66edf27aa.jpg" }

你可能感兴趣的:(【微信小程序】选择图片并裁剪图片 前端裁剪上传)