最近在写微信小程序的上传图片功能,趟过了一些坑记录一下。

想要满足的需求是,从手机端上传图片至服务器,为了避免图片过大影响传输效率,需要把图片裁剪至适当大小后再传输

主要思路是,通过wx.chooseImage()函数获得图片的文件路径,在canvas画板获得文件路径后,重新绘制成制定大小的图片。再通过canvasToTempFilePath(),生成新的文件路径。最后通过wx.uploadFile()上传到指定服务器

遇到的坑有三个

一,在canvas中绘制的单位都是px,但由于不同屏幕的像素比不同,在小程序中样式我们使用的单位是rpx,所以在canvas中就需要把rpx换成对应的px;由于rpx可以根据屏幕宽度进行自适应,规定屏幕宽为750rpx,所以rpx换算成px的公式是:
1rpx = 屏幕宽度 / 750
这一点在小程序的官方文档也有讲到:
屏幕宽度可以使用wx.getSystemInfoSync();获取;[][1]
所以例如在样式中你的canvas宽度650rpx,那么在canvas中绘制使用的宽度就是:(屏幕宽度 / 750)* 650 ;

最新文章

  1. selenium-webdriver(python) (十六) --unittest 框架
  2. cantor三分集
  3. windows下搭建学习objective-c 的运行环境【转载】
  4. shell随机写入指定文件
  5. NGUI自适应分辨率,黑边自动填充, 无黑边,等比例缩放
  6. 分页 page
  7. QQ宠物吹泡泡游戏小助手 VC++6.0代码分析
  8. Ajax实现动态的二级级联菜单
  9. ajax联动
  10. [CSS3]学习笔记-文字与字体相关样式
  11. C#基础加强(7)之ref与out
  12. [PA2014]Iloczyn
  13. Remove Element leetcode java
  14. [部署]VM11下CentOS7mini安装及配置
  15. Android:客户端和服务器之间传输数据加密
  16. 《软件定义网络:SDN与OpenFlow解析》
  17. 计蒜客 31451 - Ka Chang - [DFS序+树状数组][2018ICPC沈阳网络预赛J题]
  18. HashMap 的工作原理及代码实现,什么时候用到红黑树
  19. 【BZOJ-1194】潘多拉的盒子 拓扑排序 + DP
  20. Windows Azure Mobiles Services实现client的登录注冊

热门文章

  1. Pycharm:设置自带控制台的python版本
  2. LeetCode-023-合并K个升序链表
  3. 实例化类对象及类的属性set方法使用不当
  4. VirtualBox虚拟机--安装新系统
  5. [2022-2-18] OICLASS提高组模拟赛2 A·整数分解为2的幂
  6. CentOS 8: yum仓库配置
  7. STP详解-STP、RSTP、MSTP
  8. Kotlin笔记小结(For Java Developer)
  9. LGP7915题解
  10. MySQL8.0降级安装5.7