微信小程序中上传图片并进行压缩的实现代码-乐山大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

微信小程序中上传图片并进行压缩的实现代码

小程序上传图片要先了解他其中的各个属性值，在https://developers.weixin.qq.com/miniprogram/dev/api/media-picture.html内有详细的介绍

成都创新互联2013年开创至今，先为牙克石等服务建站，牙克石等地企业，进行企业商务咨询服务。为牙克石企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

今天在这里主要来讲下如何去上传图片并进行压缩，了解下以下属性值

微信小程序中上传图片并进行压缩的实现代码

先来看下页面展示（点击上传图片，从相册中选择，上传完图片后又点了一次上传）

微信小程序中上传图片并进行压缩的实现代码

来来来，上代码

wxml代码

当然最主要的还是js代码咯

var app = getApp()
Page({
 data: {
  logo: null,
　　 pics:[]
 },
 chooseImageTap: function () {
  let _this = this;
  wx.showActionSheet({
   itemList: ['从相册中选择', '拍照'],//下面显示的数组是拍照还是别的
   itemColor: "#f7982a",//显示文字的颜色
   success: function (res) {
    if (!res.cancel) {//选中判断
     if (res.tapIndex == 0) {
      _this.chooseWxImage('album')
     } else if (res.tapIndex == 1) {
      _this.chooseWxImage('camera')
     }
    }
   }
  })

 },
 // 绘制图片到canvas上
 chooseWxImage: function (type) {
  const ctx = wx.createCanvasContext('myCanvas')//画布
  var that = this;
  wx.chooseImage({//上传图片事件
   count: 9,//数量
   sizeType: ['original', 'compressed'],//original 原图，compressed 压缩图，默认二者都有
   sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有
   success: function (res) {
    console.log(res)
    ctx.drawImage(res.tempFilePaths[0], 0, 0, 100, 100)//成功选定第一张。后面的四个值分别是left，top，width，height，来控制画布上的图片的位置和大小
    ctx.draw()
   }
  })
  },
saveImage: function () {//这里触发图片上传的方法
  var pics = this.data.pics;
  app.uploadimg({
   url: 'https://........',//这里是你图片上传的接口
   path: pics//这里是选取的图片的地址数组
  });
 },

总结

以上所述是小编给大家介绍的微信小程序中上传图片并进行压缩的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持！

当前题目：微信小程序中上传图片并进行压缩的实现代码
URL网址：http://lswzjz.com/article/jssdsj.html

新闻中心

其他资讯