有时候需要制作二维码，用于分享产品等操作。如下图这样的操作。理清思路还是比较简单的。
image.png
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; // 产品名称
let wxappName = app.globalData.appTitle; // 小程序名称
let codeText = '长按识别二维码';
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左侧宽度
let textLineHeight = 24 / 375 * sw;//文本行高
let strOnes = '一';
let onesWidth = canvasCtx.measureText(strOnes).width;//一个文字的宽度
let lineWidth = 0;//当前行宽
let lastSubStrIndex = 0;//文本循环下标
let line = 1;//当前行数
let textWidth2 = textWidth - canvasCtx.measureText(strOnes).width;//第二行宽度减去一个字符空位放省略号
//绘制商品标题
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);
}
};
// 判断是否为秒杀或拼团
// 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);
// 下面方法只有苹果机可以，安卓机的边框会错乱，先保留着
// canvasCtx.setFontSize(11);
// canvasCtx.setFillStyle('#ff7200');
// canvasCtx.setTextAlign('left');
// let identifying = queryparams.proType == '1' ? '拼团价' : queryparams.proType == '2' ? '秒杀价' : '';
// canvasCtx.fillText(identifying, textLeft + 5, textTop + textLineHeight - 2);
// }
//绘制价格
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')
//绘制价格标签
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;
// 长按二维码名称
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);//画图
canvasCtx.draw(false, function (e) {
// 转换成图片
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: '请检查域名配置是否正确'
})
}, 800)
}
});
},
fail: (err) => {
that._onCloseModal()
setTimeout(function () {
wx.hideLoading();
app.showModal({
title: '提示',
content: '请检查域名配置是否正确'
})
}, 800)
}
});