微信小程序：canvas合成图片缩放显示问题

Question

测试发现transform: scale(0.2);真机情况下无效，如何实现页面上显示比如宽180高320然后导出大小是宽720高1280

Answer 1

缩放问题，之前我也遇到过，
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('#380D5A');
  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画布弄大点，然后生成的时候 缩小点，然后就不会糊

Answer 2

canvas导出图片大小是跟canvas一致的（全canvas保存）。如果要大一点的话，你可以另外再建一个canvas并隐藏起来。

比如：一个180320的canvas显示，一个7201280的canvas用来绘制实际大小的图片并隐藏（设置绝对定位，left:-720px;top-1280px;）。