微信小程序上传图片到服务器总是失败_微信小程序上传图片过大导致请求失败的解决方法...

本文介绍了微信小程序在上传图片时遇到因图片过大导致请求失败的问题及解决方案。通过使用canvas绘制并压缩图片,可以有效降低图片大小,避免请求失败。文中提供了一段用于压缩图片的函数,并解释了如何通过调整参数控制压缩比例。
摘要由CSDN通过智能技术生成

很多时候我们都会碰到小程序上传图片时因为图片过大而导致请求失败,同时出现各种各样的问题,那么今天来给大家写一个微信小程序上传图片过大导致请求失败的完美解决办法。

以云开发小程序图片检测为例,如果图片过大就会出现一下报错:

图片过大,所以应该压缩图片

官方给出了一个 wx.compressImage接口用于压缩图片,该接口在开发工具和ios系统都表现良好,但是却在安卓机上几乎没有一点效果,所以这个方案被迫放弃了。于是在网上看到了另一种压缩思路,通过canvas绘制压缩图片,canvas在一般小程序中通常用于海报的生成,我们就是通过这种方式生成一张比原图要小的图片,这样就可以起到压缩效果了。

创建一个canvas标签

这个需要在wxml中创建,不然没有画布,就没办法进行绘图了,代码如下:

因为该canvas并不需要显示在页面上,所以我们把他写在了页面之外,其中cWidth和cHeight分别是画布的宽和高,因为图片的比例不一,所以这里采用动态数据,这样可以保证图片的等比例缩放。

编写压缩图片函数

下面的函数是在网上看到的一个版本,觉得挺好的,就直接放出来给大家学习一下,也可以直接调用。compressImg: function(e) {

var that = this;

console.log(e)

wx.getImageInfo({

src: e,

success: function(res) {

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值