uni-app 利用canvas画简单海报并保存图片

CodeAE

<template>
  <view class="canvas-box">
    <canvas  class="canvas" :style="{width:`${canvasData.image_Width}px;`,height:`${canvasData.image_Height}px;`}" canvas-id="canvasID"></canvas>
    <view class="footer">
      <view class="preservationBtn" @click="saveImage">保存到相册</view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        imgUrl: '',
        statusBarHeight: 0,
        avatar :'../../static/blue.webp', //头像地址
                erweima:'../../static/erweima.webp',//二维码
                canvasData:{
                    image_Width:0,
                    image_Height:0
                }
      }
    },
    onLoad() {
      let ctx = uni.createCanvasContext('canvasID', this);
             uni.getImageInfo({
                src: 'https://img0.baidu.com/it/u=3269595841,4171123021&fm=253&fmt=auto&app=138&f=JPEG?w=281&h=500', //网络图片用来做背景
                success: (res) => {
                    // console.log(res);
                    this.canvasData.image_Width = res.width
                    this.canvasData.image_Height = res.height
                    ctx.save()
                    ctx.drawImage(res.path, 0, 0, this.canvasData.image_Width, this.canvasData.image_Height)
                    ctx.draw(true)
                    ctx.save()
                    this.drawCircular(ctx, this.avatar, 36, 32, 50, 50) //绘制圆形头像
                    ctx.setFontSize(18)
                    ctx.setFillStyle("#ffffff")
                    ctx.fillText('哆啦A梦没口袋', 98, 65)
                    ctx.font = '20px normal'
                    ctx.setFillStyle("#09CFB1")
                    ctx.fillText('伴我同行', 30, 122)
                    ctx.setFillStyle("#09CFB1")
                    ctx.fillText('一路前行', 60, 150)
                    ctx.fillStyle = "#2C405A";
                    ctx.fillRect(154,358,96,96); 
                    ctx.drawImage(this.erweima, 154,356,96,96) //二维码
                    ctx.draw(true, setTimeout(() => {
                        uni.canvasToTempFilePath({ //将canvas生成图片
                            x: 0,
                            y: 0,
                            width: 281,
                            height: 500,
                            destWidth: 281, //截取canvas的宽度
                            destHeight: 500, //截取canvas的高度
                            canvasId: 'canvasID',
                            success:(res)=> {
                                console.log('res.tempFilePath==========', res.tempFilePath)
                                this.imgUrl = res.tempFilePath
                            },
                            fail:(err)=> {
                              console.log(err)
                            }
                        })
                    }, 500))
                },
            })
    },
    methods: {
            //点击保存到相册
      saveImage() { 
        var _this = this;
        uni.saveImageToPhotosAlbum({
          filePath: _this.imgUrl,
          success() {
            uni.showToast({
                title: "图片已保存图片到相册",
                icon: 'none',
                duration: 2000
            })
          },
                    fail() {
                        uni.hideLoading()
                        uni.showModal({
                            content: '检测到您没打开获取信息功能权限，是否去设置打开？',
                            confirmText: "确认",
                            cancelText: '取消',
                            success: (res) => {
                                if (res.confirm) {
                                    uni.openSetting({
                                        success: (res) => {
                                            console.log(res);
                                            uni.showToast({
                                                title: "请重新点击分享保存图片～",
                                                icon: "none"
                                            });
                                        }
                                    })
                                } else {
                                    uni.showToast({
                                        title: "保存失败，请打开权限功能重试",
                                        icon: "none"
                                    });
                                }
                            }
                        })
                    }
        })
      },
      // 绘制圆形头像
       drawCircular(ctx, url, x, y, width, height) {
                //画圆形头像
                let avatarurl_width = width;
                let avatarurl_heigth = height;
                let avatarurl_x = x;
                let avatarurl_y = y;
                ctx.save(); //先保存状态，已便于画完园再用
                ctx.beginPath(); //开始绘制
                ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math
                    .PI * 2, false);
                ctx.setFillStyle("#FFFFFF")
                ctx.fill() //保证图片无bug填充
                ctx.clip(); //剪切
                ctx.drawImage(url, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); //推进去图片
                ctx.restore();
            },
    }
  }
</script>
<style lang="scss">
  .canvas-box {
        display: flex;
        flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background-color: #2C405A;
        image{
            margin-top: 40rpx;
        }
        .canvas{
            margin-top: 40rpx;
        }
    .footer {
            margin-top: 40rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      justify-content: center;
      .preservationBtn {
                margin-bottom: 40rpx;
        border: 1rpx solid #ffffff;
        color: #ffffff;
        display: flex;
        align-items: center;
                padding: 20rpx 40rpx;
                text-align: center;
                font-size: 30rpx;
                border-radius: 40rpx;
      }
    }
  }
</style>