国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

使用微信的 JS SDK 選取手機照片并進行上傳

CntChen / 1925人閱讀

摘要:實現過程選取照片這里使用微信的方法,得到照片在本地存儲的,十分簡單獲取照片數據主要是獲取照片格式的數據用于上傳,但是過程比較曲折,先后嘗試了兩種方法。

前言

項目中遇到需要選取照片上傳的需求,因為網頁運行在微信的瀏覽器里面,所以想到了用微信的 js-sdk 提供的選取照片功能,來優化用戶體驗。

實現過程 1、選取照片

這里使用微信 js-sdk 的 chooseImage 方法,得到照片在本地存儲的 id,十分簡單:

wx.chooseImage({
  count: 1, 
  sizeType: ["original", "compressed"],
  sourceType: ["album", "camera"],
  success: function (res) {
    var localId = res.localIds[0];
  }
)};
2、獲取照片數據

主要是獲取照片 base64 格式的數據用于上傳,但是過程比較曲折,先后嘗試了兩種方法。

嘗試一:設置 img 元素的 src 屬性

根據微信的官方開發文檔,得到的 localId 可以直接作為 img 元素的 src 屬性進行顯示,因此首先想到的是在 imgload 事件中構造 canvas,然后獲取數據:

$("img.avatar-temp").on("load", function (e) {
  var image = e.target;
  var canvas = document.createElement("canvas");
  canvas.width = image.width;
  canvas.height = image.height;
  canvas.getContext("2d").drawImage(image);
  
  var dataUrl = canvas.toDataURL();
});

wx.chooseImage({
  count: 1, 
  sizeType: ["original", "compressed"],
  sourceType: ["album", "camera"],
  success: function (res) {
    var localId = res.localIds[0];
    $("img.avatar-temp").attr("src", localId);
  }
)};

然而不幸的是,將 localId 設置進 src 之后,圖片能顯示,也沒有報錯,但是就是死活不觸發 load 事件,也查不到是什么原因,因而此方案行不通。

嘗試二:調用 js-sdk 的 getLocalImgData 方法

再次查閱文檔,得知還有 getLocalImgData 用于獲取本地圖片數據,果斷嘗試:

wx.chooseImage({
  count: 1, 
  sizeType: ["original", "compressed"],
  sourceType: ["album", "camera"],
  success: function (res) {
    var localId = res.localIds[0];
    wx.getLocalImgData({
      localId: localId,
      success: function (res) {
        var localData = res.localData;
      }
    )};
  }
)};

如上,得到的 localData 即為選取照片的 base64 格式的數據。這里有兩個地方需要注意的:
1、iOS 系統里面得到的數據,類型為 image/jgp,不知道是 bug 還是什么原因,因此需要替換一下:

localData = localData.replace("jgp", "jpeg");

2、安卓系統得到的數據,是沒有 data:image/jpeg;base64, 前綴的。

3、上傳照片

上傳照片采用 FormData API 構造表單數據的辦法,在我的另一篇文章有討論過,此處不再贅述。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/86918.html

相關文章

  • html5 上傳本地圖片處理各種問題

    摘要:原文還是在簡書上上傳本地圖片處理各種問題這是最近給公司寫一個項目,項目要求大概是這樣子上傳手機本地圖片,然后裁剪后加的需求能夠旋轉圖片,用于裁剪后面加的需求填寫各種文字,選擇顏色,之后把文字和個相關的圖片,水印到裁剪的圖片上,上傳服務器生成 原文還是在簡書上: html5 上傳本地圖片處理各種問題 這是最近給公司寫一個項目,項目要求大概是這樣子:1.上傳手機本地圖片,然后裁剪(后加的需...

    iOS122 評論0 收藏0
  • html5 上傳本地圖片處理各種問題

    摘要:原文還是在簡書上上傳本地圖片處理各種問題這是最近給公司寫一個項目,項目要求大概是這樣子上傳手機本地圖片,然后裁剪后加的需求能夠旋轉圖片,用于裁剪后面加的需求填寫各種文字,選擇顏色,之后把文字和個相關的圖片,水印到裁剪的圖片上,上傳服務器生成 原文還是在簡書上: html5 上傳本地圖片處理各種問題 這是最近給公司寫一個項目,項目要求大概是這樣子:1.上傳手機本地圖片,然后裁剪(后加的需...

    Taste 評論0 收藏0
  • [打怪升級]小程序評論回復和發帖功能實戰(二)

    摘要:發帖的功能只要理清思路,其實并不復雜,利用機器做內容審查是關鍵,直接關系到小程序的整體安全。內容檢查重點由于內容安全對于小程序運營至關重要,稍有不慎就容易導致小程序被封,所以在這塊的校驗除了常規人工檢查外,我們還可以用到微信的內容安全。 showImg(https://segmentfault.com/img/remote/1460000019955210?w=658&h=440); ...

    ThinkSNS 評論0 收藏0

發表評論

0條評論

CntChen

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<