微信小程序canvas使用

我的项目是基于uni-app

template

我也不知道为何，只有行内样式生效，小程序限制还是太大

<canvas canvas-id="shareCanvas" id="shareCanvas" style="width: 330px;height: 410px;"></canvas>

js部分

async draw({text,name,title,cla,cover}){
  const coverPath = await this.getImageInfo(cover);
  // 获取画笔对象
  const ctx = uni.createCanvasContext("shareCanvas",this);
  //画背景图
  ctx.drawImage("../../static/sharebg.png", 0, 0, 330, 410);

  ctx.setFillStyle("#6c4533");
  ctx.setFontSize(20);
  ctx.fillText(text,80,35,170);

  ctx.setFillStyle("#fefefe");
  ctx.shadowOffsetX = 0;
  ctx.shadowOffsetY = 0;
  ctx.shadowColor = "rgba(100, 100, 100, 0.5)";
  ctx.shadowBlur = 5;
  ctx.fillRect(30, 60, 270, 310);

  ctx.drawImage(coverPath, 30, 60, 270, 160);

  ctx.shadowBlur = 0;
  ctx.setFillStyle("#2f2119");
  ctx.setFontSize(14);
  ctx.fillText(name,40,240);

  ctx.fillText(cla,220,240,70);

  ctx.setFillStyle("#ebae2e");
  ctx.fillText(title,40,260);

  ctx.drawImage(bufferImg, 50, 280, 80, 80);

  ctx.setFillStyle("#2f2119");
  ctx.setFontSize(18);
  ctx.fillText(this.language=="zh"?"长按识别二维码":"Identify QR code",150,320,130);

  ctx.draw(false,(res)=>{
    this.showBtn = true;
    console.log("画图完毕")
  });
}

点击保存

saveImg(){
  uni.showLoading({
    title: "loading..."
  });
  uni.canvasToTempFilePath({
    canvasId: "shareCanvas",
    success: (res)=>{
      const path = res.tempFilePath;
      saveImage(path);
      uni.hideLoading();
    },
    fail(err){
      console.log(err);
      uni.hideLoading();
    }
  },this);
}

saveImage

saveImage = (url) => {
	uni.saveImageToPhotosAlbum({
		filePath: url,
		success: function (data) {
			uni.showModal({
				title: '保存成功',
				showCancel: false,
			})
		},
		fail: function (err) {
			if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {
				// 这边微信做过调整，必须要在按钮中触发，因此需要在弹框回调中进行调用
				uni.showModal({
					title: '提示',
					content: '需要您授权保存相册',
					showCancel: false,
					success: modalSuccess => {
						uni.openSetting({
							success(settingdata) {
								if (settingdata.authSetting['scope.writePhotosAlbum']) {
									uni.showModal({
										title: '提示',
										content: '获取权限成功,再次点击图片即可保存',
										showCancel: false,
									})
								} else {
									uni.showModal({
										title: '提示',
										content: '获取权限失败，将无法保存到相册哦~',
										showCancel: false,
									})
								}
							},
							fail(failData) {
								// console.log("failData", failData)
							},
							complete(finishData) {
								// console.log("finishData", finishData)
							}
						})
					}
				})
			}
		}
	})
}