直播电商平台开发，实现图片压缩上传（base64格式）

1.从本地相册或者相机拍照选择图片；

<br>chooseImage (){<br>wx.chooseImage({<br>  count: 1,<br>  //图片尺寸原图和压缩图<br>  sizeType: ['original', 'compressed'],<br>  //从相册选图和使用相机<br>  sourceType: ['album', 'camera'],<br>  success (res) {<br>    // tempFilePath可以作为img标签的src属性显示图片<br>    const tempFilePaths = res.tempFilePaths<br>  }<br>})<br>}

2.将图片转换为base64格式；

<br>//img_url为选择图片得到的临时路径<br>imgBase64(img_url) {<br>        let res = wx.getFileSystemManager().readFileSync(img_url, 'base64')<br>        console.log("输出base64",res)<br>        return res<br>    },<br> 

3.将图片上传；

<br>upLoad(){<br>wx.request({<br>  url: '你的接口', <br>  data: {<br>   img:'',//转base64后的字符串<br>  },<br>  header: {<br>    'content-type': 'application/json' <br>  },<br>  success (res) {<br>    console.log(res.data)<br>  }<br>})<br>}

但在实际开发中，用户上传的图片有可能很大，上传时间就会变长，这样就会影响用户体验，这个时候就需要我们对图片进行压缩。本文采用canvas压缩图片，步骤如下：

创建canvas；

取得图片临时路径；

取得图片的原始尺寸；

对图片原始尺寸进行等比例缩放；

将缩放后的图片画到canvas上；

导出canvas画出的图片资源url；

将url转为base64上传；

创建canvas，注意canvas标签中对于id的定义（刚开始尝试了2d写法，在画图片时候失败了）

<br>//wxml<br><canvas   style="width: {{cwidth}}px;height: {{cheight}}px;" canvas-id="mycanvas" class="canvas-compress"></canvas><br>//js<br>data:{<br>cwidth:'',<br>cheight:'',<br>}<br>//wxss<br>//此处是为了保证画出的图片不出现在视野中<br>.canvas-compress {<br>position: absolute;<br>top: -1000px;<br><br>} 

压缩画出canvas，得到临时路径：

<br> get_img(url) {<br>        let that = this<br>        console.log("选择图片返回的路径", url)<br>        wx.getImageInfo({<br>            src: url,<br>            success(res) {<br>                console.log("路径", res.path)<br>                console.log('获得原始图片大小', res.width, res.height)<br>                var originWidth, originHeight;<br>                originHeight = res.height;<br>                originWidth = res.width;<br>                // 最大尺寸限制   //压缩比例<br>                var maxWidth = originWidth >= originHeight ? 300 : 600,<br>                    maxHeight = originWidth >= originHeight ? 600 : 300;<br>                // 目标尺寸<br>                var targetWidth = originWidth,<br>                    targetHeight = originHeight;<br>                //等比例压缩，如果宽度大于高度，则宽度优先，否则高度优先<br>                if (originWidth > maxWidth || originHeight > maxHeight) {<br>                    if (originWidth / originHeight > maxWidth / maxHeight) {<br>                        // 要求宽度*(原生图片比例)=新图片尺寸<br>                        targetWidth = maxWidth;<br>                        targetHeight = Math.round(maxWidth * (originHeight / originWidth));<br>                    } else {<br>                        targetHeight = maxHeight;<br>                        targetWidth = Math.round(maxHeight * (originWidth / originHeight));<br>                    }<br>                }<br>                console.log("压缩后的图片大小", targetWidth, targetHeight)<br>                var ctx = wx.createCanvasContext('mycanvas');<br>                ctx.clearRect(0, 0, targetWidth, targetHeight);<br>                ctx.drawImage(res.path, 0, 0, targetWidth, targetHeight);<br>                ctx.draw();<br>                //更新canvas大小<br>                that.setData({<br>                    cwidth: targetWidth,<br>                    cheight: targetHeight<br>                });<br>                setTimeout(function () {<br>                    wx.canvasToTempFilePath({<br>                        canvasId: 'mycanvas',<br>                        success: (res) => {<br>                            console.log("压缩后的临时路径：", res.tempFilePath)<br>                        },<br>                        fail: (err) => {<br>                            console.error(err)<br>                        }<br>                    }, this)<br>                }, 400); //延迟400毫秒为了等canvas画上<br>            }<br>        })<br>    },<br> 

以上就是直播电商平台开发，实现图片压缩上传（base64格式），更多内容欢迎关注之后的文章