当前位置：首页 » 网站优化 » 正文

微信小程序压缩上传图片方法

 人参与  2022年10月17日 12:33  分类 : 网站优化  点这评论

简介微信小程序压缩上传图片，可以选择相册照片或者拍照后压缩上传图片

21017123314748.jpg

微信上传图片后，将图片按比例缩放后，绘制在canvas画布上面，即可实现上传图片压缩效果，具体代码如下:

1.wxml文件中：

1
<canvas id="attendCanvasId" canvas-id="attendCanvasId" style="width:{{canvasWidth}}px;height:{{canvasHeight}}px;position:fixed;left:-1000px;top:-2000px;"></canvas>

2.微信小程序js代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
//麦子笔记 小程序 上传图片压缩demo
Page({
  /**
   * 页面的初始数据
   */
  data: {
    canvasWidth:0,//初始化画布宽度
    canvasHeight:0,//初始化画布高度
  },
 
  //选择图片
  chooseImage(){
    wx.chooseImage({
      count:1,//演示限制只允许选择一张图片
      sizeType: ['compressed'], //我这里指定上传压缩图
      sourceType: ['album','camera'], //允许从相册选择上传、拍照上传
      success: (res) => {
        console.log(res)
        let tempFiles = res.tempFiles;
 
        //进行压缩
        this.imageShrink(tempFiles[0]['path']);
      }
    })
  },
 
  //压缩图片
  imageShrink(src_img){
    let ctx = '';
 
    //#attendCanvasId是画布canvas的id
    wx.createSelectorQuery()
    .select("#attendCanvasId")
    .context((res)=>{
      ctx = res.context;
      //获取图片信息，做这一步
      wx.getImageInfo({
        src: src_img,
        success: (ret)=>{
          let ratio = 2;//压缩比，值越高压缩的越小
          let canvasWidth = ret.width; //图片原始宽度
          let canvasHeight = ret.height;//图片原始高度
 
          //保证图片宽高在400以内
          if (canvasWidth > 400 || canvasHeight > 400){
            canvasWidth = Math.trunc(ret.width / ratio)
            canvasHeight = Math.trunc(ret.height / ratio)
          }
 
          //赋值画布的宽度、高度
          this.setData({
            canvasWidth:canvasWidth,
            canvasHeight:canvasHeight
          });
 
          //在画布绘制图片
          ctx.drawImage(src_img, 0, 0,canvasWidth,canvasHeight);
          ctx.draw();
 
          //留一定的时间绘制canvas
          setTimeout(()=>{
            wx.canvasToTempFilePath({
              canvasId: 'attendCanvasId',
              fileType:'jpg',//上传图片格式，jpg比较小
              success:(result)=> {
                //调用上传图片方法
                this.uploadimage(result.tempFilePath);
              },
              error:(err)=>{},
              complete: (e)=>{}
            });
          },300);
        }
      })
    }).exec();
  },
 
  //上传图片,src_img表示上传图片地址
  uploadimage(src_img){
    //开始上传以及上传返回值
    wx.uploadFile({
      url: "接口地址，如https://www.XXX.com/XXX",
      filePath: src_img,//图片地址
      name: '上传图片接口的参数名称',
      formData: {//请求的额外参数
        'user': 'test'
      },
      success (res){
        let result = JSON.parse(res.data);//返回的结果是String类型，json转换
 
      }
    });
  }
})


本文由本站原创或投稿者首发,转载请注明来源！

本文链接：http://www.ziti66.com/net/html/58.html

本文标签：js    

微信公众号：升级接入中

<< 上一篇下一篇 >>
为祖国加油
祖国加油,相信新的一年会更好...
为祖国加油
森林防火，人人有责。祖国加油...

  • 评论（0）
  • 赞助本站

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

相关文章


最新发布:

搜索

网站分类

Tags列表

最新留言

++发现更多精彩++

    海内存知己，天涯若比邻。

黔ICP备2020011602号黔ICP备2020011602号-8
贵公安备52052602000222号

❤安全运行天 Copyright © 2018-2025 66字体网 版权所有.

本站采用创作共用版权 CC BY-NC-SA 3.0 CN 许可协议，转载或复制请注明出处