canvas绘画海报之祝你生日快乐

最新推荐文章于 2025-01-26 16:57:08 发布
最新推荐文章于 2025-01-26 16:57:08 发布
阅读量402 收藏 5
点赞数 3
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53273706/article/details/136932541
版权

目录

1. 绘制结果以及分析

2. canvas

3.  封装画图和画文字方法

4.  调用方法和传参

5.  提升清晰度

6. 完整代码 

前言：承接上文的html2canvas踩坑之后，实在是坑的需求要延期了哈，所以还是老老实实的用canvas来话吧。（心酸啊心酸）

1. 绘制结果以及分析

从上图可以看出，其实我们只要做两件事情，第一是用canvas画图，第二是用canvas画文字，调用这两个api就好了！

2. canvas

  好了，我们现在要开始了，首先，让我们把这个坐标系给建起来吧，

<canvas class="poster-canvas" type="2d" id="posterQuick"></canvas>

其次我们要拿到它，然后拿到它的渲染上下文

let canvas = document.getElementById('posterQuick');  // 拿到这个canvas
let ctx = this.canvas.getContext('2d');  // 拿到它的渲染上下文
// 给这个画布规定好它的宽高
canvas.width = 375;
canvas.height =756;

3.  封装画图和画文字方法

接下来我们就要开始画图了，让我们封装一下，把上下文，图片路径，图片起始坐标和宽高作为参数传入

drawImage(ctx, path, dx, dy, dw, dh) {
      return new Promise((resolve, reject) => {
        const image = new Image();
        image.src = path;
        image.onload = () => {
          ctx.drawImage(image, dx, dy, dw, dh);
          resolve();
        };
        image.onerror = () => {
          reject();
        };
      });
    },

同理，我们再封装一个绘画文字的方法，但是这个绘画文字的我们要加个options对象，在Options中传入对文字的一些设置，比如加粗，颜色，行高，字体大小，最大宽度等，还有首行缩进与换行

fillText(ctx, text, dx, dy, options = {}) {
      let {
        color = '#000000',    // 字体颜色
        fontSize = 24,     // 字体大小
        lineHeight = undefined,  // 行高
        maxWidth = 375,  // 最大宽度
        maxLine = 0,  
        align = 'left',  // 文字对齐方式 
        bold = false,  // 是否加粗
        lastHidden = false,
        indent = 0,  // 缩进
      } = options;
      lineHeight = lineHeight || fontSize;
      ctx.fillStyle = color;  // 设置字体颜色
      ctx.textAlign = align; // 设置文字对齐方式
      // 是否加粗
      if (bold) {
        ctx.font = `bold ${fontSize}px sans-serifl`;
      } else {
        ctx.font = `${fontSize}px sans-serif`;
      }

      let words = text.split('');
      let line = '';
      let lines = [];
      for (let i = 0; i < words.length; i++) {
        let testLine = line + words[i] + '';
        let metrics = ctx.measureText(testLine);
        let testWidth = metrics.width;

        // 首行缩进处理
        if (!lines.length && indent) {
          testWidth = testWidth + indent;
        }

        // 换行处理
        if (testWidth > maxWidth) {
          lines.push(line);
          line = words[i] + ' ';
        } else {
          line = testLine;
        }
      }

      // 绘画文字
      lines.push(line);
      for (let j = 0; j < lines.length; j++) {
        if (j <= 0 && indent) {
          ctx.fillText(lines[j], dx + indent, dy + j * lineHeight);
        } else {
          ctx.fillText(lines[j], dx*this.dpr, dy + j * lineHeight);
        }
      }
    },

4.  调用方法和传参

async makePoster() {
      this.canvas = document.getElementById('posterQuick');
      let ctx = this.canvas.getContext('2d');
      this.imgHeight = this.$refs.urlInfo.offsetHeight || 756;  // 获取图片的渲染高度
      this.canvas.width =375;
      this.canvas.height = this.imgHeight;
      await this.drawImage(
        ctx,
        this.posterList[picIndex].imgurl,
        0,
        0,
        375,
        this.imgHeight,
      );
      await this.fillText(ctx, this.name, 43, 218, {
        fontSize: 16,
        color: '#222222',
        bold: true,
      });
      await this.fillText(ctx, this.postersConf.message, 43, 266, {
        fontSize: 13,
        color: '#333333',
        maxWidth: 290,
        lineHeight: 20,
        indent: 20,
        // maxLine: 5,
      });

      // this.empName是登录人姓名，此操作是在处理当名字大于三个字时，绘画名字的x坐标往前挪一挪，小于三个字时，绘画名字的x坐标往后挪一挪
      let startX = this.empName.length>3?262-(this.empName.length-3)*13: 262+(3-this.empName.length)*13;
      await this.fillText(ctx, this.empName, startX, 366, {
        fontSize: 13,
        color: '#333333',
        lineHeight: 18,
      });
      await this.fillText(ctx, '敬上', 306, 366, {
        fontSize: 13,
        color: '#333333',
        lineHeight: 18,
      });


     //  画完之后的canvas,转成了base64,可以丢到浏览器看绘画结果
     console.log('this.canvas.toDataURL()',this.canvas.toDataURL())
    },

5.  提升清晰度

  丢到浏览器应该是有点糊糊的吧，这里涉及到物理屏幕的一个分辨率，那我们应该怎么办呢，超级超级简单，我们把这个分辨率获取一下，如下

this.dpr = window.devicePixelRatio;

然后在我们指定画布大小，坐标，图片位置大小，文字字体等，可以说是几乎所有的动态参数我们都乘一下就可以了。

6. 完整代码 

<template>
  <div class="poster">
    <canvas
      class="poster-canvas"
      :style="{ height: imgHeight + 'px' }"
      type="2d"
      id="posterQuick"
    ></canvas>
    <div class="down_btn" @click="makePoster">下载海报</div>
    <div class="lucky-poster" ref="poster" id="poster1">
      <img
        :src="posterList[postersConf.picIndex].imgurl"
        ref="urlInfo"
        alt=""
      />
      <div class="luckiness">
        <div class="name">
          {{ name }}
        </div>
        <div class="text">{{ postersConf.message }}</div>
        <div class="company">{{ empName }}<span style="marginLeft: 6px">敬上</span></div>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from 'vant';
export default {
  data() {
    return {
      postersConf: {
        applicantName: 'hahh',
        applicantSexDesc: '男',
        empName: 'yanan',
        picIndex: 0,
        message: 'hello'
      },
      imgHeight: 0,
      dpr: 1,
      canvas: null,
      posterList: [
        { id: 0, imgurl: require('../images/messageDetail/emptyBirth1.png') },
        { id: 1, imgurl: require('../images/messageDetail/emptyBirth2.png') },
        { id: 2, imgurl: require('../images/messageDetail/emptyBirth3.png') },
      ],
    };
  },
  created() {
    this.canvas = null;
    this.dpr = window.devicePixelRatio;
  },
  mounted() {
  },
  computed: {
    name() {
      return `尊敬的${this.postersConf.applicantName}${
        this.postersConf.applicantSexDesc == '男' ? '先生' : '女士'
      }`;
    },
    empName() {
      return `${this.postersConf.empName}`;
    },
  },
  mounted() {},
  methods: {
    drawImage(ctx, path, dx, dy, dw, dh) {
      return new Promise((resolve, reject) => {
        const image = new Image();
        image.src = path;
        image.onload = () => {
          ctx.drawImage(image, dx*this.dpr, dy*this.dpr, dw*this.dpr, dh*this.dpr);
          resolve();
        };
        image.onerror = () => {
          reject();
        };
      });
    },
    fillText(ctx, text, dx, dy, options = {}) {
      let {
        color = '#000000',
        fontSize = 24,
        lineHeight = undefined,
        maxWidth = 750,
        maxLine = 0,
        align = 'left',
        bold = false,
        lastHidden = false,
        indent = 0,
      } = options;
      lineHeight = lineHeight || fontSize;
      ctx.fillStyle = color;
      ctx.textAlign = align;
      ctx.textBaseline = 'top';

      if (bold) {
        ctx.font = `bold ${fontSize*this.dpr}px sans-serifl`;
      } else {
        ctx.font = `${fontSize*this.dpr}px sans-serif`;
      }

      let words = text.split('');
      let line = '';
      let lines = [];
      for (let i = 0; i < words.length; i++) {
        let testLine = line + words[i] + '';
        let metrics = ctx.measureText(testLine);
        let testWidth = metrics.width;
        if (!lines.length && indent) {
          testWidth = testWidth + indent*this.dpr;
        }
        if (testWidth > maxWidth*this.dpr) {
          lines.push(line);
          line = words[i] + ' ';
        } else {
          line = testLine;
        }
      }
      lines.push(line);
      for (let j = 0; j < lines.length; j++) {
        if (j <= 0 && indent) {
          ctx.fillText(lines[j], (dx + indent)*this.dpr, (dy + j * lineHeight)*this.dpr);
        } else {
          ctx.fillText(lines[j], dx*this.dpr, (dy + j * lineHeight)*this.dpr);
        }
      }
    },
    async makePoster() {
      let picIndex = this.postersConf.picIndex;
      this.canvas = document.getElementById('posterQuick');
      let ctx = this.canvas.getContext('2d');
      console.log(this.$refs.urlInfo.offsetHeight, 'ctx', ctx);
      this.imgHeight = this.$refs.urlInfo.offsetHeight || 812;
      this.canvas.width = Math.round(375*this.dpr);
      this.canvas.height = Math.round(this.imgHeight*this.dpr);
      await this.drawImage(
        ctx,
        this.posterList[picIndex].imgurl,
        0,
        0,
        375,
        this.imgHeight,
      );
      await this.fillText(ctx, this.name, 43, 218, {
        fontSize: 16,
        color: '#222222',
        bold: true,
      });
      await this.fillText(ctx, this.postersConf.message, 43, 266, {
        fontSize: 13,
        color: '#333333',
        maxWidth: 290,
        lineHeight: 20,
        indent: 20,
        // maxLine: 5,
      });
      let startX = this.empName.length>3?262-(this.empName.length-3)*13: 262+(3-this.empName.length)*13;
      await this.fillText(ctx, this.empName, startX, 366, {
        fontSize: 13,
        color: '#333333',
        lineHeight: 18,
      });
      await this.fillText(ctx, '敬上', 306, 366, {
        fontSize: 13,
        color: '#333333',
        lineHeight: 18,
      });
         let link =  this.canvas.toDataURL();

    },
  },
};
</script>
<style lang="scss" scoped>
.poster-canvas {
  width: 375px;
  position: absolute;
  right: 9999rpx;
  top: 9999rpx;
  z-index: -10;
}
.down_btn {
  position: absolute;
  width: 211px;
  top: 605px;
  left: 82px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ff7b28;
  border-radius: 22px;
  border: 3px solid #ffffff;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: #ffffff;
  line-height: 44px;
  z-index: 2;
}
.lucky-poster {
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: bold;
  color: #333333;
  position: relative;
  img {
    display: block;
    width: 100%;
  }
  .luckiness {
    position: absolute;
    color: rgb(227, 220, 220);
    top: 208px;
    left: 42px;
    right: 42px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 13px;
    color: #333333;
    line-height: 22px;
    .name {
      font-weight: 600;
      font-size: 16px;
      color: #222222;
    }
    .text {
      text-indent: 26px;
      width: 290px;
      height: 105px;
      margin-top: 16px;
      text-align: justify;
      font-style: normal;
      line-height: 22px;
    }
    .company {
      line-height: 18px;
      text-align: right;
    }
  }
}
</style>

Letimer
关注
canvas绘制海报分享，海报中设置圆角二维码
a_靖的博客
08-25 2312
canvas绘制海报分享，海报中设置圆角二维码，背景图，动态的文字，绘制完成以后保存为图片，可长按分享海报图片。
c语言烟花生日快乐图片,html5 canvas生日快乐文字烟花背景动画特效代码下载
weixin_33837846的博客
05-24 4691
特效描述：生日快乐 文字烟花 背景动画。html5基于canvas绘制酷炫的烟花动画，支持文字烟花适用于生日快乐主题网页动态背景特效。代码结构1. 引入JS2. HTML代码var canvas = $$("canvas"),ctx = canvas.getContext("2d"),g = 0.25,//模拟重力加速度n = 5,//一次性发射的烟火的数量fireworkList = [],//...
uniapp canvas生成贺卡
qq_34716929的博客
01-24 739
【代码】uniapp canvas生成贺卡。
4、6word
weixin_38170829的博客
05-06 1万+
英语四级+六级词汇大全（全部带“音标”） 第一部分：四级词汇大全 A abandon/ ə’bændən/ vt.丢弃；放弃，抛弃 　　aboard/ ə’bɔ:d/ ad.在船(车)上；上船 　　absolute/ ‘æbsəlu:t/ a.绝对的；纯粹的 　　absolutely/ ‘æbsəlu:tli/ ad.完全地；绝对地 　　absorb...
uniapp中使用canvas生成海报，并下载保存到手机相册
热门推荐
sunluyi的博客
10-27 3万+
如下图，是在H5中，canvas生成后的效果，首先说明，H5不支持返回图片的临时路径，不能用于保存，APP端生成成功后，会返回图片的临时路径用来保存到相册。本地测试，用的网络图片，没有出现跨域的问题，APP端也正常显示。 完整代码：可以将整个代码复制到你得uniapp项目中直接运行。代码中做了详细的注册，关于API的用法，这里只标注的简单的提示，具体还是参考 官方链接uniapp-canvas吧 <template> <view class="demo"> <c.
qrcodejs2+html2canvas 生成二维码和海报
11-03
代码放到线上使用，本地生成海报图片显示不了，必须...qrcodejs2+html2canvas 生成二维码和海报qrcodejs2+html2canvas 生成二维码和海报qrcodejs2+html2canvas 生成二维码和海报qrcodejs2+html2canvas 生成二维码和海报
uniapp——canvas生成海报
qq_42905523的博客
12-27 1557
uniapp-canvas生成海报
Android WebView 中网页被劫持的原因及解决方案
陆业聪
01-25 610
在 Android WebView 中，网页被劫持的情况可能由多种因素引起，包括 JavaScript 重定向、恶意网页、设置不当等。通过采取适当的安全措施，开发者可以有效降低这些风险，保护用户的浏览体验和数据安全。确保在开发过程中关注这些潜在的安全隐患，将有助于提升应用的整体安全性和用户信任度。
TypeScript进阶（三）：断言
最新发布
IT全栈 华强工作室
01-26 483
在TypeScript中，断言是把两种具有重叠关系的数据类型进行相互转换的一种 TS 语法，其可以把其中的一种数据类型转换成另外一种数据类型。类型断言和类型转换产生的效果一样，但语法格式不同。type定义的数据类型是引用数据类型，例如Array对象，不能是基本数据类型，例如stringnumberboolean，并且有 A 类实现了 B type 定义的数据类型【implements。
前端三件套详解之 HTML
2301_80330510的博客
01-24 887
超文本标记语言（英语：，简称：HTML）是一种用于创建网页的标准标记语言HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，用浏览器即可对HTML文件进行读取和显示。HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言:HyperTextMarkupLanguageHTML 不是一种编程语言，而是一种标记语言标记语言是一套标记标签。
制作动态菜单
m0_59860403的博客
01-23 245
什么叫做动态菜单？动态菜单就是根据用户属于不同的角色，每个角色还有不同的菜单，左侧菜单栏会有不同的显示。
HTML基础知识
2401_88481074的博客
01-22 617
希望用户提交一些特定的信息，但考虑到安全问题，或者是用户操作问题，不希望该数据发生改变。二者的区别readonly（只读）是会被提交的；表单项还要定义value属性，该属性用于明确提交时的实参（默认就是用户在窗口上输入的东西）多个单选框使用相同的name属性值，则就会有互斥效果。对于html代码来说，某些字符是有特殊含义的，如果想显示这些特殊符号，需要进行转义。（有下面两个属性）---------form只是设置了如何提交往哪提交。定义数据的提交地址（三种写法①完整的url②相对路径④绝对路径）
uniapp APP端页面触发调用webview（页面为uniapp开发的H5）里的方法
m0_49083276的博客
01-22 438
使用 getCurrentInstance() 获取当前组件的 Vue 实例，通过 instance.proxy.$scope.$getAppWebview() 获取 Uniapp 的原生 WebView 对象。使用 WebView 提供的 evalJS 方法，执行嵌入 H5 页面内的 JavaScript 代码。代码大意：调完接口后将接口返回参数注入webview。
第11篇：vue3 中 props 的使用
小画家
01-22 293
注意多个的话 中间是没有 , // <Person a = "哈哈中" :list = persons />import {defineProps} from 'vue' // 定义一个属性。{id:'e98219e13',name:'李四',age:19},{id:'e98219e14',name:'王五',age:20}{id:'e98219e12',name:'张三',age:18},']) // 注意如果多个的话 //// 遍历循环 v-for。
Tauri2+Leptos开发桌面应用--绘制图形、制作GIF动画和mp4视频
weixin_44274609的博客
01-23 844
在之前工作（）的基础上继续尝试绘制图形、制作GIF动画和mp4视频绘制图形主要尝试了两种方式，一种是调用python使用matplotlib模块绘制图形，一种是使用纯Rust开发的图形库Plotters来绘制图形，包括png、svg格式的图片，gif格式的动画。制作mp4视频主要是使用Plotters结合video_rs来完成的。上述功能都是写成Tauri后台命令，通过前端Leptos调用显示实现的。
声明式和函数式 JavaScript 原则
分享学习网络的点点滴滴
01-23 377
这是两种不同的编写代码的方式，我们也称之为范式；
技术之翼，创作之心
繁依Fanyi的博客
01-24 807
例如，我写过一篇《如何设计一个高效的 RESTful API》，文章不仅阐述了 RESTful 风格的基本概念，还结合实际开发中的经验，深入分析了如何设计 API 的路径、参数以及返回格式，使得接口更加灵活、高效且易于扩展。课堂上，老师讲解的算法和数据结构让我感到既陌生又深奥，而在面对那一行行晦涩的代码时，我的心中充满了不安：这些看似简短的字符，究竟隐藏着什么样的魔力，能将一个个无生命的机器变得灵动起来？起初，我对编程的兴趣仅限于解决实际问题与制作项目，后来，随着能力的提升，我逐渐开始思考自己的职业方向。
云原生架构下的AI智能编排：ScriptEcho赋能前端开发
helianying55的博客
01-22 954
在当今快速发展的数字经济时代，云原生架构已成为构建现代化应用的关键。它通过微服务、容器化和DevOps等技术，实现了应用的高可用性、可扩展性和弹性。然而，在云原生架构下，前端开发也面临着新的挑战。为了应对这些挑战，（例如ScriptEcho）应运而生，通过AI智能编排，显著提升了前端开发效率。本文将深入探讨AI智能编排在云原生架构中的作用，并以ScriptEcho为例，阐述其如何加速云原生应用的前端开发。
写一个祝你生日快乐的动画代码
10-23
编写一个简单的动画来祝福“生日快乐”通常涉及到前端技术和库，比如JavaScript配合HTML和CSS。这里我们以HTML5 Canvas为例，创建一个简单的动态文字动画效果。请注意，这个例子是基本的，如果你想要更复杂的效果...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值