微信小程序中上傳圖片并進(jìn)行壓縮的實(shí)現(xiàn)代碼

更新時(shí)間：2018年08月28日 17:01:51 作者：一世^浮萍

這篇文章主要介紹了微信小程序中上傳圖片并進(jìn)行壓縮的實(shí)現(xiàn)代碼,文中提到了上傳圖片并進(jìn)行壓縮的屬性值，需要的朋友可以參考下

小程序上傳圖片要先了解他其中的各個(gè)屬性值，在https://developers.weixin.qq.com/miniprogram/dev/api/media-picture.html內(nèi)有詳細(xì)的介紹

今天在這里主要來(lái)講下如何去上傳圖片并進(jìn)行壓縮，了解下以下屬性值

先來(lái)看下頁(yè)面展示（點(diǎn)擊上傳圖片，從相冊(cè)中選擇，上傳完圖片后又點(diǎn)了一次上傳）

來(lái)來(lái)來(lái)，上代碼

wxml代碼

<button bindtap='chooseImageTap'>上傳圖片</button>
<button bindtap='saveImage'>保存</button>
<canvas style="width: 300px; height: 200px;" canvas-id="myCanvas"></canvas>

當(dāng)然最主要的還是js代碼咯

var app = getApp()
Page({
 data: {
  logo: null,
　　 pics:[]
 },
 chooseImageTap: function () {
  let _this = this;
  wx.showActionSheet({
   itemList: ['從相冊(cè)中選擇', '拍照'],//下面顯示的數(shù)組是拍照還是別的
   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')//畫(huà)布
  var that = this;
  wx.chooseImage({//上傳圖片事件
   count: 9,//數(shù)量
   sizeType: ['original', 'compressed'],//original 原圖，compressed 壓縮圖，默認(rèn)二者都有
   sourceType: ['album', 'camera'], //album 從相冊(cè)選圖，camera 使用相機(jī)，默認(rèn)二者都有
   success: function (res) {
    console.log(res)
    ctx.drawImage(res.tempFilePaths[0], 0, 0, 100, 100)//成功選定第一張。后面的四個(gè)值分別是left，top，width，height，來(lái)控制畫(huà)布上的圖片的位置和大小
    ctx.draw()
   }
  })
  },
saveImage: function () {//這里觸發(fā)圖片上傳的方法
  var pics = this.data.pics;
  app.uploadimg({
   url: 'https://........',//這里是你圖片上傳的接口
   path: pics//這里是選取的圖片的地址數(shù)組
  });
 },

總結(jié)

以上所述是小編給大家介紹的微信小程序中上傳圖片并進(jìn)行壓縮的實(shí)現(xiàn)代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: