微信小程序上传图片压缩方案

小程序上传图片需要进行压缩，可以使用wx.getFileSystemManager()方法将图片转换成base64格式，再使用canvas将图片压缩成指定大小。


//选择图片wx.chooseImage({count:  1,  //最多选择1张图片success:  function(res)  {var  tempFilePaths  =  res.tempFilePaths;  //获取图片本地路径//将图片转换成base64格式wx.getFileSystemManager().readFile({filePath:  tempFilePaths[0],encoding:  'base64',success:  function(data)  {//创建canvas进行压缩var  imgData  =  'data:image/png;base64,'  +  data.data;var  image  =  new  Image();image.src  =  imgData;image.onload  =  function()  {//压缩图片，并绘制到canvas上var  canvas  =  document.createElement('canvas');var  context  =  canvas.getContext('2d');var  originWidth  =  this.width;var  originHeight  =  this.height;var  maxWidth  =  1280,  //设置最大的宽度maxHeight  =  1280,  //设置最大的高度targetWidth  =  originWidth,targetHeight  =  originHeight;if  (originWidth  >  maxWidth  ||  originHeight  >  maxHeight)  {if  (originWidth  /  originHeight  >  maxWidth  /  maxHeight)  {targetWidth  =  maxWidth;targetHeight  =  Math.round(maxWidth  *  (originHeight  /  originWidth));}  else  {targetHeight  =  maxHeight;targetWidth  =  Math.round(maxHeight  *  (originWidth  /  originHeight));}}canvas.width  =  targetWidth;canvas.height  =  targetHeight;context.clearRect(0,  0,  targetWidth,  targetHeight);context.drawImage(image,  0,  0,  targetWidth,  targetHeight);//将canvas转换成图片base64格式var  imageData  =  canvas.toDataURL('image/png');var  base64Data  =  imageData.replace(/^data:image\/\w+;base64,/,  "");//调用接口上传图片wx.uploadFile({url:  '接口地址',filePath:  tempFilePaths[0],name:  'file',formData:  {'content':  base64Data},success:  function(res)  {//上传成功},fail:  function()  {//上传失败}})}}})}})

首先使用wx.chooseImage()方法选择了一张图片，然后使用wx.getFileSystemManager()方法将图片转换成base64格式。接着使用canvas进行压缩，并将canvas转换成图片base64格式，最后调用接口上传图片。在压缩过程中，设置了最大宽度和高度为1280，可以根据实际需求进行调整

微信小程序上传图片压缩方案相关推荐

微信小程序上传图片到服务器总是失败_微信小程序上传图片过大导致请求失败的解决方法...
很多时候我们都会碰到小程序上传图片时因为图片过大而导致请求失败,同时出现各种各样的问题,那么今天来给大家写一个微信小程序上传图片过大导致请求失败的完美解决办法. 以云开发小程序图片检测为例,如果图片过 ...
微信小程序上传图片至服务器Springboot接收格式的问题
微信小程序上传图片至服务器Springboot 需求:通过微信小程序上传图片到服务器,保存至服务器. 实现 Wxml <button bindtap="choose"> ...
微信小程序--上传图片加水印
微信小程序–上传图片加水印 wxml <canvas class='canvas' canvas-id="firstCanvas"></canvas> cs ...
微信小程序上传图片写法
微信小程序上传图片小程序上传图片需要用到小程序API中的wx.uploadFile()方法.以下是一个基本的示例代码: wx.chooseImage({count: 1,sizeType: ['or ...
微信小程序的推广方案有哪些
微信小程序的推广方案有哪些微信小程序对于我们来说并不陌生,很多的企业或者商家品牌的微信活动都会用到它,而且小程序也是微信营销的渠道之一.想要自己的小程序被更多用户关注,就要把自己的小程序推广,为此微 ...
微信小程序上传图片预览删除
微信小程序上传图片预览删除 ①.wxml<view class='footerEditOne'><view wx:for="{{src}}" wx:key=' ...
微信小程序性能优化方案
文章目录微信小程序性能优化方案提高加载性能小程序代码包准备(下载代码包) 开发者代码注入页面渲染优化提升渲染性能 setData工作原理优化方法微信小程序性能优化方案微信小程序如果想要 ...
微信小程序-------全局通信方案mobx
微信小程序-------全局通信方案mobx 微信小程序本身并没有提供类似于vue中的vuex或者React里的Redux这样的全局通信方案,只在组件中有behaviors这样的属性共享机制,用起来也 ...
微信小程序 api 缓存方案
微信小程序 api 缓存方案背景前言缓存方案(更新策略) 缓存那些接口 Storage 缓存工具类 ApiCache 类实现配置封装 request 请求总结背景为了应对用户流量大,减 ...

微信小程序上传图片压缩方案

微信小程序上传图片压缩方案相关推荐

最新文章

热门文章