微信js-sdk上傳與下載圖片接口用法示例

更新時(shí)間：2016年10月12日 14:30:35 作者：天馬3798

這篇文章主要介紹了微信js-sdk上傳與下載圖片接口用法,結(jié)合實(shí)例形式分析了基于上傳圖片接口(uploadImage)和下載圖片接口(downloadImage)針對圖片操作的相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了微信js-sdk上傳與下載圖片接口用法。分享給大家供大家參考，具體如下：

前提已經(jīng)在wx.config()中,將圖片接口驗(yàn)證通過。

微信js-sdk 中上傳圖片接口(uploadImage)和下載圖片接口(downloadImage)都是針對微信服務(wù)器本身的。以官方文檔為準(zhǔn)

注：

1.使用chooseImage接口獲取到微信客戶端圖片地址的與都是 weixin://xxxx

2.上傳圖片有效期3天，可用微信多媒體接口下載圖片到自己的服務(wù)器，此處獲得的 serverId 即 media_id，參考文檔 http://mp.weixin.qq.com/wiki/12/58bfcfabbd501c7cd77c19bd9cfa8354.html

3.目前多媒體文件下載接口的頻率限制為10000次/天，如需要調(diào)高頻率，請郵件weixin-open@qq.com,郵件主題為【申請多媒體接口調(diào)用量】，請對你的項(xiàng)目進(jìn)行簡單描述，附上產(chǎn)品體驗(yàn)鏈接，并對用戶量和使用量進(jìn)行說明。

實(shí)例1、選擇單個(gè)圖片并上傳到微信服務(wù)器

//選擇圖片單個(gè)圖片
wx.chooseImage({
  count: 1, // 默認(rèn)9
  sizeType: ['original'],
  sourceType: ['album', 'camera'],
  success: function (res) {
    var localId= res.localIds[0];
    $('#localId').text(localId);
    //選擇圖片成功，上傳到微信服務(wù)器
    wx.uploadImage({
      localId: localId, // 需要上傳的圖片的本地ID，由chooseImage接口獲得
      isShowProgressTips: 1, // 默認(rèn)為1，顯示進(jìn)度提示
      success: function (res) {
        var serverId = res.serverId; // 返回圖片的服務(wù)器端ID
        $('#serverId').text(serverId);
      }
    });
  }
});

實(shí)例2、下載，剛上傳的圖片，指定serverID

var serverId=$('#serverId').text();
wx.downloadImage({
  serverId: serverId, // 需要下載的圖片的服務(wù)器端ID，由uploadImage接口獲得
  isShowProgressTips: 1, // 默認(rèn)為1，顯示進(jìn)度提示
  success: function (res) {
    var localId = res.localId; // 返回圖片下載后的本地ID
    $('#imgTarget').attr('src',localId);
  }
});

從微信客戶端獲取用戶文件，方法2，
可以使用html的File文件域，讀取客戶端文件，然后上傳到服務(wù)器

<div class="container">
  <!--圖片類型驗(yàn)證方法1-->
  <input type="file" id="file" multiple accept="image/*" />
  <input type="button" id="btn1" value="選擇上傳文件" onclick="showFiles();" />
  <h4>選擇文件如下:</h4>
  <img src="" id="img1" />
</div>

Js代碼：

//讀取圖片，并上傳到服務(wù)器實(shí)例
var fileBox = document.getElementById('file');
function showFiles() {
  //獲取選擇文件的數(shù)組
  var fileList = fileBox.files;
  for (var i = 0; i < fileList.length; i++) {
    var file = fileList[i];
    //圖片類型驗(yàn)證第二種方式
    if (/image\/\w+/.test(file.type))
      readFile(file);
    else
      console.log(file.name + ':不是圖片');
  }
}
//讀取圖片內(nèi)容 為DataURL
function readFile(file) {
  var reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function (e) {
    var result = reader.result;
    $('#img1').attr('src', result)
    upload(result);
  }
  //上傳到自己的服務(wù)器
  function upload(dataUrl){
    var data=dataUrl.split(',')[1];
    //數(shù)據(jù)結(jié)果是轉(zhuǎn)換,轉(zhuǎn)換成二進(jìn)制數(shù)據(jù)
    data=window.atob(data);
    var uint=new Uint8Array(data.length)
    for (var i = 0; i < data.length; i++) {
      uint[i]=data.charCodeAt(i);
    }
    var blob=new Blob([uint],{type:'image/jpeg'});
    //上傳到服務(wù)器
    var fd=new FormData();
    fd.append('file',blob);
    fd.append('isclip', '-1');
    fd.append('maxsize', 1024*1024*10);
    fd.append('minsize', 0);
    fd.append('subfolder', '1');
    fd.append('automove',true);
    fd.append('extention', '.jpg');
    alert('開始上傳');
    var xhr = new XMLHttpRequest();
    xhr.open('post', '/common/upload', true);
    //監(jiān)聽事件
    xhr.onreadystatechange = function (e) {
      if (xhr.readyState == 4 && xhr.status == 200) {
        var data = eval('(' + xhr.responseText + ')');
        if (data.success == true) {
          alert('上傳成功:');
          alert(data.msg);
        } else {
          alert(data.msg);
        }
      } else {
        //alert(xhr.readyState);
      }
    }
    xhr.send(fd);
  }
}

讀取客戶端圖片，方法3，目前無效，代碼僅供參考

wx.chooseImage({
  count: 1, // 默認(rèn)9
  sizeType: ['original'],
  sourceType: ['album', 'camera'],
  success: function (res) {
    var localId= res.localIds[0];
    //獲取圖片對象
    try {
      var img=new Image();
      //此設(shè)置在微信瀏覽器中無效,也不會拋出異常，后面的代碼不會執(zhí)行
      img.setAttribute('crossOrigin', 'anonymous');
      img.onload=function(){
        var canvas=document.getElementById('canvasOne');
        var ctx=canvas.getContext('2d');
        canvas.width=img.width;
        canvas.height=img.height;
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.drawImage(img,0,0,img.width,img.height);
        try {
          upload(canvas);
        } catch (e) {
          alert(e.name);
          alert(e.message);
        }
      }
      img.src=localId;
    } catch (e) {
      alert(e.name);
      alert(e.message);
    }
  }
});
//上傳到自己的服務(wù)器
function upload(canvas){
  //由于toDataURL()的瀏覽器安全問題，如果不是同一個(gè)域的圖片會拋出異常
  //所以此處
  var data=canvas.toDataURL('image/jpeg');
  data=data.split(',')[1];
  alert(data.length);
}

希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: