微信小程序实现图片压缩功能

 更新时间:2018年01月26日 08:36:35   作者:liyanfei1992  
这篇文章主要为大家详细介绍了微信小程序实现图片压缩功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

小龙大哥的微信小程序在初始阶段相当于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标签。

进行接口调用。希望对大家有帮助。

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 实现图片首尾平滑轮播(JS原生方法—节流)

    实现图片首尾平滑轮播(JS原生方法—节流)

    下面小编就为大家带来一篇实现图片首尾平滑轮播(JS原生方法—节流)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • JavaScript实现简易tab栏切换内容栏

    JavaScript实现简易tab栏切换内容栏

    这篇文章主要为大家详细介绍了JavaScript实现简易tab栏切换内容栏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • String字符串截取的四种方式总结

    String字符串截取的四种方式总结

    下面小编就为大家带来一篇String字符串截取的四种方式总结。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • JavaScript内存管理与闭包实例详解

    JavaScript内存管理与闭包实例详解

    不管什么样的编程语言,在代码的执行过程中都是需要给它分配内存的,下面这篇文章主要给大家介绍了关于JavaScript内存管理与闭包的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-06-06
  • 只需一行代码,轻松实现一个在线编辑器

    只需一行代码,轻松实现一个在线编辑器

    在浏览器地址栏中输入一行代码:data:text/html, <html contenteditable> ,回车即可把浏览器变临时编辑器(需要浏览器支持 HTML5 属性 contenteditable)
    2013-11-11
  • js实现照片墙功能实例

    js实现照片墙功能实例

    这篇文章主要介绍了js实现照片墙功能的方法,以一个完整实例形式分析了js实现照片墙的css与js的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • webpack公共组件引用路径简化小技巧

    webpack公共组件引用路径简化小技巧

    日常开发中,我们会常常把一些功能提取出来,包装成一个公共模块或者组件.这篇文章主要介绍了webpack公共组件引用路径简化小技巧,非常具有实用价值,需要的朋友可以参考下
    2018-06-06
  • JavaScript文件的同步和异步加载的实现代码

    JavaScript文件的同步和异步加载的实现代码

    本篇文章主要介绍了JavaScript文件的同步和异步加载的实现代码,具有一定的参考价值,有兴趣的可以了解一下
    2017-08-08
  • webpack-dev-server核心概念案例详解

    webpack-dev-server核心概念案例详解

    这篇文章主要介绍了webpack-dev-server核心概念案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09
  • js限制文本框只能输入中文的方法

    js限制文本框只能输入中文的方法

    这篇文章主要介绍了js限制文本框只能输入中文的方法,涉及javascript正则匹配及鼠标事件的相关技巧,非常简单实用,需要的朋友可以参考下
    2015-08-08

最新评论