海报生成并保存(v3+ts+uni-app)

效果:
海报生成并保存(v3+ts+uni-app)_第1张图片

(1)获取的到二维码图片进行本地化处理 getimageinfo() API详情

uni.getImageInfo({
  src: 网络资源二维码 ,
  success:(res:any) => {
    usrInfo.qrCode = res.path;
  }
})

(2)通过Canvas创建容器进行画图

//容器
 <view style="left: -30000px;top: 0;" class="fixed">
      <canvas style="height: 1333px; width: 750px"                canvasid="myCanvas"></canvas>
</view>

const saveCanvasImg = () => {
  uni.showLoading({
    title: '加载中',
    mask: true
  });
  let imgUrl =usrinfo.bgurl;//网络资源背景图片
  let posterQrCodeImg = usrinfo.qrCode;//二维码
  const ctx = uni.createCanvasContext('myCanvas', this);
  uni.getImageInfo({
    src: imgUrl,
    success(res) {
      //先画背景图片
      ctx.drawImage(res.path, 0, 0, 750, 1333);
      //画二维码
      ctx.drawImage(posterQrCodeImg, 298 , 1144, 153, 153);
      //昵称
      let userName = usrinfo.userName;
      if(userName){
          userName = userName.length >6 ?             userName.substring(0,10)+"..." : userName;
          //字体大小
          ctx.setFontSize(18);
          //字体颜色
          ctx.setFillStyle('black');
          //画昵称
          ctx.fillText(userName, 310, 1120, 190);
      }
      // draw方法 把以上内容画到 canvas 中
      ctx.draw(true, (ret) => {
        console.log(ret);
        // 保存canvas为图片
        uni.canvasToTempFilePath({
          canvasId: 'myCanvas',
          quality: 1,
          complete: function (res) {
            usrinfo.bgurl=res.tempFilePath;
            uni.hideLoading();
          }
        });
      });
    }
  })
};

创建 canvas 绘图上下文(指定 canvasId)。uni.createCanvasContext() API
把当前画布指定区域的内容导出生成指定大小的图片,并返回文件路径。uni.canvasToTempFilePath() API
canvas绘制拓展

(3)保存图片至本地

const selectDownload = (urls: string) => {
        //小程序保存本地权限校验
        uni.authorize({
          scope: 'scope.writePhotosAlbum',
          success: () => {
          //保存
            uni.saveImageToPhotosAlbum({
                filePath: urls,
                success: function () {
                  uni.showToast({
                    title: '海报已保存至本地!',
                    icon: 'none'
                  });
                },
                fail() {
                  uni.showToast({
                    title: '海报保存失败!',
                    icon: 'none'
                  });
                }
              });
            },
            fail: () => {
              uni.showModal({
                content: '由于您拒绝保存到您手机里,无法进行保存,点击确定去授权',
                success: (res) => {
                  if (res.confirm) {
                    /* 这个就是打开设置的API*/
                    uni.openSetting({
                      success: () => {
                        // console.log(res1.authSetting);
                      }
                    });
                  }
                }
              });
            }
        });
};

你可能感兴趣的:(微信小程序)