the test found that transform: scale (0.2). If it is invalid in the real machine, how to display it on the page, such as width 180 high 320 and then export the size is width 720 height 1280
the test found that transform: scale (0.2). If it is invalid in the real machine, how to display it on the page, such as width 180 high 320 and then export the size is width 720 height 1280
canvas the size of the exported picture is the same as canvas (all canvas save). If you want to be bigger, you can create another canvas and hide it.
for example: a canvas of 180 320shows that a canvas of 720 1280 is used to draw a full-size picture and hide it (set absolute positioning, left:-720px;top-1280px;).
scaling problem, which I have encountered before,
drawShareImg () {
const _this = this;
console.log('time1',new Date())
wx.showLoading({
title: `...`,
mask: true,
})
var reStr = '';
const ctx = wx.createCanvasContext('myCanvas')
//
ctx.save();
ctx.drawImage('../../images/sharepic.png', 0, 0, _this.canvasWidth*_this.dpr, _this.canvasHeight*_this.dpr);
ctx.restore();
//
ctx.save();
ctx.arc(180*_this.dpr*2, 141.95* _this.dpr*2, 71 * _this.dpr*2, 0, Math.PI*2, true);
ctx.clip();
ctx.drawImage(_this.shareData.avater, 109*_this.dpr*2, 71*_this.dpr*2, 141*_this.dpr*2, 141*_this.dpr*2);
ctx.restore();
//
ctx.save();
ctx.setFontSize(50 * _this.dpr*2)
ctx.setFillStyle('-sharp380D5A');
reStr = _this.measureText(_this.shareData.nickname,50*_this.dpr*2)*_this.dpr*2 > 70*_this.dpr*2 ? _this.shareData.nickname.slice(0, 5)+'...' : _this.shareData.nickname;
ctx.fillText(reStr,290*_this.dpr*2,165* _this.dpr*2);
ctx.restore();
//
_this.drawInfo('',_this.shareData.walkNum,'',330,ctx);
_this.drawInfo('',_this.shareData.walkMoney,'',430,ctx);
_this.drawInfo('',_this.shareData.percent,'',530,ctx);
//
ctx.save();
ctx.drawImage(_this.shareData.rankPic,(_this.canvasWidth - 820*2)/2*_this.dpr, 650*_this.dpr*2, 820*_this.dpr*2, 550*_this.dpr*2);
ctx.restore();
//
ctx.save();
ctx.drawImage(_this.shareData.codePic,(_this.canvasWidth *0.73)*_this.dpr, 1280*_this.dpr*2, 430/2*_this.dpr*2, 430/2*_this.dpr*2);
ctx.restore();
ctx.draw(_this.methods.canvasToPic());
}
canvas