微高兄信小程序图片压缩有三种方法,一种是使用官方提供的接口 wx.compressImage(Object object) ;一种是通过压缩图片的大小,利用canvas重绘来得到压缩图片;最后一种安装第三方图片压缩包。
由于第一种方法网上很多人说压缩不明显或者失效,所以选择使用canvas重绘来实现图片压缩。同时,该种方法可以控制图片的最大尺寸,保持上传图片大小尺寸相差不多。在我们的学生节晚会小程序中,屏幕显示图片会比较美观一致。
1. 通过 wx.chooseImage 接口选择相机图片
2. 通过 wx.getImageInfo 接口获取图片信息(长宽,类型)
3. 计算压缩比例和最终图片的长宽
5. 通过 wx.canvasToTempFilePath 接口将画布内容导出为图片并获取图片路径
wxml 文件
在文件末尾插入 canvas 组件,通过设置left和配隐top值确保图片不会显示在可视范围内。
一定要设置 canvas-id,这是canvas绘图和导出图片必备的属性。
js 文件
设置与页面绑定的数据:canvas的大小,培念厅也是压缩后图片的大小
1. 将画布内容导出为图片时,指定destWidth和destHeight为压缩后图片的大小。这里遇到过玄学bug,不指定的话,有时候图片不会压缩到规定的大小。
题主是否想问小程序canvas渲染慢方法。画面复杂:如果小程序canvas中的画面比较复杂,包含大量的图形、文本和动画等,可能会导致渲染速度变慢。解决方法可以是优化canvas的绘制逻辑,减少不必要的绘制 *** 作,或者将画面拆分为多个图层进行绘制,以提高渲染效率。1、图片过大:如果小程序canvas中使用了过大的图片,也会影响渲染速度。解决方运并法可以是对图片进行压缩,或者使用小尺寸的图片进行绘制。
2、不合理的动画:如果小程序canvas中存在复杂的动画效果,比如粒子动画、路径动画等,也会影响渲染速度。解决方法可以是使用更简单的动画效果,或者使用硬件加速进行渲染岩旁。
3、设备性能不足:如果小程序运行的设备性能较低,也会导致canvas渲染速度变慢。解决方法可以是优化canvas的绘制逻辑,减少不必要的绘制 *** 作,或者在运行时提示用户升级设备或换用更高性能的设备。
4、他因素:还有一些其他因素也可能会导致小程序canvas渲染慢,比如网络延迟、内存占用过高等。解决方法可以是粗悄橡优化网络请求、减少内存占用等。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)