Component({
properties: {
},
data: {
photoFile: ''
},
methods: {
getPhotoFile: function(e) {
e.success(this.data.photoFile);
},
getShareDrawing: function(e) {
let _this = this;
let goodsName = e.goodsName;
let beginCity = e.beginCity;
let beginAddress = e.beginAddress;
let endCity = e.endCity;
let endAddress = e.endAddress;
let QRCode = e.QRCode;
const query = this.createSelectorQuery();
query.select('#myCanvas')
.fields({
node: true,
size: true
})
.exec((res) => {
const canvas = res[0].node;
const ctx = canvas.getContext('2d');
const dpr = wx.getSystemInfoSync().pixelRatio;
canvas.width = res[0].width * dpr;
canvas.height = res[0].height * dpr;
ctx.scale(dpr, dpr);
_this.setHeadStrip(canvas, ctx);
_this.setTitle(ctx, goodsName);
_this.setTips(ctx);
_this.setQRCode(canvas, ctx, QRCode)
_this.setBeginIcon(canvas, ctx);
_this.setBeginCity(ctx, beginCity);
_this.setBeginAddress(ctx, beginAddress);
_this.setEndIcon(canvas, ctx);
_this.setEndCity(ctx, endCity);
_this.setEndAddress(ctx, endAddress);
wx.canvasToTempFilePath({
canvas,
success(res) {
_this.setData({
photoFile: res.tempFilePath
})
}
})
})
},
setTitle: function(ctx, str) {
const width = 342
ctx.font = '500 19px PingFangSC-Medium';
ctx.fillStyle = '#000';
ctx.fillText(str, (width - ctx.measureText(str).width) * 0.5, 40);
},
setHeadStrip: function(canvas, ctx) {
const headerImg = canvas.createImage();
headerImg.src = 'https://cdn.nucarf.cn/xgb/v1.0/public/head.png';
headerImg.onload = () => {
ctx.drawImage(headerImg, 0, 0, 342, 10);
};
},
setQRCode: function(canvas, ctx, src) {
const headerImg = canvas.createImage();
headerImg.src = src;
headerImg.onload = () => {
ctx.drawImage(headerImg, 101, 103, 140, 140);
ctx.restore();
};
},
setTips: function(ctx) {
const width = 342
ctx.font = '500 15px PingFangSC-Medium';
ctx.fillStyle = '#F1950A';
let str = "请司机扫码上传证件";
ctx.fillText(str, (width - ctx.measureText(str).width) * 0.5, 70);
},
setBeginIcon: function(canvas, ctx) {
const headerImg = canvas.createImage();
headerImg.src = 'https://cdn.nucarf.cn/xgb/v1.0/public/begin1.png';
headerImg.onload = () => {
ctx.drawImage(headerImg, 30, 300, 21, 34);
};
},
setBeginCity: function(ctx, str) {
ctx.font = '500 16px PingFangSC-Medium';
ctx.fillStyle = '#000';
ctx.fillText(str, 61, 310);
},
setBeginAddress: function(ctx, str) {
ctx.font = '400 14px PingFangSC-Medium';
ctx.fillStyle = '#666666';
ctx.fillText(str, 61, 330);
},
setEndIcon: function(canvas, ctx) {
const headerImg = canvas.createImage();
headerImg.src = 'https://cdn.nucarf.cn/xgb/v1.0/public/end1.png';
headerImg.onload = () => {
ctx.drawImage(headerImg, 30, 368, 21, 34);
};
},
setEndCity: function(ctx, str) {
ctx.font = '500 16px PingFangSC-Medium';
ctx.fillStyle = '#000';
ctx.fillText(str, 61, 380);
},
setEndAddress: function(ctx, str) {
ctx.font = '400 14px PingFangSC-Medium';
ctx.fillStyle = '#666666';
ctx.fillText(str, 61, 400);
}
}
})
图片onload是异步的,所以你canvasToTempFilePath时图片还没画完呢。要么你把绘制图片改成Promise,要么你加个延时。
<canvas type="2d" id="myCanvas" style="width: 342px;height: 451px;background: url('https://cdn.nucarf.cn/xgb/v1.0/public/bg.png');background-size: 100% 100%;background-repeat:no-repeat;border-radius: 20rpx;"></canvas>
仔细读文档
canvas 斜体无效(新版旧版都无效)怎么解决?