vue中怎么根据选择的名称 生成印章图片

项目中需要根据选择的印章名称,动态生成印章 ,印章下方显示当前的日期 代码如下

<template>
  <div>
    <label for="name">选择名称:</label>
    <select id="name" v-model="selectedName">
      <option value="name1">名称1</option>
      <option value="name2">名称2</option>
      <option value="name3">名称3</option>
    </select>

    <button @click="generateStampImage">生成印章图片</button>

    <div ref="stampContainer" v-if="stampGenerated">
      <img :src="stampImage" alt="印章" />
    </div>
  </div>
</template>

export default {
  data() {
    return {
      selectedName: '',
      stampGenerated: false,
      stampImage: ''
    };
  },
methods: {
    generateStampImage() {
      const stampText = this.selectedName;
      const canvas = document.createElement("canvas");
      canvas.width = 100; // 缩小印章尺寸
      canvas.height = 100;

      const ctx = canvas.getContext("2d");

      // 绘制圆形边框
      ctx.beginPath();
      ctx.arc(80, 80, 75, 0, 2 * Math.PI, false);
      ctx.fillStyle = "white";
      ctx.fill();
      ctx.lineWidth = 3;
      ctx.strokeStyle = "red";
      ctx.stroke();

      // 绘制五角星
      this.drawStar(ctx, 80, 80, 5, 30, 15); // 适当调整五角星大小
      ctx.fillStyle = "red";
      ctx.fill();

      // 绘制弧形文本
      this.drawCircularText(ctx, stampText, 80, 80, 60, -Math.PI / 2, "red"); // 调整文本的起始角度

      // 绘制日期
      ctx.font = "14px Arial";
      ctx.fillStyle = "red";
      ctx.textAlign = "center";
      ctx.fillText(this.currentDate, 80, 120); // 日期显示在五角星下方

      const stampImage = canvas.toDataURL("image/png");
      this.stampGenerated = true;
      this.stampImage = stampImage;
    },
    drawStar(ctx, cx, cy, spikes, outerRadius, innerRadius) {
      let rot = (Math.PI / 2) * 3;
      let x = cx;
      let y = cy;
      const step = Math.PI / spikes;

      ctx.beginPath();
      ctx.moveTo(cx, cy - outerRadius);
      for (let i = 0; i < spikes; i++) {
        x = cx + Math.cos(rot) * outerRadius;
        y = cy + Math.sin(rot) * outerRadius;
        ctx.lineTo(x, y);
        rot += step;

        x = cx + Math.cos(rot) * innerRadius;
        y = cy + Math.sin(rot) * innerRadius;
        ctx.lineTo(x, y);
        rot += step;
      }
      ctx.lineTo(cx, cy - outerRadius);
      ctx.closePath();
    },
     drawCircularText(ctx, text, x, y, radius, color) {
      ctx.fillStyle = color;
      ctx.font = '16px Arial';
      ctx.textBaseline = 'middle';

      let startAngle = -Math.PI; // 开始于水平左侧
      let totalAngle = 0; // 计算总角度

      // 计算文本占据的总角度
      for (let i = 0; i < text.length; i++) {
        totalAngle += ctx.measureText(text[i]).width / radius;
      }

      // 调整开始角度,使文本居中
      startAngle += (Math.PI - totalAngle) / 2;

      for (let i = 0; i < text.length; i++) {
        const char = text[i];
        const charWidth = ctx.measureText(char).width;
        const angle = startAngle + charWidth / (2 * radius);

        ctx.save();
        ctx.translate(x + Math.cos(angle) * radius, y + Math.sin(angle) * radius);
        ctx.rotate(angle + Math.PI / 2);
        ctx.fillText(char, -charWidth / 2, 0);
        ctx.restore();

        startAngle += charWidth / radius;
      }
    },
}

}

使用的地方调用: this.generateStampImage();即可
生成的效果如下
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/180766.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

virtualbox 扩展磁盘后在win10 虚拟机看不到新扩展的空间

造成标题中问题的原因是&#xff0c;扩展的是win10.vdi 的空间&#xff0c;虚拟机使用使用的下边那个以uuid命名的空间&#xff0c;将这个磁盘的虚拟分配空间也调整到150G . 然后在win10的磁盘管理里就可以看到新加的空间了。之后再点相应的盘进行扩展卷操作即可。

Android跨进程传图片或者大数据(解决TransactionTooLargeException)

跨进程传图片方案 直接intent传bitmap使用文件读写intent传递自定义binder&#xff0c;binder中传递image使用网络传输 一、直接intent传bitmap 优势 使用简单 劣势 相关代码可能有侵入性&#xff0c;必须在四大组件中接收。 intent传递数据的总大小是1MB&#xff0c;其中…

SA实战 ·《SpringCloud Alibaba实战》第14章-服务网关加餐:SpringCloud Gateway核心技术

大家好,我是冰河~~ 一不小心《SpringCloud Alibaba实战》专栏都更新到第14章了,再不上车就跟不上了,小伙伴们快跟上啊! 在《SpringCloud Alibaba实战》专栏前面的文章中,我们实现了用户微服务、商品微服务和订单微服务之间的远程调用,并且实现了服务调用的负载均衡。也基…

geemap学习笔记012:如何搜索Earth Engine Python脚本

前言 本节主要是介绍如何查询Earth Engine中已经集成好的Python脚本案例。 1 导入库 !pip install geemap #安装geemap库 import ee import geemap2 搜索Earth Engine Python脚本 很简单&#xff0c;只需要一行代码。 geemap.ee_search()使用方法 后记 大家如果有问题需…

前端处理返回数据为数组对象且对象嵌套数组并重名的数据,合并名称并叠加数据

前端处理返回数据为数组对象且对象嵌套数组并重名的数据&#xff0c;合并名称并叠加数据 var newList[]; var table{}; var dataObj{}; var finalList[]; var tableData[{brName:营业部,dateStr:2023-11-23,tacheArr:[{dealCnt:20,tacheName:奔驰}]},{brName:营业部,dateStr:2…

想自学软件测试?一般人我还是劝你算了吧。。。

&#x1f4e2;专注于分享软件测试干货内容&#xff0c;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01;&#x1f4e2;交流讨论&#xff1a;欢迎加入我们一起学习&#xff01;&#x1f4e2;资源分享&#xff1a;耗时200小时精选的「软件测试」资…

python+pytest接口自动化:token关联登录这样做,阿里p8都直呼牛逼!!!

在PC端登录公司的后台管理系统或在手机上登录某个APP时&#xff0c;经常会发现登录成功后&#xff0c;返回参数中会包含token&#xff0c;它的值为一段较长的字符串&#xff0c;而后续去请求的请求头中都需要带上这个token作为参数&#xff0c;否则就提示需要先登录。 这其实就…

如何在Linux系统上检测GPU显存和使用情况?

如何在Linux系统上检测GPU显存和使用情况&#xff1f; 在Linux系统上&#xff0c;你可以使用一些命令行工具来检测GPU显存和使用情况。以下是一些常用的方法&#xff1a; 1. 使用nvidia-smi&#xff08;仅适用于NVIDIA GPU&#xff09; 如果你使用的是NVIDIA的显卡&#xff0…

小猪优版的前世今生:从籍籍无名到行业瞩目,再到骤变的风暴中心

1. 前世&#xff1a;籍籍无名到行业新星的崛起 小猪优版在初创时期&#xff0c;并不被大众所知。然而&#xff0c;它凭借对短视频行业的深度洞察&#xff0c;以及独特的商业模式&#xff0c;开始在这个领域崭露头角。它提供了一个平台&#xff0c;不仅助力内容创作者更好地展现…

1688商品详情数据接口(1688.item_get)

1688商品详情数据接口是一种程序化的接口&#xff0c;通过这个接口&#xff0c;商家或开发者可以使用自己的编程技能&#xff0c;对1688平台上的商品信息进行查询、获取和更新。这个接口允许商家根据自身的需求&#xff0c;获取商品的详细信息&#xff0c;例如价格、库存、描述…

中医馆管理系统预约小程序效果如何

人们生活水平提升的同时&#xff0c;无论是工作压力还是自然压力&#xff0c;都给身体带来了一些损伤&#xff0c;如各科常见病、多发病、慢性病及疑难杂症等。中医具有治未病的优势&#xff0c;因此对患者而言&#xff0c;找中医诊治是一个很好的选择&#xff0c;而无论中医院…

财报解读:电商GMV增长30%后,快手将坚守本地生活?

快手逐渐讲好了其高质量成长的故事。 根据财报&#xff0c;快手三季度业绩超出预期&#xff0c;其中&#xff0c;营收279.5亿元&#xff0c;同比增长20.8%&#xff1b;调整后净利润31.7亿元&#xff0c;同比扭亏为盈。 而联系市场环境来看&#xff0c;三季度广告、电商市场较…

2 使用React构造前端应用

文章目录 简单了解React和Node搭建开发环境React框架JavaScript客户端ChallengeComponent组件的主要结构渲染与应用程序集成 第一次运行前端调试将CORS配置添加到Spring Boot应用使用应用程序部署React应用程序小结 前端代码可从这里下载&#xff1a; 前端示例 后端使用这里介…

【C语言】函数(三):为什么要有函数声明

目录 前言函数定义函数声明为什么要有函数声明原因1&#xff1a;分模块编程原因2&#xff1a;静态库文件 前言 在上文中已经介绍了函数调用&#xff0c;分为传值调用和传址调用&#xff0c;以及嵌套调用和链式访问。在本文中将介绍函数的声明和定义&#xff0c;以及为什么要有函…

使用 Pinia 的五个技巧

在这篇文章中&#xff0c;想与大家分享使用 Pinia 的五大技巧。 以下是简要总结&#xff1a; 不要创建无用的 getter在 Option Stores 中使用组合式函数&#xff08;composables&#xff09;对于复杂的组合式函数&#xff0c;使用 Setup Stores使用 Setup Stores 注入全局变量…

SQL零基础入门教程,贼拉详细!贼拉简单! 速通数据库期末考!(十二)

SUM&#xff08;&#xff09;求和函数 SUM() 函数返回数值列的总和。 语法&#xff1a; SELECT SUM(column_name) FROM table_name;column_name:字段名&#xff08;必须是数值字段&#xff09; table_name&#xff1a;表名 示例&#xff1a; 查询每位同学的总分&#xff1a…

2、单片机及开发板介绍

单片机介绍 单片机&#xff0c;英文Micro Controller Unit,简称&#xff1a;MCU 内部集成&#xff1a;CPU、RAM(随机存储器)、ROM&#xff08;只读存储器&#xff09;、定时器、中断系统、通讯接口等 作用&#xff1a;信息采集&#xff08;传感器&#xff09;、处理&#xff0…

[autojs]利用console实现悬浮窗日志输出

"ui"; ui.layout(<vertical><button id"autoFloatWindow" text"开启悬浮窗" textSize"15sp" /><button id"autoService" text"开启无障碍服务" textSize"15sp" /><button id"…

聚水潭连接API,集成无代码开发,优化电商平台运营

聚水潭连接API&#xff0c;实现电商平台的高效运营 聚水潭作为一款SaaS ERP解决方案&#xff0c;通过其出色的产品和服务&#xff0c;迅速在市场上占据了一席之地。而其无代码开发的特点&#xff0c;为电商系统和客服系统的连接与集成提供了便利。聚水潭开放平台的优势在于&am…

[ChatGPT]ChatGPT免费,不用翻墙!?——你需要的装备

系列文章目录 【AIGC】服务于人类&#xff5c;一种新的人工智能技术-CSDN博客 文章目录 目录 系列文章目录 文章目录 前言 一、天意云网站 ​编辑 二、使用步骤 可以看到有云服务器、Rstudio以及我们的ChatGPT&#xff0c;我这次主要分享ChatGPT&#xff0c;其他的有机会我再给…