小程序中上传图片并进行压缩（二）

上一篇文章说了，一些简单的小程序上传的内容，我在这纠正下错误，那个只是上传到页面，在页面上把图片缩小了，显示在页面上，那个连接还是可以传的，但真正的压缩并没有实现，今天说下另外一种压缩方法，上一张图让大家看的直白些。

这里就不让他去选择菜单了，不会的话请看上一篇文章（选择是拍照还是本地），这里上传图片直接进入到本地去获取

还是上代码，里面都有一些我自己理解的注释

var util = require('../../utils/util.js')
var app = getApp()
Page({data: {},// 绘制图片到canvas上drawCanvas: function (res) {const ctx = wx.createCanvasContext('myCanvas');//创建画布var that = this;var _w = res.width,//创建宽高等于获取到的宽高_h = res.height;this.setData({ _w: _w, _h: _h})//传输到视图层ctx.drawImage(res.path,0, 0, _w, _h);//画布中展示图片大小wx.showLoading({title:"压缩中..."})//运行压缩输出文字（显示loading）let timer = setTimeout(function(){//定时事件，和展示图片与wx。showLoading关系密切ctx.draw();//回调函数wx.canvasToTempFilePath({//把当前画布指定区域的内容导出生成指定大小图片，并返回文件路径canvasId:"myCanvas",//画布idquality:0.5,//图片质量，取值范围在（0，1】success:function(res){console.log(res.tempFilePath)//给后台传输这个地址wx.hideLoading()//隐藏loadingclearTimeout(timer);//关闭定时器timer = null;//把定时器制null
        }})},2000)},selectImage(){var that = this;wx.chooseImage({count:1,sizeType: ['original', 'compressed'],//是否是压缩还是原图sourceType: ['album', 'camera'],//是拍照还是本地获取success: function (res) {var tempFilePaths = res.tempFilePaths;//赋值that.setData({ tempFilePaths: tempFilePaths })//发送从逻辑层发送到视图层that.saveImage(that.data.tempFilePaths)//运行事件
      }})},saveImage: function (imageArr) {for (var i = 0, item; item = imageArr[i++];){//遍历this.getImageInfo(item);}},getImageInfo(src){var that = this;wx.getImageInfo({//获取图片信息
      src: src,success:function(res){that.drawCanvas(res);//成功去进行压缩事件
      }})}
})

最后写一个传输方法，把上面的地址传给后台就可以了，遍历是为了传多张图片，但是最终效果没有达到，只能传一张图片了，大神们谁有更好的办法，或能够传多张图片的方法，请告诉下我

转载于:https://www.cnblogs.com/yishifuping/p/9552442.html

小程序中上传图片并进行压缩（二）相关推荐

微信小程序中裁剪图片以及压缩到指定尺寸并上传
本文分为两个内容,分别是裁剪图片和压缩引出问题 1.为何要裁剪图片因为需要上传头像,但是每个型号的手机拍出来的照片尺寸都不太一样,不能统一,所以,希望在上传之前进行自主裁剪,保证上传到服务器上的尺 ...
最近在用uniapp做一款app软件，兼容在小程序中可以通过扫描微信二维码获取参数
功能描述该接口用于获取小程序码,适用于需要的码数量极多的业务场景.通过该接口生成的小程序码,永久有效,数量暂无限. 注意事项如果调用成功,会直接返回图片二进制内容,如果请求失败,会返回 JSON ...
小程序中生成带logo的二维码，有源码
背景: 今天需要做一个会员二维码展示的功能,主要用于会员在线下消费时便于商家快速获取会员信息. 实现: 直接通过js画出来的,这个js是网上开源的.不多说,先上效果图.(第一张是自定义图片:第二张是微 ...
微信小程序中进行图片压缩
微信小程序中进行图片压缩问题: 一般情况下,小程序在进行拍照识别的时候,上传图片的大小会使小程序出现冗余,这个时候,为了减少小程序的冗余并且使上传的图片可以分辨出该图片中的内容是那些内容,我们就需 ...
在微信小程序中识别付款二维码
一.前言由于微信小程序的规则限制,在小程序内部是无法直接识别二维码的,这样对于想通过微信小程序给微信公众号引流的想法大抵都被扼杀了,偶然间发现微信官方小程序"微保"竟然做到了,而 ...
转载：在微信小程序中生成二维码
目录转载: weapp-qrcode-canvas-2d 仓库地址测试环境使用安装方法1:直接引入 js 文件安装方法2:npm安装安装完成后调用例子1:没有使用叠加图片例子2:使用叠 ...
在H5、微信小程序中使用canvas绘制二维码、分享海报
在H5.微信小程序中使用canvas绘制二维码.分享海报文章目录在H5.微信小程序中使用canvas绘制二维码.分享海报前言一.canvas绘制二维码 1.H5中使用canvas 2.微信小程 ...
如何在微信小程序中生成二维码：一个最简单的案例就让你明白
使用weapp.qrcode.js 在微信小程序中,快速生成二维码一.效果二.具体步骤.代码下载weapp-qrcode代码然后将 dist 目录下的weapp.qrcode.esm.j ...
小程序云开发学习笔记（二）
目录 JavaScript入门操作数组分隔符join方法数组push方法移除最后一项pop方法操作对象给已有对象添加属性和值删除对象的某个属性常量字符串的操作 Math对象 Date ...
uniapp 微信小程序开发图片上传压缩
uniapp 微信小程序开发图片上传压缩安卓上传图片并压缩思路全部代码安卓上传图片并压缩由于后端接口对图片的大小有限制,所以在上传图片是需要压缩处理: uni.chooseImage({c ...

小程序中上传图片并进行压缩（二）

小程序中上传图片并进行压缩（二）相关推荐

最新文章

热门文章