2017已經接近尾聲了，可是我卻懷疑人生了。。。
（給自己一個warning的顏色，以作警醒吧）
最近做了一個邀請函的項目，邀請函無非就是向受邀者展示此次活動的時間、地點、活動的流程安排，最后想來的人再報個名登記一下。
這倒沒什么，重點是它后續還有一個根據用戶填寫的信息，有個生成胸卡的功能。
1.上傳圖片與圖片裁剪
胸卡當然是要上傳照片的。上傳照片的插件倒比比皆是，可是能很好地兼容Android和Ios系統的並且具有裁剪功能的就很少了。
最后我決定直接調微信的上傳圖片圖片接口。過程如下:
1.引入js文件 http://res.wx.qq.com/open/js/jweixin-1.2.0.js
2. 你的ajax請求的data里需要有這一項 jsApiList:'["chooseImage","uploadImage"]'
3.通過config接口注入權限驗證配置 寫在ajax請求成功的回調里）
success:function(response){
var _response = response.data
var _appId =_response.appId
var _timestamp =_response.timestamp
var _nonceStr =_response.nonceStr
var _signature =_response.signature
wx.config({
debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
appId:_appId, // 必填，公眾號的唯一標識
timestamp:_timestamp, // 必填，生成簽名的時間戳
nonceStr: _nonceStr, // 必填，生成簽名的隨機串
signature:_signature, // 必填，簽名，見附錄1
jsApiList: [
'chooseImage',
'uploadImage'
] // 必填，需要使用的JS接口列表
});
}
##拍照或從手機相冊中選圖接口
wx.chooseImage({ count: 1, // 默認9 sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有 sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有 success: function (res) { var localIds = res.localIds; // 返回選定照片的本地ID列表，localId可以作為img標簽的src屬性顯示圖片 } });
注意:res.localIds是一個數組，數組長度等於你指定的count的值，也就是當count為1時，你想拿到src需要通過res.localIds[0]
##上傳圖片接口
wx.uploadImage({ localId: '', // 需要上傳的圖片的本地ID，由chooseImage接口獲得 isShowProgressTips: 1, // 默認為1，顯示進度提示 success: function (res) { var serverId = res.serverId; // 返回圖片的服務器端ID } });
上傳完成之后頁面相關區域綁定上localId就可以拿到相關圖片了；
然而微信上傳圖片時的裁剪功能是好多人不知道滴，有些尷尬了，最后修改了圖片上傳的區域，寬高比是1:1.333，而不是(9:16);
在這兒再推薦一款圖片裁剪的插件吧，輕量級的，並且很好用 PhotoClip.js（如果無法打開，請翻牆，或者自行下載體驗）
（http://htmlpreview.github.io/?https://github.com/baijunjie/PhotoClip.js/blob/master/demo/index.html)
2.本地圖片上傳到服務器
上傳圖片，裁剪圖片並不是最讓人惱火的。
把html轉成canvas，再把生成的本地圖片上傳到服務器是一個難點（
服務器讀取本地圖片，聽后台人員說必須通過二進制流的形式），於是開始了漫長的資料查閱……
html2canvas(document.getElementById('xcard'), {
onrendered: function(canvas) {
document.body.appendChild(canvas);
var blob = getBlob(canvas);
var oMyForm = new FormData();
var fileName = mobile+ '.jpg'
oMyForm.append("uploadFile", blob);
oMyForm.append("fileName", fileName);
oMyForm.append("fileType", 'image');
$.ajax({
type: "POST",
url: BasicPath.URL + InterFaceJson.uploadSingleFile, //后台接口路徑
data: oMyForm,
contentType: false,
processData: false,
cache: false,
success:function(res){
}
});
}
});
function getBlob(canvas){ //獲取blob對象
var data = canvas.toDataURL("image/jpeg", 1);
data = data.split(',')[1];
data = window.atob(data);
var ia = new Uint8Array(data.length);
for(var i = 0; i < data.length; i++) {
ia[i] = data.charCodeAt(i);
}
return new Blob([ia], {
type: "image/jpeg"
});
}
代碼的實現機制到現在我還是不太懂，簡單介紹一下吧。
blob是一個裝載二進制流的容器（服務器讀取時需要讀二進制流）；
前后台交互不能使用jq的ajax方式，而是使用表單的提交方式。
也就是上面兩段代碼了。
3.html2canvas 也是一個巨坑
html2canvas官網是及其簡潔的。然而使用過程中，有太多的css樣式它是不認識的，因此html呈現的代碼和canvas生成的圖片往往會有出入，這個時候不要着急，並且需要注意它在Android和ios上的呈現區別。不要高興的太早，我們需要細心與耐心。