有時(shí)候需要制作二維碼，用于分享產(chǎn)品等操作。如下圖這樣的操作。理清思路還是比較簡(jiǎn)單的。
image.png
<view class="poster-wrapper {{animaFlag?'active': ''}}" wx:if="{{posterFlag}}">
<view class="poster-bg" > </view>
<view class="poster-content {{animaFlag&&canvasShow?'active': ''}}" >
<canvas canvas-id="posterCan" class="big-img-canv" bindtap='_clickImage' data-src="{{shareImage}}" style='width: {{canvasWidth}}px;height: {{canvasHeight}}px;'></canvas>
<image class="show-can-box" src="{{shareImage}}" mode="widthFix" lazy-load="false" bindtap='_clickImage'
data-src="{{shareImage}}" ></image>
<button class="btn-box" wx:if="{{shareImage}}" size="large" openType="{{canSave? '':'openSetting'}}" bindtap='_saveImageToPhotosAlbum'>{{language.TIPS_ShaFriend}}，{{language.TIPS_SendToFriend}}</button>
</view>
</view>
wx.downloadFile({
url: productImg,
success: function (productImgData) {
that.setData({
Imgpath: productImgData.tempFilePath
});
//緩存canvas繪制小程序二維碼
wx.downloadFile({
url: qrcode,
success: function (erImg) {
//緩存二維碼
that.setData({
qrcode_temp: erImg.tempFilePath
});
let productImage = productImgData.tempFilePath;
let qrPath = dataInfo.qrcode_temp; // 二維碼
let system = wx.getSystemInfoSync();
let pixelRatio = system.pixelRatio
let sw = system.screenWidth;
let fontSize = Math.round(13 / 375 * sw);
let canvasWidth = sw; //canvas寬度
let canvasHeight = sw / 750 * 1070; //canvas高度
that.setData({
canvasWidth: parseInt(canvasWidth),
canvasHeight: parseInt(canvasHeight)
})
let canvasFont = 'normal bold ' + fontSize + 'px sans-serif';
let goodsTitle = name; // 產(chǎn)品名稱
let wxappName = app.globalData.appTitle; // 小程序名稱
let codeText = '長(zhǎng)按識(shí)別二維碼';
let canvasCtx = wx.createCanvasContext('posterCan', that);
let draw = function (x, y, width, height, radius, color, type) {
canvasCtx.beginPath();
canvasCtx.moveTo(x, y + radius);
canvasCtx.lineTo(x, y + height - radius);
canvasCtx.quadraticCurveTo(x, y + height, x + radius, y + height);
canvasCtx.lineTo(x + width - radius, y + height);
canvasCtx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);
canvasCtx.lineTo(x + width, y + radius);
canvasCtx.quadraticCurveTo(x + width, y, x + width - radius, y);
canvasCtx.lineTo(x + radius, y);
canvasCtx.quadraticCurveTo(x, y, x, y + radius);
canvasCtx[type + 'Style'] = color || params.color;
canvasCtx.closePath();
canvasCtx[type]();
}
//繪制背景
canvasCtx.setFillStyle('white');
canvasCtx.fillRect(0, 0, canvasWidth, canvasHeight);
//繪制商品圖片
canvasCtx.drawImage(productImage, 0, 0, canvasWidth, canvasWidth);
let textWidth = 180 / 375 * sw;//文本寬度
let textTop = 32 / 375 * sw + canvasWidth;//文本距canvas頂部高度
let textLeft = 19 / 375 * sw;//文本距canvas左側(cè)寬度
let textLineHeight = 24 / 375 * sw;//文本行高
let strOnes = '一';
let onesWidth = canvasCtx.measureText(strOnes).width;//一個(gè)文字的寬度
let lineWidth = 0;//當(dāng)前行寬
let lastSubStrIndex = 0;//文本循環(huán)下標(biāo)
let line = 1;//當(dāng)前行數(shù)
let textWidth2 = textWidth - canvasCtx.measureText(strOnes).width;//第二行寬度減去一個(gè)字符空位放省略號(hào)
//繪制商品標(biāo)題
canvasCtx.setFontSize(15 / 375 * sw);
canvasCtx.setFillStyle('#333');
for (let i = 0; i < goodsTitle.length; i++) {
lineWidth += canvasCtx.measureText(goodsTitle[i]).width;
if (line > 1) {
textWidth = textWidth2;
}
if (lineWidth > textWidth) {
canvasCtx.fillText(goodsTitle.substring(lastSubStrIndex, i), textLeft, textTop);//繪制截取部分
if (line > 1) {
let _Left = textLeft + canvasCtx.measureText(goodsTitle.substring(lastSubStrIndex, i)).width;
canvasCtx.fillText('…', _Left, textTop);
break;
}
textTop += textLineHeight;
lineWidth = canvasCtx.measureText(strOnes).width;
lastSubStrIndex = i;
line++;
}
if (i == goodsTitle.length - 1) {//繪制剩余部分
canvasCtx.fillText(goodsTitle.substring(lastSubStrIndex, i + 1), textLeft, textTop);
}
};
// 判斷是否為秒殺或拼團(tuán)
// if (proType == '1' || proType == '2') {
// let identImg = queryparams.proType == '1' ? that.data.groupImg : that.data.seckilltImg;
// let imgW = 42 / 375 * sw;
// let imgh = 18 / 375 * sw;
// canvasCtx.drawImage(identImg, textLeft, textTop + 11, imgW, imgh);
// 下面方法只有蘋(píng)果機(jī)可以，安卓機(jī)的邊框會(huì)錯(cuò)亂，先保留著
// canvasCtx.setFontSize(11);
// canvasCtx.setFillStyle('#ff7200');
// canvasCtx.setTextAlign('left');
// let identifying = queryparams.proType == '1' ? '拼團(tuán)價(jià)' : queryparams.proType == '2' ? '秒殺價(jià)' : '';
// canvasCtx.fillText(identifying, textLeft + 5, textTop + textLineHeight - 2);
// }
//繪制價(jià)格
canvasCtx.setFontSize(17 / 375 * sw);
canvasCtx.setFillStyle('#d61212');
canvasCtx.setTextAlign('left');
// canvasCtx.font = canvasFont;
let priceLeft = textLeft - 4;
let priceTop = textLineHeight + 8;
let labelTop = textTop + priceTop - 15
let pricetxt = '￥' + price
let labelLeft = priceLeft + canvasCtx.measureText(pricetxt).width + 4
canvasCtx.fillText(pricetxt, priceLeft, textTop + priceTop);
if (pricelogo) {
draw(labelLeft, labelTop, 40, 16, 8, '#fcecec', 'fill')
//繪制價(jià)格標(biāo)簽
canvasCtx.setFontSize(10 / 375 * sw);
canvasCtx.setFillStyle('#d61212');
canvasCtx.setTextAlign('left');
canvasCtx.fillText(pricelogo, labelLeft + 4, labelTop + 12);
}
//繪制小程序名稱
let businessTop = (54 + 78) / 375 * sw + canvasWidth;
let businessSize = Math.round(13 / 375 * sw);//文字大小
canvasCtx.setFontSize(businessSize);
canvasCtx.setFillStyle('#333333');
canvasCtx.fillText(wxappName, textLeft, businessTop);
let xLeft = 268 / 375 * sw;
// 長(zhǎng)按二維碼名稱
let businessSize2 = Math.round(12 / 375 * sw);//文字大小
canvasCtx.setFontSize(businessSize2);
canvasCtx.setFillStyle('#999');
canvasCtx.fillText(codeText, xLeft, businessTop);
//繪制二維碼
let qrcodeX = 268 / 375 * sw;;
let qrcodeY = 18 / 375 * sw + canvasWidth;
let qrcodeW = 88 / 375 * sw;
canvasCtx.drawImage(qrPath, qrcodeX, qrcodeY, qrcodeW, qrcodeW);//畫(huà)圖
canvasCtx.draw(false, function (e) {
// 轉(zhuǎn)換成圖片
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: canvasWidth,
height: canvasHeight,
destWidth: canvasWidth * pixelRatio,
destHeight: canvasHeight * pixelRatio,
quality: 1,
fileType: 'png',
canvasId: 'posterCan',
success: function (resImg) {
that.setData({
shareImage: resImg.tempFilePath
});
setTimeout(function () {
wx.hideLoading();
}, 1000)
},
fail: function (resERR) {
wx.hideLoading();
}
}, that)
});
setTimeout(function () {
wx.hideLoading();
}, 800)
},
fail: (err) => {
that._onCloseModal()
setTimeout(function () {
wx.hideLoading();
app.showModal({
title: '提示',
content: '請(qǐng)檢查域名配置是否正確'
})
}, 800)
}
});
},
fail: (err) => {
that._onCloseModal()
setTimeout(function () {
wx.hideLoading();
app.showModal({
title: '提示',
content: '請(qǐng)檢查域名配置是否正確'
})
}, 800)
}
});
