微信小程序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加密后无法发起请求,安卓一切正常相关推荐
- android打印机没反应了,安卓微信小程序蓝牙连接打印机,代码执行成功,打印机没有响应,苹果可以正常使用...
- 安卓微信小程序 发送打印指令 代码显示打印成功 打印机没有响应 苹果的可以正常使用 安卓小程序发送指令代码显示发送指令成功 打印机不响应 function writeBLEValue( ...
- 微信小程序仿朋友圈上传图片到服务器,后端通过C#实现
现在微信小程序拍照上传的需求越来越多了,绝大部分小程序项目都会用到,虽然技术上没什么难度,但对于初学者来说,也是件费时费力的事情,三年前我在写这些代码的时候也是花费好几天的时间,最近有点空闲时间,于是 ...
- 微信小程序wx.compressImage的坑
微信小程序wx.compressImage的坑 如何使用 第二个坑 如何使用 微信小程序api官网写的是这个 wx.compressImage({ src: '', // 图片路径 quality: ...
- 微信小程序服务器开小差了,微信小程序wx.request请求封装
微信小程序 wx.request RequestTask wx.request(Object object)发起 HTTPS 网络请求. 示例代码 wx.request({ url: 'test.ph ...
- imagepreview使用案例_微信小程序wx.previewImage预览图片实例详解
一.小知识 二.例子 1.wxml 2.wxss .container { box-sizing:border-box; padding:20px; } .previewimg{ float:left ...
- 微信小程序 wx.request 的封装
自学转行到前端也已近两年,也算是简书和掘金的忠实粉丝,但是以前一直惜字如金(实在是胆子小,水平又低),现在我决定视金钱如粪土(就只是脸皮厚了,水平就那样),好了废话不多说,切入主题,最近自己尝试了一下 ...
- 微信小程序 wx.setstoragesync和wx.setstorage 区别
相同点: 微信小程序 wx.setstoragesync和wx.setstorage都是能把值保存在微信小程序缓存中,类似于浏览器的localstorage概念 区别: wx.setStorage是异 ...
- 微信小程序foreach遍历_微信小程序wx:for和wx:for-item的用法
微信小程序wx:for和wx:for-item的用法.兴弘海科技在微信小程序定制开发单门店系统的时候,在制作菜单的时候,需要体现左侧是菜单栏目,右侧是菜单名称列表的时候,遇到wx:for和wx:for ...
- 企业微信小程序wx.qy.login 的调用调试踩坑
企业微信小程序wx.qy.login 的调用调试踩坑 起步 在企业微信的开发过程中有很多坑,一切以企业微信开发文档为准. 近期我公司项目需要我联调开发企业微信小程序,以前没开发过,所以一切只能跟着企业 ...
最新文章
- 离开互联网上岸1年后,我后悔了!重回大厂内卷
- rrnDB数据库简介-16S基因多拷贝数的证据
- 最大熵模型:读书笔记
- MySQL中采用类型varchar(20)和varchar(255)对性能上的影响
- 相机+激光雷达重绘3D场景
- 朴实!简单!依你所好,MySQL排序查询ORDER BY
- java 空指针异常之一。 新建的一个对象没有NEW 导致其SET属性时报错
- 技术干货 | mPaaS 小程序高玩带你起飞:客户端预置小程序无视网络质量
- 注意!最新.Net Framework与Exchange 的兼容性问题
- 个人作业-四则运算题目生成程序(基于控制台)
- xp计算机u盘重装系统,xp系统怎么安装,小编教你利用u盘安装xp系统的方法
- fluent二维叶型仿真_【ICEPAK】手把手教你热仿真--认识ICEPAK
- Cadence PSpice 仿真9:低通滤波器蒙特卡洛分析仿真实战图文教程
- 78、无线网络设备知识大汇总,值得收藏学习!
- 如何做超级链接?如何做网页链接
- 批处理 窗口最小化 java_如何让批处理程序启动的时候最小化
- ​大数据和云计算技术周报(第37期)
- 网站关键词优化的细节【长尾关键词的挖掘与筛选】
- 鸿蒙系统电动车,鸿蒙系统被刷屏,新日电动车在其中是什么角色?
- python爬虫项目毕业设计_基于python爬虫的电影推荐网站的设计与实现毕业论文+初稿+项目源码+安装说明+使用说明...
热门文章
- cJSON 使用记录
- oracle查询操作
- MATLAB·提取图像中多个目标
- golang json数据解析错误情况
- Ubuntu20.04安装synergy(Windows和linux共用一套键鼠)
- 软件测试最好考研的学校,八点之后起床,考研失败率99%?测一测你的考研成功率有多少!...
- 真假小偷(python)实现
- MS2131 USB 3.0 高清音视频采集+HDMI 环出+混音处理芯片
- 自走棋投降代码_DOTA自走棋投降命令简介
- 游戏服务端开发之基础概念扫盲篇