这里注意一下,图片压缩后的宽度是画布宽度的一半

canvasToTempFilePath 创建画布的时候会有一定的时间延迟容易失败,这里加setTimeout来缓冲一下

这是单张图片压缩,多张的压缩暂时还没有成功,保存到服务器上后是空白的,如有大神望指点一二

<canvas canvas-id='photo_canvas' style='width:1000rpx;height:{{canvas_h}}px' class='myCanvas'></canvas>
/**压缩图片 */
  compressionImage(tempFilePaths, params) {
    let that = this
    wx.getImageInfo({
      src: tempFilePaths[0],
      success: function(res) {
        var ctx = wx.createCanvasContext('photo_canvas');
        //设置canvas尺寸
        var towidth = 500; //按宽度500px的比例压缩
        var toheight = Math.trunc(500 * res.height / res.width);
        that.setData({
          canvas_h: toheight
        })
        ctx.drawImage(tempFilePaths[0], 0, 0, res.width, res.height, 0, 0, towidth, toheight)
        that.createMap(ctx, params);
      }
    })
  },
  /**创建画布并上传图片 */
  createMap(ctx, params) {
    let that = this;
    ctx.draw(true, function() {
      wx.showLoading({
        title: '压缩中',
      })
      setTimeout(() => {
        wx.canvasToTempFilePath({
          canvasId: 'photo_canvas',
          fileType: "jpg",
          success: function(res) {
            wx.hideLoading();
            wx.uploadFile({
              url: app.globalData.baseUrl + '/wechat/want/addWant',
              filePath: res.tempFilePath,
              name: 'file',
              formData: {
                'parameters': JSON.stringify(params)
              },
              success: function(res) {
                console.log("state:" + JSON.parse(res.data).state)
                if (JSON.parse(res.data).state === 1) {
                  wx.showToast({
                    title: '发布成功',
                    duration: 2000,
                    icon: "none",
                    success() {
                      setTimeout(function() {
                        wx.navigateBack({
                          delta: 1,
                        })
                      }, 1000);
                    }
                  })
                }
              },
              fail(res) {
                console.log("fail" + res)
              }
            })
          },
          fail(res) {
            if (res.errMsg === "canvasToTempFilePath:fail:create bitmap failed") {
              console.log("导出map失败")
            }
          }
        }, this)
      }, 200);

    })
  },

微信小程序压缩图片并上传到服务器(拿去即用)的更多相关文章

  1. 微信小程序 压缩图片并上传

    转自https://segmentfault.com/q/1010000012507519 wxml写入 <view bindtap='uploadImg'>上传</view> ...

  2. 微信小程序实现图片是上传、预览功能

    本文实例讲述了微信小程序实现图片上传.删除和预览功能的方法,分享给大家供大家参考,具体如下: 这里主要介绍一下微信小程序的图片上传图片删除和图片预览 1.可以调用相机也可以从本地相册选择 2.本地实现 ...

  3. 微信小程序实现图片裁剪上传(wepy)

    参考https://github.com/we-plugin/we-cropper,在wepy中实现,参考的具体例子是we-cropper/example/cutInside/ 项目上传图片时2:3的 ...

  4. 微信小程序裁剪图片后上传

    上传图片的时候调起裁剪页面,裁剪后再回调完成上传; 图片裁剪直接用we-cropper   https://github.com/we-plugin/we-cropper we-cropper使用详细 ...

  5. HTML5 Canvas前台压缩图片并上传到服务器

    1.前台代码: <input id="fileOne" type="file" /> <input id="btnOne" ...

  6. 微信小程序入门八头像上传

    1. action-sheet 底部弹出可选菜单组件 2. wx.uploadFile 将本地资源上传到服务器 3. wx.chooseImage 从本地相册选择图片或使用相机拍照. 4. wx.pr ...

  7. 微信小程序:多张图片上传

    最近在写小程序的相册,需要多张图片的上传.因为小程序不支持数组的多张图片同时上传,然后根据自己的需求+借鉴网上各位大神的案例,总算搞定.分享下,不足之处,多多指教哦 页面wxml: <form ...

  8. 微信小程序--更换用户头像/上传用户头像/更新用户头像

    changeAvatar:function (){ var that=this; wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'c ...

  9. [转]微信小程序实现图片上传功能

    本文转自:http://blog.csdn.net/feter1992/article/details/77877659 前端: 微信开发者工具 后端:.Net 服务器:阿里云 这里介绍微信小程序如何 ...

随机推荐

  1. manacher(马拉车)算法

    断断续续地看了两天的马拉车算法,可算是给搞明白了(贼开心),这算是自己搞懂的第一个算法了(23333333333333)这个算法照目前自己的理解来看,貌似就只能求个字符串中的回文串(接触这个算法是要求 ...

  2. Find The Multiple POJ - 1426 (BFS)

    题目大意 给定一个整数,寻找一个只有0,1构成的十进制数使得这个数能够整除这个整数 解法 直接bfs第一位放入1,之后每一位放入1或者0 代码 #include <iostream> #i ...

  3. Mybatis中collection和association的使用区别

    1. 关联-association2. 集合-collection 比如同时有User.java和Card.java两个类 User.java如下: public class User{ privat ...

  4. 初遇Java

    什么是JVM?JVM是java虚拟机(JVM Java Virtual Machine),java程序需要运行在虚拟机上,不同平台有自己的虚拟机,因此java语言可以跨平台. 什么是JRE?包括Jav ...

  5. CentOS \Linux 6版本系统命令及其使用详解

    概述 常用的linux命令,分为文件管理.磁盘管理.用户管理.软件管理.系统管理等. 文件管理 ls命令 使用权限:所有使用者 使用方式:ls [-alrtAFR] [name...] 说明:显示指定 ...

  6. 洛谷 4302 BZOJ 1090 SCOI2003 字符串折叠 UVA1630 Folding(输出方案版)

    [题解] 区间DP.  设f[i][j]表示i~j的最小代价.再枚举中间点k,很容易想到转移方程为f[i][j]=min(f[i][j],f[i][k]+f[k][j]),同时如果i~k可以通过重复获 ...

  7. 【05】AngularJS 指令

    AngularJS 指令 AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 指令 AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. ng-app ...

  8. 【Codeforces 484A】Bits

    [链接] 我是链接,点我呀:) [题意] 让你求出l~r当中二进制表示1的个数最多的数x [题解] 最多有64位 我们可以从l开始一直增大到r 怎么增大? 找到l的二进制表示当中0所在的位置 假设i这 ...

  9. 【eclipse】eclipse启动优化&打印GC信息&重要的堆结构连接

    eclipse启动优化,终于不那么卡了! 网上找了好多都是myEclipse的优化的,跟eclipse有点区别,找了很多方法还是不能让这个eclipse(Version: Kepler Release ...

  10. Sublime Text 3配置支持Markdown编辑

    继上一篇http://www.cnblogs.com/EasonJim/p/7119304.html文章安装好之后,对Markdown支持需要做如下处理: 1.按下[Ctrl]+[Shift]+[P] ...