小程序图片裁剪

最新推荐文章于 2024-06-28 16:18:31 发布

置顶愚蠢地人类

最新推荐文章于 2024-06-28 16:18:31 发布

阅读量8k

点赞数 14

分类专栏：前端前端，小程序文章标签：小程序图片裁剪小程序图片剪切小程序图片选择固定区域

本文链接：https://blog.csdn.net/shaleilei/article/details/84553535

版权

前端同时被 2 个专栏收录

53 篇文章 2 订阅

订阅专栏

前端，小程序

14 篇文章 0 订阅

订阅专栏

前几天写的项目涉及到图片裁剪：到相册选完图片需要裁剪固定的宽高，看了博客园里面的博客，基本上都是有问题的，要么就是地址失效的，但是有很着急使用，所以今天项目做完，我赶紧来写一个完整版本的；

结尾处有代码包链接：无效的时候提醒我，我立马上传

在这里插入图片描述

结尾处有代码包链接：无效的时候提醒我，我立马上传

第一步：
app.js中添加全局变量imgs:'../../img/defaultImg.png'
代码如下：

	App({
	  onLaunch: function() {
	  },
	  globalData: {
	    userInfo: null,
	    imgs:'../../img/defaultImg.png',//这个是我的默认图片
	  }
	})

第二步：
需要展示的界面添加image标签：<image src='{{defaultImg}}'></image>
并且defaultImg要在对应的JS文件中的data声明

第三步：
点击触发的函数名bindtap="bindChooseType" 你可以自定义函数名，函数代码如下：
成功后有个带参跳转，url: "/pages/center/upload?src=" + tempFilePaths

  bindChooseType(e) {//选择相机还是相册
    var demo=this;
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['camera', 'album'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths;
        var imgs = app.globalData.imgs;//这里获取到全局变量，没啥用，只是增强你的感觉，毕竟啥都没干呢
        console.log(imgs)
        wx.navigateTo({
          url: "/pages/center/upload?src=" + tempFilePaths
        });
        demo.setData({
          imgs: imgs
        });
      }
    });
  },

第四步：
首先获取上个界面带入的参数，就是选择图片后的临时路径，你可以对照着我的代码包里面的代码查看，裁剪的界面就是upload界面，weCropper是canvas，然后融合到unpload界面
需要注意的一点就是你的显示范围，或者说是你的截取宽高，裁剪宽高；
我的是要求750*400的尺寸，你除2就行，x,y,width,height都要改
```
  data: {
    cropperOpt: {
      id: "cropper",
      width: t,
      height: r,
      scale: 2.5,
      zoom: 8,
      cut: {
        x: (t - 375) / 2,
        y: (r - 200) / 2,
        width: 375,
        height: 200
      }
    }
```

第五步
点击确定获取到新的图片临时路径tmp，代码如下：
我写的o就是新的临时路径，然后把这个新的路径放入到全局里面

  getCropperImage: function() {
    this.wecropper.getCropperImage(function(o) {
      console.log("这个是什么鬼" + o);//这里的o就是新的临时路径tmp，
      app.globalData.imgs = o; //这个是上传图片的关键，剪裁后的图片，添加到全局图片中
      // wx.switchTab({
      //   url: "/pages/center/center"
      // })
      wx.navigateBack({})
    });
  },

这里有个注意点，有的人可以用wx.switchTab去关闭当前界面栈返回到上个界面（不懂的去看看界面栈），也可以用wx.navigateBack({})，这个是肯定不会有问题，wx.switchTab我的没反应

第六步
返回到上个界面怎么局部刷新呢，很简单，调用onShow(){},代码如下：

  onShow(){
    console.log(app.globalData.imgs)
    this.setData({
      defaultImg: app.globalData.imgs
    });
    this.upLoad(app.globalData.imgs)
  },

第七部（图片转化为https格式）
onShow中调用this.upLoad(app.globalData.imgs)方法，代码如下：
```
  upLoad(e) {
    wx.showLoading({
      title: '上传中...',
    })
    var demo = this;
    return;//自己使用的时候放开
    wx.uploadFile({
      url: 'https://xxxxxxxxxx',//找后端要
      filePath: e,
      name: 'uploadImg',//和后端约定一个明早
      formData: {
        // 'userId': app.globalData.iuserId
      },
      success: function (res1) {
        wx.hideLoading();
      },
    })
  },
```
解释下，wx.uploadFile就是把微信临时路径传到url对应的服务器，name值你和后端自己约定，然后filePath就是传的参数（临时路径，全局变量的那个），最后返回的就是一个https链接的正常路径，你也可以重新setData，这个时候的图片就可以供你保存图片或者表单提交都可以