当前位置：网站首页>Using Canvas to achieve web page mouse signature effect
Using Canvas to achieve web page mouse signature effect
2022-08-01 16:15:00 【Mr. Huo's virtual universe network】
Computer signature effect：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>签名</title>
<style>
* {
margin: 0;
padding: 0;
}
#canvas {
border: 1px solid black;
}
</style>
<script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="./js/xadmin.js"></script>
<script type="text/javascript" src="./data/sensor.js"></script>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div class="container">
<fieldset class="layui-elem-field" style="width: 610px; margin-left: 5px;">
<legend style="font-size: 12px;">预览</legend>
<div class="layui-field-box">
<div class="imgs" id="imgs">
<img id="imgOld" src="" style="height: 50px; width: 200px;"/>
</div>
</div>
</fieldset>
<canvas id="canvas" width="610px" height="280px" style="margin-left: 5px;" ></canvas>
<div>
<button id="clear">清空签名</button>
线条粗细
<select id="selWidth">
<option value="2">2</option>
<option value="4">4</option>
<option value="6">6</option>
<option value="9">9</option>
</select>
线条颜色
<select id="selColor">
<option value="red">red</option>
<option value="blue">blue</option>
<option value="pink">pink</option>
<option value="orange">orange</option>
</select>
<button id="imgInfo">保存签名</button>
</div>
<!-- <div class="imgs" id="imgs"></div>-->
</div>
</body>
<script type="text/javascript">
//1.获取canvas
var myCanvas = document.getElementById("canvas");
//获取2d对象
var ctx = myCanvas.getContext("2d");
//清空画布
var clear = document.getElementById("clear");
//线条
var selWidth = document.getElementById("selWidth");
// 颜色
var selColor = document.getElementById("selColor");
// 保存签名
var imgInfo = document.getElementById("imgInfo");
// Save the box
var imgs = document.getElementById("imgs");
//Controls whether lines are drawn
var isMouseMove = false;
//line position
var lastX, lastY;
var widthVal = selWidth[0].value, colorVal = selColor[0].value;
window.onload = function () {
initCanvas();
};
//初始化
function initCanvas() {
//PC端
var down = (e) => {
isMouseMove = true;
drawLine(
event.pageX - myCanvas.offsetLeft,
event.pageY - myCanvas.offsetTop,
false
);
};
let move = (e) => {
if (isMouseMove) {
drawLine(
event.pageX - myCanvas.offsetLeft,
event.pageY - myCanvas.offsetTop,
true
);
}
};
let up = (e) => {
isMouseMove = false;
};
let leave = (e) => {
isMouseMove = false;
};
myCanvas.addEventListener("mousedown", down);
myCanvas.addEventListener("mousemove", move);
myCanvas.addEventListener("mouseup", up);
myCanvas.addEventListener("mouseleave", leave);
}
//画线
function drawLine(x, y, isT) {
if (isT) {
ctx.beginPath();
ctx.lineWidth = widthVal; //设置线宽状态
ctx.strokeStyle = colorVal; //设置线的颜色状态
ctx.lineCap = 'round'
ctx.lineJoin = "round";
ctx.moveTo(lastX, lastY);
ctx.lineTo(x, y);
ctx.stroke();
ctx.closePath();
}
// The coordinate position is updated with each move
lastX = x;
lastY = y;
}
//Clear the drawing
function clearCanvas() {
imgs.innerHTML = ""
ctx.beginPath();
ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
ctx.closePath(); //可加入,可不加入
}
//线条粗细
function lineCrude() {
let activeIndex = selWidth.selectedIndex;
widthVal = selWidth[activeIndex].value;
}
//改变颜色
function setColor() {
let activeIndex = selColor.selectedIndex;
colorVal = selColor[activeIndex].value;
}
//保存图片
function saveImgInfo() {
var images = myCanvas.toDataURL('image/png');
imgs.innerHTML = `<img id="image1" src='${images}'>`
uploadAutograph();
}
clear.addEventListener("click", clearCanvas);
selWidth.addEventListener("change", lineCrude);
selColor.addEventListener("change", setColor);
imgInfo.addEventListener("click", saveImgInfo);
function dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {type:mime});
}
//上传签名
function uploadAutograph(imgData) {
let formData = new FormData();
let imagesName=new Date().getUTCMinutes()+".png";
let fileData=document.getElementById('image1');
let fileOfBlob=dataURLtoFile(fileData.src,imagesName);
formData.append("file",fileOfBlob);
let url=sensorServer.getUploadFileUrl1();
$.ajax({
url:url,
type:"post",
data:formData,
processData:false,
contentType:false,
success:function(data){
console.log(JSON.stringify(data));
if(data.msg=="操作成功"&&data.data!=null){
let uploadSuccessData=data.data;
if(uploadSuccessData!=null) {
let fileName=imagesName ; //;document.getElementById('file_1').files[0].name;
let serverUrl=uploadSuccessData.url;
let params={"fileUrl":serverUrl,"fileName":fileName};
let parm={"id":curInfo.id,"autographAttachmentId":uploadSuccessData.attachmentId};
let result=sensorServer.updateAccount(parm);//Upload save data logic
if(result==1)
{
layer.alert("上传成功！", {
icon: 6
},
function () {
//关闭当前frame
xadmin.close();
// 可以对父窗口进行刷新
xadmin.father_reload();
});
} else
{
layer.alert("上传失败！", {
icon: 6
},
function () {
//关闭当前frame
xadmin.close();
// 可以对父窗口进行刷新
xadmin.father_reload();
});
}
}else{
layer.msg("保存失败！");
}
}else{
alert(JSON.stringify(data));
layer.msg("上传失败！");
}
},
error:function(e){
alert("错误！！");
}
});
}
function getQueryVariable(variable)
{
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
var curInfo;
$(function () {
let pid = getQueryVariable("id");
var accountInfo = sensorServer.getAccountInfoById({"id": parseInt(pid)});
curInfo=accountInfo;
if(curInfo.autographAttachmentUrl!=null&&curInfo.autographAttachmentUrl!=""){
$("#imgOld")[0].src=curInfo.autographAttachmentUrl;
}
});
</script>
</html>
边栏推荐
- 百图生科卓越开发者计划全面升级暨《计算免疫问题白皮书》发布
- ESP8266-Arduino编程实例-74HC595位移寄存驱动
- mysql 面试题
- 面试必问的HashCode技术内幕
- Ant discloses the open source layout of core basic software technology for the first time
- 计算机系统与网络安全技术——第一章——信息安全概述——1.1-网络安全定义——什么是信息？
- 预定义和自定义
- 美国弗吉尼亚大学、微软 | Active Data Pattern Extraction Attacks on Generative Language Models（对生成语言模型的主动数据模式提取攻击）
- 2.8K 120Hz触控双屏加持 灵耀X 双屏Pro 2022让办公无惧想象
- 【无标题】
猜你喜欢
随机推荐
MySQL查询上的问题
2.8K 120Hz touch dual-screen blessing Lingyao X dual-screen Pro 2022 makes the office without fear of imagination
14年测试人最近的面试经历，值得借鉴√
lombok builder重写
请问下怎么取数据库中上一个小时的数据到odps进行实时节点的同步呢
【无标题】
uwsgi配置文件启动
【建议收藏】技术面必考题：多线程、多进程
Flink - SQL can separate a certain parallelism of operator node configuration?
使用Canvas 实现手机端签名
PAT 甲级 A1030 Travel Plan
27英寸横置大屏+实体按键，全新探险者才是安全而合理的做法！
暑气渐敛，8月让我们开源一夏！
【Unity,C＃】哨兵射线触发器模板代码
30分钟成为Contributor｜如何多方位参与OpenHarmony开源贡献？
Eslint syntax error is solved
到底什么才是真正的商业智能（BI）
华盛顿大学、Allen AI 等联合 | RealTime QA: What's the Answer Right Now?(实时 QA：现在的答案是什么？)
软测面试如何介绍项目？要做哪些技术准备？
Zhaoqi Science and Technology Innovation Platform attracts talents and attracts talents, and attracts high-level talents at home and abroad