微信小程序wx.canvasToTempFilePath压缩上传图片，ios压缩成功但是数据sm2加密后无法发起请求，安卓一切正常
Posted 北极光之夜。
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序wx.canvasToTempFilePath压缩上传图片，ios压缩成功但是数据sm2加密后无法发起请求，安卓一切正常相关的知识，希望对你有一定的参考价值。
问题以及解决：
吐槽遇到的问题~
在写微信小程序的时候，采用wx.canvasToTempFilePath压缩图片且上传的时候，安卓一切正常，我在开发工具上也一切正常，偏偏ios上就不正常，不正常不是指压缩失败，而是明明也压缩成功了，竟然发不起网络请求，离大谱。因为所有请求的入参都会经过sm2加密，ios压缩成功后想要发起请求，就卡在了加密这步，无法执行下面的请求方法，打印出来加密前的参数也都没问题，但就是卡住了不往下走了，导致压根没发起请求，玄学。更玄的是去年ios都没问题，代码也没动过，现在ios就不行了。经过排查，wx.canvasToTempFilePath加上了两个属性destWidth和destHeight定义又都成功了，奇怪明明是非必填属性，安卓我也没填采用默认的都没问题，说到底我也不确定是不是这个问题，因为也改了其它逻辑，不过现在确实是一切正常了。ios奇奇怪的问题真是太多了，晕。
如今的压缩代码如下（当宽度大于高度时图片可向左旋转）：
wx.createCanvasContext(‘attendCanvasId’)一直提示已废弃，不过以前用了我就不改了，而且改新的也麻烦hhh，主要是也能用：
picCompress(img, width = 600, size = 102, moreCallback)
let that = this
let imgSize = img.tempFiles[0].size / 1024
console.log('img', img)
let path = img.tempFiles[0].path
console.log('图片大小(kb)', imgSize);
return new Promise((resolve, reject) =>
wx.getImageInfo(
src: img.tempFilePaths[0],
success: function (imgInfo)
console.log('获取图片信息', imgInfo)
let ctx = wx.createCanvasContext('attendCanvasId');
/**
* 压缩图片：
* 图片宽度大于 width 的时候压缩，小于的时候不操作
*/
if (imgInfo.width > width)
var canvasWidth = width;
var canvasHeight = (width * imgInfo.height) / imgInfo.width;
//设置canvas尺寸
that.setData(
canvasWidth: canvasWidth,
canvasHeight: canvasHeight
);
//将图片填充在canvas上
if (canvasWidth < canvasHeight)
//顺时针旋转270度
that.setData(
canvasWidth: (width * imgInfo.height) / imgInfo.width,
canvasHeight: width,
)
console.log('宽高：',canvasWidth,canvasHeight)
ctx.translate(((width * imgInfo.height) / imgInfo.width) / 2, width / 2)
ctx.rotate(270 * Math.PI / 180)
ctx.drawImage(path, -width / 2, -((width * imgInfo.height) / imgInfo.width) / 2, width, (width * imgInfo.height) / imgInfo.width);
else
ctx.drawImage(path, 0, 0, canvasWidth, canvasHeight);
// ctx.drawImage(path, 0, 0, canvasWidth, canvasHeight);
ctx.draw(false, () =>
//下载canvas图片
//保存临时文件
setTimeout(() =>
wx.canvasToTempFilePath(
canvasId: 'attendCanvasId',
fileType: 'jpg',
quality: 0.5,
/* width: 0,
height: 0, */
destWidth: that.data.canvasWidth,
destHeight: that.data.canvasHeight,
success: function (res)
console.log(res.tempFilePath)
wx.getImageInfo(
src: res.tempFilePath,
success: function (res)
console.log('---------------1')
console.log('压缩成功')
console.log(res)
let sourcePhoto = wx.getFileSystemManager().readFileSync(res.path, 'base64')
console.log('------------url:',res.path)
let t = tempFilePaths:res.path, picBase64:sourcePhoto
resolve(t)
);
,
fail: function (error)
console.log(error)
)
, 500)
)
else if (imgSize > size) // 宽度小于width 但是大小大于size 不压尺寸压质量
var canvasWidth = imgInfo.width;
var canvasHeight = imgInfo.height;
//设置canvas尺寸
that.setData(
canvasWidth: canvasWidth,
canvasHeight: canvasHeight
);
//将图片填充在canvas上
if (canvasWidth < canvasHeight)
//顺时针旋转270度
that.setData(
canvasWidth: (width * imgInfo.height) / imgInfo.width,
canvasHeight: width,
)
ctx.translate(((width * imgInfo.height) / imgInfo.width) / 2, width / 2)
ctx.rotate(270 * Math.PI / 180)
ctx.drawImage(path, -width / 2, -((width * imgInfo.height) / imgInfo.width) / 2, width, (width * imgInfo.height) / imgInfo.width);
else
ctx.drawImage(path, 0, 0, canvasWidth, canvasHeight);
ctx.draw(false, () =>
setTimeout(() =>
wx.canvasToTempFilePath(
canvasId: 'attendCanvasId',
fileType: 'jpg',
quality: 0.5,
/* width: 0,
height: 0, */
destWidth: that.data.canvasWidth,
destHeight: that.data.canvasHeight,
success: function (res)
console.log(res.tempFilePath)
wx.getImageInfo(
src: res.tempFilePath,
success: function (res)
console.log('---------------2')
console.log('压缩成功')
console.log(res)
let sourcePhoto = wx.getFileSystemManager().readFileSync(res.path, 'base64')
console.log('------------url:',res.path)
// moreCallback(res.path, sourcePhoto) tempFilePaths, picBase64
let t = tempFilePaths:res.path, picBase64:sourcePhoto
resolve(t)
);
,
fail: function (error)
console.log(error)
)
, 500)
//下载canvas图片
);
else
let canvasWidth = imgInfo.width
let canvasHeight = imgInfo.height
console.log('宽高：',canvasWidth,canvasHeight)
//将图片填充在canvas上
if (canvasWidth < canvasHeight)
//顺时针旋转270度
that.setData(
canvasWidth: (width * imgInfo.height) / imgInfo.width,
canvasHeight: width,
)
ctx.translate(((width * imgInfo.height) / imgInfo.width) / 2, width / 2)
ctx.rotate(270 * Math.PI / 180)
ctx.drawImage(path, -width / 2, -((width * imgInfo.height) / imgInfo.width) / 2, width, (width * imgInfo.height) / imgInfo.width);
else
ctx.drawImage(path, 0, 0, canvasWidth, canvasHeight);
ctx.draw(false, () =>
setTimeout(() =>
wx.canvasToTempFilePath(
canvasId: 'attendCanvasId',
fileType: 'jpg',
quality: 0.5,
/* width: 0,
height: 0, */
destWidth: that.data.canvasWidth,
destHeight: that.data.canvasHeight,
success: function (res)
console.log(res.tempFilePath)
wx.getImageInfo(
src: res.tempFilePath,
success: function (res)
console.log('---------------3')
console.log('压缩成功')
console.log(res)
let sourcePhoto = wx.getFileSystemManager().readFileSync(res.path, 'base64')
console.log('------------url:',res.path)
// moreCallback(res.path, sourcePhoto) tempFilePaths, picBase64
let t = tempFilePaths:res.path, picBase64:sourcePhoto
resolve(t)
);
,
fail: function (error)
console.log(error)
)
, 500)
);
,
fail: function (getInfoErr)
that.data.loading.clear()
console.log(getInfoErr)
// wx.hideLoading();
wx.showToast(
title: '获取图片信息失败',
icon: 'error',
duration: 2000
);
)
)
,
压缩成功后，直接把图片转换成base64，然后直接返回一个promise结果出去，再进行操作后发起请求。
let t = _this.picCompress(res, 600, 100) .then(res =>
// 请求
)
886~
我的哔哩哔哩空间
Gitee仓库地址：全部特效源码
其它文章：
~关注我看更多简单创意特效：
文字烟雾效果 html+css+js
环绕倒影加载特效 html+css
气泡浮动背景特效 html+css
简约时钟特效 html+css+js
赛博朋克风格按钮 html+css
仿网易云官网轮播图 html+css+js
水波加载动画 html+css
导航栏滚动渐变效果 html+css+js
书本翻页 html+css
3D立体相册 html+css
霓虹灯绘画板效果 html+css+js
记一些css属性总结（一）
Sass总结笔记
…等等
进我主页看更多~
微信小程序是啥?微信小程序有啥用?
最近被微信小程序刷爆了朋友圈，到底微信小程序是什么？我只知道微信服务号跟微信订阅号，微信小程序不知道是什么?微信小程序它有什么用?
微信小程序是一种不需要下载安装即可使用的应用。特点：它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。
也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。
应用将无处不在，随时可用，但又无需安装卸载。
然而微信应用号要能获取足够多的用户，还得要开发者的支持。毫无疑问，开发者将是微信应用号的最大获益群体。对于开发者而言，应用号可以节省开发成本，并且可以提升研发效率，开发人员只需要研发出一款适用于浏览器应用的产品，就可满足不同操作系统的使用需求。 参考技术A 微信小程序就像安装了很多的APP的一个文件，比如赢在移动开发一个系统然后把它放在微信小程序的公众号中，想用什么APP，搜索出来就可以用了，无需再下载。本回答被提问者采纳 参考技术B 作为一个菜鸟级别的前端工程师开发者，虽然有点关公门前耍大刀的嫌疑，但是我还是想回答一下我对这个微信小程序的认识和看法！
微信小程序应该是微信平台迄今为止做的最轰动的一件事儿！代码全部开源的开发一些平台级应用。简单的说就是很多需要前后台共同完成的工作，在微信小程序出来之后 重心倾向于前台了！就是你手机上很多应用APP可以不用下载，仅仅通过微信就可以使用了。
当然，这也只是初期的一个猜想和臆测。具体以后会发展成什么样，互联网是不可捉摸的！以上仅仅是一个入行三个月的小菜逼自己的一些认识！大神莫笑！
以上是关于微信小程序wx.canvasToTempFilePath压缩上传图片，ios压缩成功但是数据sm2加密后无法发起请求，安卓一切正常的主要内容，如果未能解决你的问题，请参考以下文章