您好,欢迎访问一九零五行业门户网

微信小程序开发图片压缩功能

这次给大家带来微信小程序开发图片压缩功能,微信小程序开发图片压缩功能的注意事项有哪些,下面就是实战案例,一起来看一下。
小龙大哥的微信小程序在初始阶段相当于ie界的6,在这里给大家说一个刚趟过去的坑。
拍照的api。
wx.chooseimage({  count: 1, // 默认9  sizetype: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有  sourcetype: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有  success: function (res) {    // 返回选定照片的本地文件路径列表,tempfilepath可以作为img标签的src属性显示图片   var tempfilepaths = res.tempfilepaths;   } });
在上边,明确的给出大小的类型,本想省事,然并没有什么用…..
废话少说,给大家说下ios和安卓中差别,拍照图片压缩的坑。
// 点击照相  takepictures:function(){  var that = this;  wx.chooseimage({   count: 1, // 默认9   sizetype: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有   sourcetype: ['camera'], // 可以指定来源是相册还是相机,默认二者都有   success: function (res) {   // 返回选定照片的本地文件路径列表,tempfilepath可以作为img标签的src属性显示图片   var tempfilepaths = res.tempfilepaths;   that.setdata({    attendsuccessimg:tempfilepaths[0]   });   // 上传图片   //判断机型   var model = ;   wx.getsysteminfo({    success:function(res){    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) {   }  });  },
再点击拍照后,ios的进行了图片压缩功能,然而,安卓的依然是那么大,所以 在这过程中,我们需要判断下当前机型,然后执行canvas压缩。
上述代码,拿到即可用,但少一部分wxml中需要添加一个canvas标签。
进行接口调用。希望对大家有帮助。
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
推荐阅读:
jquery代码优化方式的总结
360浏览器兼容模式的页面显示不全怎么处理
node.js的非对称加密详解
以上就是微信小程序开发图片压缩功能的详细内容。
其它类似信息

推荐信息