vue+canvas实现逐字手写效果

在pc端进行逐字手写的功能。用户可以在一个 inputCanvas 上书写单个字,然后在特定时间后将这个字添加到 outputCanvas 上,形成一个逐字的手写效果。用户还可以保存整幅图像或者撤销上一个添加的字。

<template><div class="container" v-if="!disabled"><div class="tipCn"><div>请您在右侧区域内逐字手写以下文字,全部写完后点击保存!</div><div>{{ ruleForm.sqcn }}</div></div><div style="margin: 0px 20px"><span class="dialog-footer"><el-button @click="undoChar" type="danger" :icon="RefreshRight">撤销上一个字</el-button><el-button @click="saveImage" type="primary" :icon="Check">保存</el-button></span><canvasref="inputCanvas"class="input-canvas":width="canvasWidth":height="canvasHeight"@mousedown="startDrawing"@mousemove="draw"@mouseup="stopDrawing"@mouseleave="stopDrawing"></canvas></div><canvas ref="outputCanvas" class="output-canvas" :width="outputWidth" :height="outputHeight"></canvas></div><img class="Signature" v-else :src="resultImg" alt="commitment Image" />
</template><script setup>
import { ref, onMounted, nextTick, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import fileService from "@/api/sys/fileService.js";
import { Check, RefreshRight } from "@element-plus/icons-vue";
import knsService from "@/api/sys/kns/knsService";const canvasWidth = 300;
const canvasHeight = 300;
const isDrawing = ref(false);
const startX = ref(0);
const startY = ref(0);
const charObjects = ref([]);
const timer = ref(null);
const delay = 1000; // 1秒延迟
let outputWidth = 300;
let outputHeight = ref(50);
let resultImg = ref("");
let context = null;
let outputContext = null;const inputCanvas = ref(null);
const outputCanvas = ref(null);let ruleForm = ref({});const emit = defineEmits(["update:modelValue"]);
const props = defineProps({modelValue: {type: [Number, String],default: ""},disabled: {type: Boolean,default: false}
});// 当输入框内容变化时触发更新父组件的 value
watch(resultImg,(newValue) => {emit("update:modelValue", newValue);},{ deep: true }
);watch(() => props.modelValue,(newValue) => {resultImg.value = newValue;},{ deep: true, immediate: true }
);onMounted(() => {if (!props.disabled) {getData();context = inputCanvas.value.getContext("2d");outputContext = outputCanvas.value.getContext("2d");context.strokeStyle = "#000000";context.lineWidth = 4;context.lineCap = "round";context.lineJoin = "round";outputContext.strokeStyle = "#000000";outputContext.lineWidth = 3;outputContext.lineCap = "round";outputContext.lineJoin = "round";}
});// 获取承诺
const getData = async () => {const res = await knsService.getSettingData();ruleForm.value = res[0];
};const startDrawing = (e) => {if (timer.value) {clearTimeout(timer.value);timer.value = null;}isDrawing.value = true;startX.value = e.offsetX;startY.value = e.offsetY;context.beginPath();context.moveTo(startX.value, startY.value);
};const draw = (e) => {if (!isDrawing.value) return;context.lineTo(e.offsetX, e.offsetY);context.stroke();
};const stopDrawing = () => {if (isDrawing.value) {isDrawing.value = false;context.closePath();timer.value = setTimeout(addChar, delay);}
};const addChar = () => {const canvas = inputCanvas.value;const dataUrl = canvas.toDataURL("image/png");charObjects.value.push(dataUrl);clearCanvas();redrawOutputCanvas();
};const clearCanvas = () => {const canvas = inputCanvas.value;context.clearRect(0, 0, canvas.width, canvas.height);
};const undoChar = () => {if (charObjects.value.length > 0) {charObjects.value.pop();redrawOutputCanvas();if (charObjects.value.length === 0) {outputHeight.value = 50; // 如果字符对象为空,则将输出画布高度设置为 50outputCanvas.value.height = outputHeight.value; // 更新画布高度}}
};const redrawOutputCanvas = () => {outputContext.clearRect(0, 0, outputWidth, outputHeight.value);const charSize = 50; // 调整字符大小const charSpacing = 50; // 调整字符间距const maxCharsPerRow = Math.floor(outputWidth / charSize); // 每行最大字符数const numRows = Math.ceil(charObjects.value.length / maxCharsPerRow); // 计算行数const newOutputHeight = numRows * charSize; // 动态计算输出画布的高度if (newOutputHeight !== outputHeight.value) {outputHeight.value = newOutputHeight;outputCanvas.value.height = outputHeight.value; // 更新画布高度}nextTick(() => {charObjects.value.forEach((char, index) => {const rowIndex = Math.floor(index / maxCharsPerRow); // 当前字符的行索引const colIndex = index % maxCharsPerRow; // 当前字符的列索引const img = new Image();img.onload = () => {outputContext.drawImage(img, colIndex * charSpacing, rowIndex * charSpacing, charSize, charSize); // 绘制字符图片到输出画布上};img.src = char;});});
};const saveImage = () => {if (charObjects.value.length === 0) {ElMessage.error("请输入!");return false;}const canvas = outputCanvas.value;const dataUrl = canvas.toDataURL("image/png");console.log(dataUrl, "dataUrldataUrldataUrl"); // 您可以将此图片上传或保存// 生成带有当前日期和时间的文件名const now = new Date();const filename = `承诺-${now.getFullYear()}${padZero(now.getMonth() + 1)}${padZero(now.getDate())}${padZero(now.getHours())}${padZero(now.getMinutes())}${padZero(now.getSeconds())}.jpg`;const blob = dataURLtoBlob(dataUrl);const tofile = blobToFile(blob, filename);setTimeout(async () => {const formData = new FormData();formData.append("file", tofile, tofile.name);formData.append("fileType", 9);console.log(formData, "formDataformData");const res2 = await fileService.uploadFile(formData);resultImg.value = res2;console.log(resultImg.value, "resultImg.value");});ElMessage.success("保存成功!");
};const dataURLtoBlob = (dataurl) => {const arr = dataurl.split(",");const mime = arr[0].match(/:(.*?);/)[1];const bstr = atob(arr[1]);let n = bstr.length;const u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new Blob([u8arr], { type: mime });
};const blobToFile = (theBlob, fileName) => {theBlob.lastModifiedDate = new Date();theBlob.name = fileName;return theBlob;
};const padZero = (num) => {return num < 10 ? "0" + num : num;
};
</script><style scoped lang="scss">
.container {display: flex;align-items: flex-start;justify-content: flex-start;.output-canvas {border: 1px solid #ddd;}img {width: 50px;height: 50px;margin: 1px;}.input-canvas {border-radius: 5px;border: 1px dashed #dddee1;}.dialog-footer {display: flex;justify-content: space-between;margin-bottom: 10px;}.tipCn {div:nth-child(1) {color: #ff6f77;font-size: 12px;}div:nth-child(2) {background-color: #ecf5ff;padding: 0px 10px;border-radius: 4px;color: #3c9cff;font-size: 14px;text-align: left;}}
}
.Signature {width: 500px;height: 150px;margin-top: 10px;border: 1px solid #dddee1;}
</style>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

小红书-社区搜索部 (NLP、CV算法实习生) 一面面经

&#x1f604; 整个流程按如下问题展开&#xff0c;用时60min左右面试官人挺好&#xff0c;前半部分问问题&#xff0c;后半部分coding一道题。 各位有什么问题可以直接评论区留言&#xff0c;24小时内必回信息&#xff0c;放心~ 文章目录 1、自我介绍2、介绍下项目&#xff…

金额计算导致的错误问题汇总解决

在日常的开发中&#xff0c;前端计算金额是非常常见&#xff0c;如果不够仔细&#xff0c;考虑不够周全的话&#xff0c;很容易犯错的&#xff0c;金额这个东西一但错了是很严重的&#xff0c;因此总结一些常见的错误&#xff1a; 1.最重要的&#xff0c;涉及到计算的参数一定要…

关于做事方式的小讨论

大家好&#xff0c;我是阿赵。   之前五一劳动节期间&#xff0c;看到了这么一个新闻&#xff1a;某动物园内部收费项目五一期间涨价&#xff0c;喂长颈鹿的树叶&#xff0c;一枝需要30元。然后新闻下面的评论就炸锅了&#xff0c;纷纷的指责动物园太黑心&#xff0c;一枝树叶…

淄博公司商标驳回复审条件及流程

商标是人工审查的&#xff0c;所以不同的人会有不同的想法和意见&#xff0c;导致同一案件的审查结果不同。特别是商标审查周期缩短到5个月&#xff0c;全国平均每个工作日有1万多个商标提交申请&#xff0c;而全国只有一个商标审查单位——国家商标局提交申请。这种情况下&…

从入门到精通:掌握Scrapy框架的关键技巧

在当今信息爆炸的时代&#xff0c;获取并利用网络数据成为了许多行业的核心竞争力之一。而作为一名数据分析师、网络研究者或者是信息工作者&#xff0c;要想获取网络上的大量数据&#xff0c;离不开网络爬虫工具的帮助。而Scrapy框架作为Python语言中最为强大的网络爬虫框架之…

ubuntu当前登录用户IP验证

设置一个白名单列表检查到登录用户IP信息不在白名单&#xff0c;发送信息到指定邮箱 #!/bin/bash# 定义常用IP地址列表文件 KNOWN_IP_FILE"/path/to/known_ips.txt" # 替换为实际路径# 定义邮件接收者 EMAIL_TO"test163.com"# 定义日志文件 LOG_FILE&quo…

2024-5-23

今日安排&#xff1a; 继续审计 nf_tables 源码 && iptables 相关学习♥♥♥♥♥复现 CTF 相关题目♥♥♥♥mount 的使用&#xff0c;学习 namespace (昨昨昨昨昨昨昨昨昨昨昨昨昨天残留的任务)&#xff08;&#xff1a;看我能搁到什么时候♥♥♥静不下心学习新知识就…

qmt量化交易策略小白学习笔记第11期【qmt编程之获取股票订单流数据--原生Python】

qmt编程之获取股票订单流数据 qmt更加详细的教程方法&#xff0c;会持续慢慢梳理。 也可找寻博主的历史文章&#xff0c;搜索关键词查看解决方案 &#xff01; 感谢关注&#xff0c;需免费开通量化回测与咨询实盘权限&#xff0c;可以和博主联系&#xff01; 获取股票订单流…

Java版工程行业管理系统-提升工程项目的综合管理能力

工程项目管理涉及众多环节和角色&#xff0c;如何实现高效协同和信息共享是关键。本文将介绍一个采用先进技术框架的Java版工程项目管理系统&#xff0c;该系统支持前后端分离&#xff0c;功能全面&#xff0c;可满足不同角色的需求。从项目进度图表到施工地图&#xff0c;再到…

Java泛型类和方法声明

泛型方法 protected <E> TableDataInfo<E> getDataTable(List<E> list){TableDataInfo<E> rspData new TableDataInfo();rspData.setCode(HttpStatus.SUCCESS);rspData.setMsg("查询成功");rspData.setRows(list);rspData.setTotal(new Pag…

C++_vector操作使用

文章目录 &#x1f680;1.1 vector介绍&#x1f680;1.2 vector的初始化&#x1f680;1.3 vector的常用内置函数&#x1f680;1.4 vector的遍历 &#x1f680;1.1 vector介绍 vector是表示可变大小数组的序列容器。就像数组一样&#xff0c;vector也采用的连续存储空间来存储元…

MySQL主从复制(docker搭建)

文章目录 1.MySQL主从复制配置1.主服务器配置1.拉取mysql5.7的镜像2.启动一个主mysql&#xff0c;进行端口映射和目录挂载3.进入/mysql5.7/mysql-master/conf中创建my.cnf并写入主mysql配置1.进入目录2.执行命令写入配置 4.重启mysql容器&#xff0c;使配置生效5.进入主mysql&a…

python篇-pywinauto使用-持续更新

1- pywinauto 中的uia是什么意思&#xff1f; 在pywinauto库中&#xff0c;uia指的是UI Automation&#xff0c;这是Windows操作系统提供的一种技术框架&#xff0c;用于实现用户界面(UI)的自动化测试和辅助功能访问。UI Automation是微软从Windows Vista开始引入的核心技术&am…

2024年电工杯高校数学建模竞赛(B题) 建模解析| 大学生平衡膳食食谱的优化设计 |小鹿学长带队指引全代码文章与思路

我是鹿鹿学长&#xff0c;就读于上海交通大学&#xff0c;截至目前已经帮200人完成了建模与思路的构建的处理了&#xff5e; 本篇文章是鹿鹿学长经过深度思考&#xff0c;独辟蹊径&#xff0c;实现综合建模。独创复杂系统视角&#xff0c;帮助你解决电工杯的难关呀。 本题&…

面试八股之MySQL篇5——主从同步原理篇

&#x1f308;hello&#xff0c;你好鸭&#xff0c;我是Ethan&#xff0c;一名不断学习的码农&#xff0c;很高兴你能来阅读。 ✔️目前博客主要更新Java系列、项目案例、计算机必学四件套等。 &#x1f3c3;人生之义&#xff0c;在于追求&#xff0c;不在成败&#xff0c;勤通…

IP地址的风险画像及其应用

在现代互联网环境中&#xff0c;IP地址不仅是设备在网络中的唯一标识符&#xff0c;还是分析网络安全和风险管理的重要工具。IP地址的风险画像通过分析IP地址的行为和相关数据&#xff0c;揭示潜在的安全威胁&#xff0c;为企业和组织提供有效的风险管理方案。本文将探讨IP地址…

齐业成工程行业数字化预算费控方案:编制、执行、数据分析全过程闭环管理

工程建设企业具备项目周期长、业务复杂的特点&#xff0c;预算费控涉及内部管理、项目、客户、收支等&#xff0c;账目多、且难控。 在工程企业日常预算费控过程中存在着诸多挑战&#xff1a; • 数据核对难&#xff1a;涉及数据多&#xff0c;需多部门协同填写&#xff0c;需…

人工智能的阴暗面:犯罪分子如何利用 AI 进行欺诈

在当今数字化时代&#xff0c;人工智能&#xff08;AI&#xff09;正迅速成为推动各行各业生产力和创新的关键力量&#xff0c;而一些不法分子也开始探索如何将这些先进的工具用于他们自己的非法目的。从网络钓鱼到深度伪造&#xff0c;再到人肉搜索、越狱服务和身份验证系统的…

【动态维护树的直径】【HBCPC2023】I. Colorful Tree

题目 https://codeforces.com/gym/105139/problem/I 思路 其实相当于是分别求黑色点和白色点所构成的树的直径。 当两个连通块连在了一起&#xff0c;假设它们的直径是 ( u 1 , v 1 ) &#xff0c; ( u 2 , v 2 ) (u_1,v_1)&#xff0c;(u_2,v_2) (u1​,v1​)&#xff0c;(u…

【程序填空】三维点坐标平移(增量运算符重载)

题目描述 定义一个三维点Point类&#xff0c;利用友元函数重载""和"--"运算符&#xff0c;并区分这两种运算符的前置和后置运算。 表示x\y\z坐标都1&#xff0c;--表示x\y\z坐标都-1 请完成以下程序填空 输入 只有一行输入&#xff0c;输入三个整数&a…