• 首页
  • 博客
  • 网站
  • 分享
  • 数码

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

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

 人参与  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列表

最新留言

++发现更多精彩++

    祖国加油!!!

Copyright ziti66.com on 2022. Some Rights Reserved.