1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 微信小程序wx.canvasToTempFilePath压缩上传图片 ios压缩成功但是数据sm2加密后无法

微信小程序wx.canvasToTempFilePath压缩上传图片 ios压缩成功但是数据sm2加密后无法

时间:2020-04-22 17:34:42

相关推荐

微信小程序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 = thislet imgSize = img.tempFiles[0].size / 1024console.log('img', img)let path = img.tempFiles[0].pathconsole.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, picBase64let t = {tempFilePaths:res.path, picBase64:sourcePhoto}resolve(t)}});},fail: function (error) {console.log(error)}})}, 500)//下载canvas图片});} else {let canvasWidth = imgInfo.widthlet canvasHeight = imgInfo.heightconsole.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, picBase64let 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总结笔记

…等等

进我主页看更多~

微信小程序wx.canvasToTempFilePath压缩上传图片 ios压缩成功但是数据sm2加密后无法发起请求 安卓一切正常

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。