微信小程序图片压缩

JavaScript010

微信小程序图片压缩,第1张

微信小程序图片压缩有三种方法,一种是使用官方提供的接口 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,不指定的话,有时候图片不会压缩到规定的大小。

以微信小程序为例子,首先打开微信小程序迅捷压缩,进入微信小程序后可以看到文件压缩功能,图片压缩,word压缩,ppt压缩和excel压缩,我们可以根据自己的需要选择压缩操作。如果图片压缩的话,选择要压缩的图片,然后点击立即压缩,点击保存。

微信小程序代码是一种计算机语言,但是很多代码比较长,浪费时间和空间,所以如何让我们的小程序代码瘦身减肥,是本文主要介绍的内容,教大家几招小妙计,希望可以有用处。

微信小程序在发布的时候,对代码的量是有限制的,不得超过1M,所以如果我们的小程序代码过长,那就不能发布小程序,所以再发代码时要避免一下几种情况:

第一、减少在微信小程序的UI上使用比较大的图片,可以选择用颜色式样来代替打的图片装饰小程序,如果实在想要使用大的图片可以将图片放到微信小程序的本地代码中,应该使用从远程URL地址加载图片的方式使用大的图片。还有大的资源文件也不要使用,或者尽量避免使用。

第二、不要让我们的代码太长太复杂,这样容易给人啰嗦的感觉,而且也会增加代码的空间,要让我们的代码符合逻辑,不要杂乱无章,太过复杂,不能简简单单的一个代码写的很复杂。点点客建议大家尽量不要使用组合嵌套的方式来写代码,能用一个view的方式就不要用多层次的view,减少代码的尺寸还有代码的性能对减少代码空间都是有帮助的。

第三、使用专业的压缩工具来优化我们的代码,在有些项目开发中,我们经常会使用一些前端工程化的工具来加工我们的代码,使用这些工具可以简化我们代码,使代码长度减少一大截,这种方法对微信小程序非常管用,在写微信小程序代码时我们不妨使用一下,这样可以尽量避免太长,空间太大的代码占用地方。

第四、在微信小程序文件上,我们可以用jsonminify来减少json文件的使用空间,减少json文件中多余没有用处的空格,还有uglify可以简化JS文件的空间,对其进行语法上的优化还有文本压缩。

还有很多微信小程序代码优化的方法,可能还有一些没有被开发出来,大家可以在实践中不断优化,使微信小程序的代码达到最优。