欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序中上傳圖片并進(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ì)的介紹

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

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

來來來,上代碼

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')//畫布
  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,來控制畫布上的圖片的位置和大小
    ctx.draw()
   }
  })
  },
saveImage: function () {//這里觸發(fā)圖片上傳的方法
  var pics = this.data.pics;
  app.uploadimg({
   url: 'https://........',//這里是你圖片上傳的接口
   path: pics//這里是選取的圖片的地址數(shù)組
  });
 },

總結(jié)

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

相關(guān)文章

  • 簡(jiǎn)單談?wù)凧avaScript的同步與異步

    簡(jiǎn)單談?wù)凧avaScript的同步與異步

    這篇文章主要介紹了簡(jiǎn)單談?wù)凧avaScript的同步與異步的相關(guān)資料,需要的朋友可以參考下
    2015-12-12
  • javascript substr和substring用法比較

    javascript substr和substring用法比較

    在js中substring和substr都是用來截取字符串的,那么substring和substr之間的具體區(qū)別在哪里,有沒有區(qū)別呢,下面我來給各位詳細(xì)引用一些實(shí)例來介紹這些問題
    2009-06-06
  • js代碼實(shí)現(xiàn)多人聊天室

    js代碼實(shí)現(xiàn)多人聊天室

    這篇文章主要為大家詳細(xì)介紹了js代碼實(shí)現(xiàn)多人聊天室,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-11-11
  • 九種js彈出對(duì)話框的方法總結(jié)

    九種js彈出對(duì)話框的方法總結(jié)

    九種js彈出對(duì)話框的方法總結(jié),需要的朋友可以參考一下
    2013-03-03
  • 微信小程序調(diào)用天氣接口并且渲染在頁面過程詳解

    微信小程序調(diào)用天氣接口并且渲染在頁面過程詳解

    這篇文章主要介紹了微信小程序調(diào)用天氣接口并且渲染在頁面過程詳解,今天寫一個(gè)具體的例子,調(diào)用一個(gè)免費(fèi)的天氣接口的api,并且把所獲取的內(nèi)容展示在前端的界面,前端界面與 iView Weapp結(jié)合,需要的朋友可以參考下
    2019-06-06
  • JavaScript運(yùn)動(dòng)函數(shù)實(shí)例詳解

    JavaScript運(yùn)動(dòng)函數(shù)實(shí)例詳解

    這篇文章主要為大家詳細(xì)介紹了JavaScript的運(yùn)動(dòng)函數(shù),使用實(shí)例在論證,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-02-02
  • 十個(gè)JavaScript?lodash中的高頻使用方法整理

    十個(gè)JavaScript?lodash中的高頻使用方法整理

    本文梳理lodash中那些高頻使用的超究極無敵好用方法,熟練使用下面的十個(gè)方法能夠讓你的代碼原地起飛,為你的開發(fā)之旅極大的減輕心智負(fù)擔(dān),快跟隨小編一起學(xué)習(xí)一下吧
    2024-01-01
  • 微信小程序?qū)崿F(xiàn)單個(gè)卡片左滑顯示按鈕并防止上下滑動(dòng)干擾功能

    微信小程序?qū)崿F(xiàn)單個(gè)卡片左滑顯示按鈕并防止上下滑動(dòng)干擾功能

    這篇文章主要介紹了微信小程序?qū)崿F(xiàn)單個(gè)卡片左滑顯示按鈕并防止上下滑動(dòng)干擾功能,利用小程序事件處理的api,分別讀取觸摸開始,觸摸移動(dòng)時(shí),觸摸結(jié)束的X/Y坐標(biāo),根據(jù)差值來改變整個(gè)卡片的位置,具體實(shí)例代碼跟隨小編一起看看吧
    2019-12-12
  • date.parse在IE和FF中的區(qū)別

    date.parse在IE和FF中的區(qū)別

    這個(gè)方法是很常用的,比如在驗(yàn)證輸入日期是否存在時(shí),可以使用它,如果是一個(gè)不存在的日期,則其返回值將是NaN,另外如果要比較兩個(gè)日期的先后,或是計(jì)算兩個(gè)日期相差的天數(shù) ,都可以用到。
    2010-07-07
  • JS判斷輸入的字符串是否是數(shù)字的方法(正則表達(dá)式)

    JS判斷輸入的字符串是否是數(shù)字的方法(正則表達(dá)式)

    下面小編就為大家?guī)硪黄狫S判斷輸入的字符串是否是數(shù)字的方法(正則表達(dá)式)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-11-11

最新評(píng)論