資訊專欄INFORMATION COLUMN
摘要：實現(xiàn)過程選取照片這里使用微信的方法，得到照片在本地存儲的，十分簡單獲取照片數(shù)據(jù)主要是獲取照片格式的數(shù)據(jù)用于上傳，但是過程比較曲折，先后嘗試了兩種方法。
前言
項目中遇到需要選取照片上傳的需求，因為網(wǎng)頁運行在微信的瀏覽器里面，所以想到了用微信的 js-sdk 提供的選取照片功能，來優(yōu)化用戶體驗。
實現(xiàn)過程 1、選取照片這里使用微信 js-sdk 的 chooseImage 方法，得到照片在本地存儲的 id，十分簡單：
wx.chooseImage({
count: 1,
sizeType: ["original", "compressed"],
sourceType: ["album", "camera"],
success: function (res) {
var localId = res.localIds[0];
}
)};
2、獲取照片數(shù)據(jù)
主要是獲取照片 base64 格式的數(shù)據(jù)用于上傳，但是過程比較曲折，先后嘗試了兩種方法。
嘗試一：設置 img 元素的 src 屬性根據(jù)微信的官方開發(fā)文檔，得到的 localId 可以直接作為 img 元素的 src 屬性進行顯示，因此首先想到的是在 img 的 load 事件中構(gòu)造 canvas，然后獲取數(shù)據(jù)：
$("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 之后，圖片能顯示，也沒有報錯，但是就是死活不觸發(fā) load 事件，也查不到是什么原因，因而此方案行不通。
嘗試二：調(diào)用 js-sdk 的 getLocalImgData 方法再次查閱文檔，得知還有 getLocalImgData 用于獲取本地圖片數(shù)據(jù)，果斷嘗試：
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 格式的數(shù)據(jù)。這里有兩個地方需要注意的：
1、iOS 系統(tǒng)里面得到的數(shù)據(jù)，類型為 image/jgp，不知道是 bug 還是什么原因，因此需要替換一下：
localData = localData.replace("jgp", "jpeg");
2、安卓系統(tǒng)得到的數(shù)據(jù)，是沒有 data:image/jpeg;base64, 前綴的。
3、上傳照片上傳照片采用 FormData API 構(gòu)造表單數(shù)據(jù)的辦法，在我的另一篇文章有討論過，此處不再贅述。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/86918.html
摘要：原文還是在簡書上上傳本地圖片處理各種問題這是最近給公司寫一個項目，項目要求大概是這樣子上傳手機本地圖片，然后裁剪后加的需求能夠旋轉(zhuǎn)圖片，用于裁剪后面加的需求填寫各種文字，選擇顏色，之后把文字和個相關的圖片，水印到裁剪的圖片上，上傳服務器生成 原文還是在簡書上： html5 上傳本地圖片處理各種問題 這是最近給公司寫一個項目，項目要求大概是這樣子：1.上傳手機本地圖片，然后裁剪（后加的需...
摘要：原文還是在簡書上上傳本地圖片處理各種問題這是最近給公司寫一個項目，項目要求大概是這樣子上傳手機本地圖片，然后裁剪后加的需求能夠旋轉(zhuǎn)圖片，用于裁剪后面加的需求填寫各種文字，選擇顏色，之后把文字和個相關的圖片，水印到裁剪的圖片上，上傳服務器生成 原文還是在簡書上： html5 上傳本地圖片處理各種問題 這是最近給公司寫一個項目，項目要求大概是這樣子：1.上傳手機本地圖片，然后裁剪（后加的需...
摘要：發(fā)帖的功能只要理清思路，其實并不復雜，利用機器做內(nèi)容審查是關鍵，直接關系到小程序的整體安全。內(nèi)容檢查重點由于內(nèi)容安全對于小程序運營至關重要，稍有不慎就容易導致小程序被封，所以在這塊的校驗除了常規(guī)人工檢查外，我們還可以用到微信的內(nèi)容安全。 showImg(https://segmentfault.com/img/remote/1460000019955210?w=658&h=440); ...
閱讀 871·2021-11-24 09:38
閱讀 1098·2021-10-08 10:05
閱讀 2593·2021-09-10 11:21
閱讀 2809·2019-08-30 15:53
閱讀 1838·2019-08-30 15:52
閱讀 1979·2019-08-29 12:17
閱讀 3428·2019-08-29 11:21
閱讀 1619·2019-08-26 12:17
