微信小程序图片压缩

微信小程序压缩有三种方法，一种是使用官方提供的接口 wxcompressImage(Object object) ；一种是通过压缩的大小，利用canvas重绘来得到压缩；最后一种安装第三方压缩包。

由于第一种方法网上很多人说压缩不明显或者失效，所以选择使用canvas重绘来实现压缩。同时，该种方法可以控制的最大尺寸，保持上传大小尺寸相差不多。在我们的学生节晚会小程序中，屏幕显示会比较美观一致。

1 通过 wxchooseImage 接口选择相机

2 通过 wxgetImageInfo 接口获取信息（长宽，类型）

3 计算压缩比例和最终的长宽

5 通过 wxcanvasToTempFilePath 接口将画布内容导出为并获取路径

wxml 文件

在文件末尾插入 canvas 组件，通过设置left和top值确保不会显示在可视范围内。

一定要设置 canvas-id，这是canvas绘图和导出必备的属性。

js 文件

设置与页面绑定的数据：canvas的大小，也是压缩后的大小

1 将画布内容导出为时，指定destWidth和destHeight为压缩后的大小。这里遇到过玄学bug，不指定的话，有时候不会压缩到规定的大小。

微信小程序中有一个功能是canvas画布功能，那么这个功能该怎么用呢下面的教程就是关于微信小程序的canvas画布功能怎么用的，一起来看看吧。

微信小程序中有一个功能是canvas画布功能，那么这个功能该怎么用呢下面的教程就是关于微信小程序的canvas画布功能怎么用的，一起来看看吧。

canvas画布，你可以理解为有一张白布，你可以在画布上画出不同形状、颜色、粗细的图形。

>

微信小程序里的canvas 非 h5 canvas有很多不一样的地方，以下把微信小程序的canvas叫做wxcanvas

下面全是我一点点测试出的干货，耐心看：

1wxcanvas,不像h5canvas那样有width和height属性和width和height的style样式。他只有style样式，可以理解为他就是个框吧；

2wxcanvas不要当成真的H5canvas，就当它是个div就行，画出范围的东西也是存在的，改变width,height就显示出来了，或者说这里有重绘，但具体如何实现的不知道；

3改变wxcanvas的style的width,height，并不改为原画布上的东西的大小；

4css transform变换中的变大缩小也无法改变原画布上的东西大小

5官方说法：context只是一个记录方法调用的容器，用于生成记录绘制行为的actions数组。context跟<canvas/>不存在对应关系，一个context生成画布的绘制动作数组可以应用于多个<canvas/>。

实际上，contextgetActions()后，context中的信息会被清空，如果想重复利用，需要var temp=contextgetActions()将 *** 作数组保存下来，才可重复用于wxdrawcanvas；

6注意

wxdrawCanvas({canvasId: 'target',actions: contextgetActions()});

默认会清空画布，想不清空需要

wxdrawCanvas({ canvasId: 'target', actions: contextgetActions(), reserve:true});

7《重点》

<canvas disable-scroll="true" catchtouchmove="ccvsMove" bindtouchmove="cvsMove" canvas-id="target" id="target" style='width:{{width}}px;height:{{height}}px'></canvas>

注意，disable-scroll="true"和bindtouchmove="cvsMove"同时存在时才能避免页面跟着动，catchtouchmove是不行的

上面的写法，ccvsMove和cvsMove会都触发，

ccvsMove返回的是普通touch事件对象，有pageX,clientX等，

cvsMove返回的是canvasTouch事件对象，没有pageX,clientX,只有x,y

8

wxdrawCanvas({ canvasId: 'target', actions: [], reserve:false});

可以清空画布和画布的状态

9画布的scale tranlate rotate等状态，在reserve:true时会接着上次的状态

10 contextgetActions()返回的数组很有用，打印出来你会发现里面的内容你都能看懂，可以直接修改数组改变画的动作

11wxdrawCanvas时contextdrawImage在手机上可以画出来，在电脑开发工具上画不出来

12wxcanvasToTempFilePath

官方文档中只有一行，原来

wxcanvasToTempFilePath参数为一个对象包括canvasID,success,fail,complete，和wxsaveFile差不多；wxcanvasToTempFilePath({ canvasId: 'target', success: function success(res) { wxsaveFile({ tempFilePath: restempFilePath, success: function success(res) { consolelog('saved::' + ressavedFilePath); }, complete: function fail(e) { consolelog(eerrMsg); } }); }, complete: function complete(e) { consolelog(eerrMsg); }});

在小程序中，Canvas 组件是一个用于绘制图形的画布组件，它可以让开发者在画布上绘制图形、添加事件等 *** 作。如果画布的高度大于屏幕高度，并且没有进行特殊设置或调整，那么在小程序中是无法遮挡系统底部导航的。

需要注意的是，小程序的底部导航条是系统自带的组件，在小程序中无法直接修改或遮挡。如果你需要使用自定义的导航条，可以考虑使用小程序的自定义组件或自己实现相应的功能。

如果确实需要在小程序中遮挡系统底部导航，可以考虑以下几种方法：

1 调整画布高度

可以通过代码动态调整 Canvas 画布的高度，使得画布高度不超过屏幕高度，从而避免遮挡底部导航。例如，可以获取屏幕高度并设置画布高度为屏幕高度减去一定的偏移量。

2 建立全屏页面

可以把绘制画布的页面作为一个全屏页面，并在该页面中隐藏系统底部导航条，从而实现遮挡底部导航的效果。需要注意的是，这种方法可能会影响用户体验，并且需要保证用户能够方便地返回到其他页面。

3 使用小程序组件库

一些小程序组件库可能提供了类似于 Canvas 的绘图组件，并且可以支持遮挡系统底部导航的功能，可以尝试使用这些组件库中提供的组件实现相应的效果。

总之，需要根据具体的业务需求和实际情况选择合适的方法来实现相应的效果。

微信小程序生成之后，生成不清楚。需要设置canvas里生成的参数。

destWidth 生成的宽度，数值越大越清楚。

destHeight 生成的高度，数值越大越清楚。

数值不是越大越好，数值越大，生成的越大，加载的也就越慢

wxcanvasToTempFilePath({

x: 0,

y: 0,

width: w,

height: h,

destWidth: w,

destHeight: h,

canvasId: 'shareCanvas',

success: function (res) {

wxsaveImageToPhotosAlbum({

filePath: restempFilePath,

success(res) {

wxshowToast({

title: '已经生成',

icon: 'loading',

duration: 1000

});

}

})

以上就是关于微信小程序图片压缩全部的内容，包括:微信小程序图片压缩、微信小程序的canvas画布功能怎么用、微信小程序canvas2d绘制圆环进度条组件等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！