微信js-sdk上傳與下載圖片接口用法示例
本文實例講述了微信js-sdk上傳與下載圖片接口用法。分享給大家供大家參考,具體如下:
前提已經(jīng)在wx.config()中,將圖片接口驗證通過。
微信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)用量】,請對你的項目進行簡單描述,附上產(chǎn)品體驗鏈接,并對用戶量和使用量進行說明。
實例1、選擇單個圖片并上傳到微信服務(wù)器
//選擇圖片單個圖片 wx.chooseImage({ count: 1, // 默認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, // 默認為1,顯示進度提示 success: function (res) { var serverId = res.serverId; // 返回圖片的服務(wù)器端ID $('#serverId').text(serverId); } }); } });
實例2、下載,剛上傳的圖片,指定serverID
var serverId=$('#serverId').text(); wx.downloadImage({ serverId: serverId, // 需要下載的圖片的服務(wù)器端ID,由uploadImage接口獲得 isShowProgressTips: 1, // 默認為1,顯示進度提示 success: function (res) { var localId = res.localId; // 返回圖片下載后的本地ID $('#imgTarget').attr('src',localId); } });
從微信客戶端獲取用戶文件,方法2,
可以使用html的File文件域,讀取客戶端文件,然后上傳到服務(wù)器
<div class="container"> <!--圖片類型驗證方法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ù)器實例 var fileBox = document.getElementById('file'); function showFiles() { //獲取選擇文件的數(shù)組 var fileList = fileBox.files; for (var i = 0; i < fileList.length; i++) { var file = fileList[i]; //圖片類型驗證第二種方式 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)換成二進制數(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, // 默認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()的瀏覽器安全問題,如果不是同一個域的圖片會拋出異常 //所以此處 var data=canvas.toDataURL('image/jpeg'); data=data.split(',')[1]; alert(data.length); }
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript中json操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
JavaScript操作文件_動力節(jié)點Java學(xué)院整理
在HTML表單中,可以上傳文件的唯一控件就是<input type="file">。下面通過本文給大家分享JavaScript操作文件的方法,感興趣的朋友一起看看吧2017-06-06selenium 反爬蟲之跳過淘寶滑塊驗證功能的實現(xiàn)代碼
這篇文章主要介紹了selenium 反爬蟲之跳過淘寶滑塊驗證功能,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-08-08JavaScript裝箱及拆箱boxing及unBoxing用法解析
這篇文章主要介紹了JavaScript裝箱及拆箱boxing及unBoxing用法解析,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-06-06js實現(xiàn)數(shù)據(jù)導(dǎo)出為EXCEL(支持大量數(shù)據(jù)導(dǎo)出)
這篇文章主要為大家詳細介紹了js實現(xiàn)數(shù)據(jù)導(dǎo)出為EXCEL,支持大量數(shù)據(jù)導(dǎo)出,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-03-03JavaScript算法學(xué)習(xí)之冒泡排序和選擇排序
這篇文章主要給大家介紹了關(guān)于JavaScript算法學(xué)習(xí)之冒泡排序和選擇排序的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11