E企盈营销工具技术服务商 热线:4006-838-530

微信小程序调用摄像头,实现图片压缩上传

E企盈直播平台营销卖货系统

这篇文章主要为大家详细介绍了微信小程序实现图片压缩功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,下面直接上代码先是wxml:view bindtap=’takePictures’选择图片/viewcanvas canvas-id=”attendCanvasId” style=”width:300px;height:300px;position: absolute;left:-300px;top:-300px”/canvasimage src=”{{attendSuccessImg}}”/image下面是jsPage({   /**   * 页面的初始数据   */  data: {    attendSuccessImg: “”,    canvasImgUrl:”,    src:””  },  /**   * 生命周期函数–监听页面加载   */   onLoad: function(options) {},  // 点击照相  takePictures: function () {    var that = this;    wx.chooseImage({      count: 1, // 默认9      sizeType: [‘compressed’], // 可以指定是原图还是压缩图,默认二者都有     // 可以指定来源是相册还是相机,默认二者都有      success: function (res) {        // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片        var tempFilePaths = res.tempFilePaths;        that.setData({          attendSuccessImg: tempFilePaths[0]        });        // 上传图片        //判断机型        var model = “”;        wx.getSystemInfo({          success: function (res) {            var that = this;            model = res.model;          }        })        if (model.indexOf(“iPhone”) = 0) {          // that.uploadFileOpt(that.data.attendSuccessImg);          console.log(111111)        } else {          drawCanvas();        }        // 缩放图片        function drawCanvas() {          const ctx = wx.createCanvasContext(‘attendCanvasId’);          ctx.drawImage(tempFilePaths[0], 0, 0, 94, 96);          ctx.draw();          that.prodImageOpt();        }      }    });  },  // 生成图片  prodImageOpt: function () {    var that = this;    wx.canvasToTempFilePath({      canvasId: ‘attendCanvasId’,      success: function success(res) {        that.setData({          canvasImgUrl: res.tempFilePath        });        // 上传图片        that.uploadFileOpt(that.data.canvasImgUrl);      },      complete: function complete(e) {      }    });  },})

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序调用摄像头,实现图片压缩上传
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏