小程序獲取頭像圖片以及昵稱中含有emoji表情
問題描述
1、小程序不能轉(zhuǎn)發(fā)到朋友圈，所以只能通過保存圖片的方式識別二維碼進(jìn)入小程序，這樣就用到了canvas畫圖，但是如果想把圖像也畫到canvas上面就需要把網(wǎng)絡(luò)圖片或者頭像圖片下載到本地緩存才能在canvas上面進(jìn)行填充。小程序下載圖片或者下載頭像圖片還是比較簡單的，但是對于一些不明就里的還是比較坑的。畢竟小程序有安全域名這一說，真是想吐槽
2、現(xiàn)在微信的昵稱中都含有emoji表情，顯示的時候超過一定的長度要顯示...的問題，但是在畫布上如果截取的字符串正好是emoji表情，就會導(dǎo)致錯誤。而且emoji表情是占用四個字符的，漢字占用兩個字符，英文或者特殊字符占用一個字符。也有特殊的。比如emoji表情中 中國國旗的emoji表情是占用八個字符的。所以也要根據(jù)情況判斷；
微信api
wx.downloadFile(OBJECT)
下載文件資源到本地，客戶端直接發(fā)起一個 HTTP GET 請求，返回文件的本地臨時路徑。
小程序downloadFileAPI
這里有一個最重要的問題就是download的安全域名的設(shè)置。下載文件或者圖片的url的域名要在安全域名內(nèi)
比如：頭像的網(wǎng)絡(luò)地址的URL是https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLZQtgUL0YiaN3OL5RjED9zPOicjhQwcuticBWZLeGZaT5qAfqzGaBYf7vnJuKgMIycbbiavB66Tp9/132
這樣就是需要把wx.qlogo.cn添加到download的安全域名下面。
還有一點(diǎn)要注意的就是一定要是HTTPS協(xié)議，即使是自己的圖片服務(wù)器，也一定要是HTTPS才行
設(shè)置安全域名
登陸微信公眾平臺 點(diǎn)擊設(shè)置→開發(fā)設(shè)置→服務(wù)器域名→download服務(wù)器域名
image.png
這樣就可以下載圖片了
制作圓角信息，并且畫到畫布上面
//首頁獲取圖片信息
bindGetUserInfo: function (e) {
app.globalData.userInfo = e.detail.userInfo;
if (app.globalData.userInfo == null || app.globalData.userInfo == 'undefined' || app.globalData.userInfo == '' ){
app.globalData.userImage = '';
}else {
wx.getImageInfo({
src: app.globalData.userInfo.avatarUrl, //請求的網(wǎng)絡(luò)圖片路徑
success: function (res) {
//請求成功后將會生成一個本地路徑即res.path,然后將該路徑緩存到storageKeyUrl關(guān)鍵字中
app.globalData.userImage = res.path;
},
fail:function(res){
app.globalData.userImage = '';
}
})
}
// this.start()
},
//返回昵稱的字符串，超過顯示...
//驗證是否為emoji表情
function BooleanEmoji(emoji) {
var ranges = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig;
return ranges.test(emoji);
// var emojireg = emoji;
// // return emojireg.replace(new RegExp(ranges.join('|'), 'g'), '');
// return emojireg.replace(ranges, '');
}
//過濾emoji表情
function filterEmoji(emoji){
var ranges = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig;
var emojireg = emoji;
return emojireg.replace(ranges, '');
}
function GetLength(str) {
var realLength = 0
for (let s of str) {
// 如果是emoji表情str_length 字符長度增加4
if (BooleanEmoji(s)) {
realLength = realLength + 4;
} else {
// 如果是中文字符長度增加2
if (/.*[\u4e00-\u9fa5]+.*/.test(s)) {
//中文字符的長度經(jīng)編碼之后大于4
realLength = realLength + 2;
} else {
// 英文或者特殊字符 字符長度增加2
realLength = realLength + 1;
}
}
}
// 返回字符串的字符串總長度
return realLength;
}
function cutstr(str, len) {
var str_length = 0;
var str_len = 0;
var str_cut = new String();
//計算得到真正的字符串長度，如果使用length會出現(xiàn)不是真正的字符串長度
str_len = Array.from(str).length;
// 使用es6得到每個字符串
for (let s of str) {
// 如果是emoji表情str_length 字符長度增加4
if (BooleanEmoji(s)) {
str_length = str_length + 4;
} else {
// 如果是中文字符長度增加2
if (/.*[\u4e00-\u9fa5]+.*/.test(s)) {
//中文字符的長度經(jīng)編碼之后大于4
str_length = str_length + 2;
} else {
// 英文或者特殊字符 字符長度增加2
str_length = str_length + 1;
}
}
var beforeStr =s;
// 拼接字符串
str_cut = str_cut.concat(s);
// 大于指定的字符長度就會顯示...
if (str_length >= len) {
if (BooleanEmoji(s)) {
str_cut = filterEmoji(str_cut).trim();
if(str_cut==''){
str_cut = '我'
}
}else {
str_cut = str_cut.concat("...");
}
return str_cut;
}
}
// 小于指定的字符長度返回字符串
if (str_length < len) {
return str;
}
}
//var nickName = '????荷葉????';
//if(GetLength(nickName) > 16){
// var nickNameValue = cutstr(nickName,14) + ''
// }else {
// var nickNameValue = nickName + ''
// }
//console.log("表情符號是多少",nickNameValue)
// 獲取userInfo
var userInfo = app.globalData.userInfo;
if (userInfo == '' || userInfo == 'undefined' || userInfo == null) {
// var nickName = userInfo.nickName;
var nickNameValue = ''
// var userInfoImage = userInfo.avatarUrl;
// console.log("userInfoImage", userInfoImage)
} else {
// console.log("userInfo",userInfo)
var userInfoImage = app.globalData.userImage;
console.log("userInfoImage", userInfoImage)
var nickName = userInfo.nickName;
//var nickName = '????荷葉????';
if (GetLength(nickName) > 16) {
//截取昵稱第一個
var nickNameValue = cutstr(nickName,14) + ''
} else {
var nickNameValue = nickName + ''
}
}
//畫布
var userInfoImage = app.globalData.userImage；
const ctx = wx.createCanvasContext('qr-canvas');
ctx.save();
ctx.beginPath();
// 下面是先定位要開個圓形的位置，50 和 90 分別就是圓的圓心的 x 坐標(biāo)和 y 坐標(biāo)，
//25 是半徑，后面的兩個參數(shù)就是起始和結(jié)束，這樣就能畫好一個圓了
ctx.arc(50,90, 25, 0, 2 * Math.PI);
ctx.closePath();
// 下面就裁剪出一個圓形了，且坐標(biāo)在 （50， 90）
ctx.clip();
// 然后畫圖片，res.tempFilePath 其實是下載到本地的一個路徑，使用小程序畫出圖片記得一定要用本地的路徑，
//可以用 wx.downloadFile 來實現(xiàn)。 因為 drawImage 的第二個和第三個參數(shù)是圖片的左上角在畫布 canvas 的 x 坐標(biāo)，y 坐標(biāo)，
//所以圖片的坐標(biāo)比圓形的坐標(biāo)分別都小圓的半徑大小就剛剛好能被切成圓形，后面的兩個參數(shù)就是圖片的寬和高，請設(shè)定為圓形的直徑長度。
//userInfoImage是下載的圖片信息；
ctx.drawImage(userInfoImage, 25, 75, 50, 50);
ctx.restore();
//nickNameValue是昵稱信息
// 計算昵稱的寬度
//計算第一個設(shè)置大小之后的長度
ctx.setFontSize(18)
ctx.setFillStyle('black');
// var nickNameWidthOne = ctx.measureText(nickNameValue).width
// 設(shè)置昵稱的位置
ctx.fillText(nickNameValue,90,75)
