小程序图片裁剪

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

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

小程序图片裁剪_第1张图片

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

  1. 第一步:
    app.js中添加全局变量imgs:'../../img/defaultImg.png'
    代码如下:
	App({
	  onLaunch: function() {
	  },
	  globalData: {
	    userInfo: null,
	    imgs:'../../img/defaultImg.png',//这个是我的默认图片
	  }
	})
  1. 第二步:
    需要展示的界面添加image标签:
    并且defaultImg要在对应的JS文件中的data声明

  2. 第三步:
    点击触发的函数名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
            });
          }
        });
      },
    
  3. 第四步:
    首先获取上个界面带入的参数,就是选择图片后的临时路径,你可以对照着我的代码包里面的代码查看,裁剪的界面就是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
          }
        }
    
  4. 第五步
    点击确定获取到新的图片临时路径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我的没反应

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

      onShow(){
        console.log(app.globalData.imgs)
        this.setData({
          defaultImg: app.globalData.imgs
        });
        this.upLoad(app.globalData.imgs)
      },
    
  6. 第七部(图片转化为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,这个时候的图片就可以供你保存图片或者表单提交都可以

你们有任何问题都可以留言区回复,谢谢

代码包地址:https://download.csdn.net/download/shaleilei/10808608
github地址: https://github.com/biubiuvue/imgClips
插件地址: https://github.com/we-plugin/we-cropper

你可能感兴趣的:(前端,前端,小程序)