uniapp 利用canvas生成卡片，保存到相册

最新推荐文章于 2024-07-26 20:46:33 发布

pandajia-hello

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量98

点赞数 3

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_39918500/article/details/140359569

版权

<template>
  <view>
    <button @click="generateCard">生成卡片</button>
    <canvas canvas-id="myCanvas" style="width: 300px; height: 500px;"></canvas>
    <uni-popup ref="popup" type="center">
      <image :src="generateImg" mode="scaleToFill" style="width: 300px; height: 500px;" />
      <button @click="saveCard">保存相册</button>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      generateImg: "",// 生成的图片
    };
  },
  onReady() {},
  methods: {
    // 生成卡片
    generateCard() {
      // 生成画布
      this.createCanvas();
      // 生成图片
      uni.canvasToTempFilePath(
        {
          canvasId: "myCanvas",
          success: (res) => {
            this.generateImg = res.tempFilePath;
          },
        },
        this
      );
      // 打开弹窗
      this.$refs.popup.open();
    },
    // 生成画布
    createCanvas() {
      // 创建画布
      const ctx = uni.createCanvasContext("myCanvas", this);
      // 背景图
      ctx.drawImage("/static/bg1.png", 0, 0, 300, 500);
      ctx.drawImage("/static/bg2.png", 0, 250, 300, 250);
      // 标题：早
      ctx.setTextAlign("center");
      ctx.setFillStyle("#fff");
      ctx.setFontSize(30);
      ctx.fillText("早", 150, 50);
      // 标题：安
      ctx.setTextAlign("center");
      ctx.setFillStyle("#fff");
      ctx.setFontSize(30);
      ctx.fillText("安", 150, 90);
      // 鸡汤标题
      ctx.setTextAlign("left");
      ctx.setFontSize(14);
      ctx.setFillStyle("#000");
      ctx.fillText("心灵鸡汤", 10, 350);
      // 鸡汤内容
      ctx.setFontSize(12);
      ctx.setFillStyle("#000");
      ctx.fillText("人生是一场旅行，不要为短暂的困苦而停下脚步", 10, 370);
      // 用户头像
      ctx.drawImage("/static/ava.png", 15, 450, 30, 30);
      // 用户信息
      ctx.setTextAlign("left");
      ctx.setFontSize(10);
      ctx.setFillStyle("#000");
      ctx.fillText("微信用户", 50, 460);
      ctx.setFillStyle("#3767e2");
      ctx.setFontSize(10);
      ctx.fillText("小明", 50, 475);
      // 二维码
      ctx.drawImage("/static/qrcode.png", 200, 410, 80, 80);
      // 画到画布上
      ctx.draw();
    },
    // 保存到相册
    saveCard() {
      uni.saveImageToPhotosAlbum({
        filePath: this.img,
        success: () => {
          uni.showToast({
            title: "保存成功",
            icon: "none",
          });
        },
      });
    },
  },
};
</script>

<style></style>