微信小程序上传图片大小限制及压缩处理

微信小程序上传图片怎么限制大小
随着移动互联网的普及，微信小程序已经成为一种广泛使用的应用开发工具。在微信小程序中，上传图片是一个常见的功能，但有时候用户上传的图片大小可能会超出小程序所能接受的限制。那么，微信小程序上传图片怎么限制大小呢？
一、微信小程序对图片大小的限制
微信小程序对图片的大小有明确的限制。具体来说，小程序支持上传的图片格式包括JPG、PNG、GIF等，且图片大小不能超过2MB。如果用户上传的图片大小超过了2MB，那么小程序将无法正常处理该图片。
二、如何限制图片大小

1. 使用HTML和CSS样式
   在微信小程序中，我们可以通过HTML和CSS样式来限制图片的大小。例如：

   <image src="你的图片路径" class="img-class"></image>

   然后在CSS样式中：

   .img-class {
   width: 100px;  /* 设置图片宽度 */
   height: 100px; /* 设置图片高度 */
   }

2. 使用JavaScript进行图片大小的调整
   除了使用HTML和CSS样式来限制图片大小外，我们还可以使用JavaScript来动态调整图片的大小。具体来说，我们可以通过JavaScript的wx.canvasToTempFilePath函数来将Canvas上的内容导出为图片，并指定图片的大小。例如：

   let ctx = wx.createCanvasContext('myCanvas')
   ctx.drawImage('你的图片路径', 0, 0, 100, 100)  // 在Canvas上绘制图片，并指定图片的大小为100x100像素
   ctx.draw()
   wx.canvasToTempFilePath({
   canvasId: 'myCanvas',
   success: function (res) {
   console.log(res.tempFilePath)  // 打印出调整大小后的图片路径
   }
   })

   需要注意的是，使用JavaScript动态调整图片大小的方法可能会因为涉及到动态计算和渲染过程而影响性能。因此，如果小程序中有大量的图片需要调整大小，建议使用第一种方法。
   三、对上传图片进行压缩处理
   除了限制图片的大小外，我们还可以通过压缩图片的方式来减小图片的大小。具体来说，我们可以在用户上传图片时，使用微信小程序的wx.compressImage函数对图片进行压缩处理。例如：
   ```javascript
   wx.chooseImage({
   count: 1, // 默认9
   sizeType: [‘original’, ‘compressed’], // 可以指定是原图还是压缩图，默认二者都有
   sourceType: [‘album’, ‘camera’], // 可以指定来源是相册还是相机，默认二者都有
   success (res) {
   // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
   const tempFilePaths = res.tempFilePaths
   const images = [] // 将图片压缩为100*100大小并加入images数组中
   tempFilePaths.forEach((element, index) => {
   wx.getImageInfo({src: element, success: (res) => {
   const data = res.path
   wx.compressImage({
   src: data, // 图片的路径 这里使用压缩后的路径作为img标签的src属性显示图片
   quality: 80, // 压缩质量 默认80 值可以是80~100之间 越小则质量越低 对清晰度和文件大小都有影响 默认80 值可以是80~100之间 越小则质量越低 对清晰度和文件大小都有影响 默认80 值可以是80~100之间 越小则质量越低 对清晰度和文件大小都有影响 ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ， ，