前端canvas實(shí)現(xiàn)電子簽約完成線上簽署功能
更新時(shí)間：2025年01月09日 08:35:32 作者：久宇詩(shī)
最近發(fā)現(xiàn)現(xiàn)在租房還是簽合同,越來(lái)越多采用電子簽約的方式進(jìn)行,好處不用多說(shuō)節(jié)約成本,節(jié)約時(shí)間,下面我們來(lái)看看使用canvas實(shí)現(xiàn)電子簽約完成線上簽署功能
最近發(fā)現(xiàn)現(xiàn)在租房還是簽合同，越來(lái)越多采用電子簽約的方式進(jìn)行，好處不用多說(shuō)節(jié)約成本，節(jié)約時(shí)間。抱著好奇的心理，嘗試自己動(dòng)手實(shí)現(xiàn)一個(gè)電子簽。原來(lái)并不復(fù)雜主要通過(guò)了canvas繪畫(huà)能力進(jìn)行實(shí)現(xiàn)的。
主要功能
創(chuàng)建合同模板：使用HTML和CSS創(chuàng)建一個(gè)合同模板。
添加簽名區(qū)域：在合同模板中添加一個(gè)區(qū)域用于簽名。
實(shí)現(xiàn)簽名功能：使用
將簽名保存到合同模板：將簽名繪制到合同模板中。
提供下載功能：允許用戶下載帶有簽名的合同png/pdf格式。
展示效果如下
實(shí)現(xiàn)
主要三個(gè)重要點(diǎn)：實(shí)現(xiàn)簽名，簽名放到指定位置，保存pdf/png
1. 實(shí)現(xiàn)簽名
const canvas = $('#signatureCanvas')[0]// document.getElementById('signatureCanvas');
const ctx = canvas.getContext('2d');
let drawing = false;
$('#signatureCanvas').on('mousedown touchstart', (e) => {
drawing = true;
draw(e);
});
$('#signatureCanvas').on('mousemove touchmove', (e) => {
if (drawing) {
draw(e);
}
});
$('#signatureCanvas').on('mouseup mouseout touchend', () => {
drawing = false;
ctx.beginPath();
});
function draw(e) {
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
ctx.lineWidth = 4;
ctx.lineCap = 'round';
ctx.strokeStyle = '#000000';
ctx.lineTo(x, y);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(x, y);
}
2. 簽名放到指定位置
//取消簽名
document.getElementById('clearButton').addEventListener('click', () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
});
// 保存簽名
document.getElementById('saveButton').addEventListener('click', () => {
const dataURL = canvas.toDataURL();
let name = '.' + signName
if (name) {
const signTexts = document.querySelectorAll(name);
signTexts.forEach(signText => {
signText.style.backgroundImage = `url(${dataURL})`;
signText.style.backgroundSize = 'cover';
signText.textContent = ''; // 清空文本內(nèi)容
});
$('.pop').hide();
}
});
3. 保存pdf/png
這里用到了html2canvas保存圖片格式，html2pdf保存pdf格式
// 下載簽名與輸入完成后的后合同
$('#downloadAgree').click(function () {
// 你可以指定要轉(zhuǎn)換為PDF的元素
const element = document.body;
/*
html2pdf()
.from(element)
.save('page.pdf');
*/
// 將當(dāng)前頁(yè)面保存為png格式
html2canvas(element).then(canvas => {
// 創(chuàng)建一個(gè)a標(biāo)簽來(lái)下載PNG文件
const link = document.createElement('a');
link.href = canvas.toDataURL('image/png');
link.download = 'page.png';
element.appendChild(link);
link.click();
element.removeChild(link);
});
});
完成代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="author" content="cypking"></meta>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
</head>
<style>
html,
body {
height: 100%;
width: 100%;
padding: 20px;
}
.pop {
height: 100vh;
width: 100vw;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, .5);
display: flex;
align-items: center;
justify-content: center;
}
.mark {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
h1 {
text-align: center;
margin: auto;
}
.sign {
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
}
input {
display: inline-block;
margin-left: 10px;
margin-top: 10px;
height: 24px;
line-height: 24px;
}
dl {
display: flex;
flex-direction: column;
align-items: flex-end;
}
dt,
dd {
display: flex;
align-items: center;
}
.sign-text,
.sign-date,
.sign-text1,
.sign-date1 {
margin-top: 10px;
height: 40px;
width: 80px;
border: 1px dashed #ccc;
display: flex;
align-items: center;
text-align: center;
justify-content: center;
border-radius: 4px;
cursor: pointer;
}
#signatureCanvas {
background-color: white;
}
#downloadAgree {
display: inline-block;
margin: 20px auto 40px;
}
.controlPanel {
position: fixed;
bottom: 20px;
right: 20px;
}
.party {
width: 50px;
height: 50px;
border-radius: 100%;
border: 1px dashed black;
position: relative;
margin-bottom: 20px;
}
.partya::after {
content: '甲';
width: 16px;
height: 16px;
border-radius: 100%;
font-size: 12px;
line-height: 16px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.partyb::after {
content: '乙';
width: 16px;
height: 16px;
border-radius: 100%;
font-size: 12px;
line-height: 16px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
</style>
<body>
<span>??</span>
<!-- 合同 -->
<div class="agreement">
<h1> 居住房屋租賃合同</h1>
<br />
<br>出租人 (甲方): <input type="text" placeholder="請(qǐng)輸入" />
<br>證件類型及編號(hào):<input type="text" placeholder="請(qǐng)輸入" />
<br>
<br>承租人 (乙方):<input type="text" placeholder="請(qǐng)輸入" />
<br>證件類型及編號(hào):<input type="text" placeholder="請(qǐng)輸入" />
<br>
<br>根據(jù)《中華人民共和國(guó)民法典》等有關(guān)法律、法規(guī)的規(guī)定，甲、乙雙方在平等、自愿、公平和誠(chéng)實(shí)信用的基礎(chǔ)上，經(jīng)協(xié)商一致，就乙方承租甲方可依法出租的房屋事宜，訂立本合同。
<br>
<br>租金及支付方式
<br>租賃起止日期: 2025-02-01 至 2026-02-01
<br>租賃期限:1年
<br>
<br>方式①
<br>租金付款方式:年付****12元人民幣
<br>押金：***元人民幣
<br>總金額：***元人民幣
<br>（大寫(xiě)）：***
<br>期數(shù)：1次
<br>
<br>租客身份信息
<br>姓名:<input type="text" placeholder="請(qǐng)輸入" />
<br>性別:<input type="text" placeholder="請(qǐng)輸入" />
<br>聯(lián)系電話:<input type="text" placeholder="請(qǐng)輸入" />
<br>證件類型:<input type="text" placeholder="請(qǐng)輸入" />
<br>證件號(hào)碼:<input type="text" placeholder="請(qǐng)輸入" />
<br>工作：<input type="text" placeholder="請(qǐng)輸入" />
<br>
<br>條款內(nèi)容
<br>第一條出租房屋情況和租賃用途
<br>1-1.甲方將*** 房屋出租給乙方。該房屋建筑面積為 *** 平方米。
<br>1-2.乙方向甲方承諾，承租該房屋僅用作居住使用。
<br>
<br>第二條交付日期和租賃期限
<br>2-1.甲、乙雙方約定，該房屋租賃期起止時(shí)間 2025-02-01 至 2026-02-01
<br>2-2.雙方同意，甲方于 *** 前將該房屋交付給乙方，由乙方進(jìn)行驗(yàn)收。
<br>
<br>第三條 租金及支付方式
<br>3-1.乙方使用 年付，即在租賃期限內(nèi)一次性付清支付房租。
<br>3-2.甲乙雙方約定，在租賃期間內(nèi)，該房屋采用方式①進(jìn)行支付，房屋押金為 ***元，月租金 *** 元，一次性繳納費(fèi)用*** 元，。(注:
雙方約定的租金為甲方凈得租金)最后一期租期不足期的，以實(shí)際居住天數(shù)計(jì)算該期租金。在租賃期間內(nèi)，未經(jīng)雙方協(xié)商一致，任何一方不得擅自調(diào)整租金標(biāo)準(zhǔn)。
<br>3-3.該房屋租賃期滿后，甲乙雙方協(xié)商一致續(xù)租的，乙方須支付甲方一個(gè)月租金作為甲方服務(wù)費(fèi)，則戶屋押金自動(dòng)轉(zhuǎn)為該房屋續(xù)租押金，不足部分(若有)由乙方補(bǔ)足。租賃期滿后甲、乙雙方確認(rèn)不續(xù)租或本合同解除后，房屋押金除用以抵扣應(yīng)由乙方承擔(dān)但尚未交納的費(fèi)用(包括但不限于租金、違約金等本合同約定由乙方承擔(dān)的費(fèi)用)
外，剩余部分 (若有) 應(yīng)無(wú)息退還乙方。
<br>
<br>第四條其他相關(guān)費(fèi)用
<br>4-1.租賃期限內(nèi)，該房屋所發(fā)生的:水費(fèi)、電費(fèi)、煤氣費(fèi)、有線電視費(fèi)、網(wǎng)絡(luò)寬帶費(fèi)、物業(yè)管理費(fèi)、室內(nèi)設(shè)施維修費(fèi) (人為使用不當(dāng)?shù)膽?yīng)由乙方承擔(dān)的除外)、保潔費(fèi)、暖氣費(fèi)中，甲方承擔(dān)的費(fèi)用為:物業(yè)管理費(fèi)、暖氣費(fèi)。
<br>除甲方承擔(dān)的費(fèi)用外，其他費(fèi)用均由乙方承擔(dān)；
<br>4-2.甲方應(yīng)依法收取本條項(xiàng)下費(fèi)用(費(fèi)用標(biāo)準(zhǔn)以國(guó)家電網(wǎng)、當(dāng)?shù)厝細(xì)饧瘓F(tuán)、自來(lái)水公司等服務(wù)提供商制定的為準(zhǔn))。
<br>
<br>第五條提供材料
<br>（一）本人及同住人員，真實(shí)有效身份證件正反面照片或紙質(zhì)版復(fù)印件一份
<br>（二）本人及同住人員聯(lián)系方式
<br>（三）寵物種類及數(shù)量
<br>
<br>第六條 房屋使用要求和維修責(zé)任
<br>5-1.甲方應(yīng)確保該房屋交付時(shí)符合規(guī)定的安全條件。乙方入住 30 天內(nèi)附屬設(shè)施、設(shè)備非乙方使用不當(dāng)或不合理使用有損壞或故障時(shí)，甲方負(fù)責(zé)維修;乙方入住超過(guò) 30
天后，附屬設(shè)施、設(shè)備有損壞或故障時(shí)由乙方自行維修解決，甲方不負(fù)責(zé)維修。
<br>5-2.乙方應(yīng)對(duì)該房屋的使用安全負(fù)責(zé)。租賃期間，乙方應(yīng)合理使用并愛(ài)護(hù)該房屋及其附屬設(shè)施、設(shè)備因乙方使用不當(dāng)或不合理使用，致使該房屋及其附屬設(shè)施、設(shè)備損壞或發(fā)生故障的，乙方應(yīng)負(fù)責(zé)修復(fù)，乙方不維修的，甲方可代為維修，費(fèi)用由乙方承擔(dān)。
<br>5-3.租賃期間，甲方應(yīng)定期對(duì)該房屋進(jìn)行檢查、養(yǎng)護(hù)，保證該房屋及其附屬設(shè)施、設(shè)備處于正常的可使用和安全的狀態(tài)。甲方應(yīng)在檢查養(yǎng)護(hù)前 3 日通知乙方。檢查養(yǎng)護(hù)時(shí)，乙方應(yīng)予以配合。甲方應(yīng)減少對(duì)乙方使用該房屋的影響。
<br>5-4.租賃期間，乙方須全力配合甲方因該房屋注冊(cè)公司 (含:工商、稅務(wù)、資質(zhì)審批部門)所需要的實(shí)地核查，每年實(shí)地核查次數(shù)不超過(guò) 3次。若乙方以各種理由拒不配合視乙方違約，賠償甲方壹個(gè)月房租做為違約金。
<br>
<br>第七條 轉(zhuǎn)租、承租權(quán)轉(zhuǎn)讓和交換
<br>6-1.租賃期間，乙方無(wú)轉(zhuǎn)租權(quán)。
<br>6-2.租賃期間，乙方不得將該房屋轉(zhuǎn)讓給他人承租或與他人承租的居住房屋進(jìn)行交換
<br>
<br>第八條 續(xù)租
<br>7-1. 該房屋租賃期限屆滿、乙方需繼續(xù)承租的，乙方應(yīng)于租賃期限屆滿前三十日內(nèi)向甲方提出續(xù)租，經(jīng)甲、乙雙方協(xié)商一致后，重新簽訂合同。乙方支付續(xù)租賬單 (包括但不限于支付租金或補(bǔ)足續(xù)租押金)
即視為乙方已完全了解續(xù)租租期、續(xù)租租金等重要信息并確認(rèn)該續(xù)租合同，與甲方建立房屋租賃關(guān)系。乙方不續(xù)租的，甲方有權(quán)在租賃期限屆滿前三十日內(nèi)帶人看房，乙方需給予配合。
<br>
<br>第九條 房屋返還
<br>8-1.除甲方同意乙方續(xù)租外，乙方應(yīng)在本合同的租期屆滿后 1日內(nèi)返還該房屋
<br>8-2.乙方未經(jīng)甲方書(shū)面同意逾期返還該房屋的，每逾期一日，乙方應(yīng)按該房屋日租金的 三倍向甲方支付房屋占用費(fèi)。
<br>8-3.除本合同附件另有約定外，乙方返還該房屋時(shí)，該房屋及其裝修、附屬設(shè)施和設(shè)備應(yīng)當(dāng)符合正常使用后的狀態(tài)。經(jīng)甲方書(shū)面驗(yàn)收認(rèn)可后，相互結(jié)清各自應(yīng)當(dāng)承擔(dān)的費(fèi)用
<br>
<br>第十條 解除本合同的條件
<br>10-1.甲、乙雙方同意在租賃期內(nèi)，有下列情形之一的，本合同解除，雙方互不擔(dān)責(zé):
<br>(一) 該房屋占用范圍內(nèi)的土地使用權(quán)依法提前收回的;
<br>(二) 該房屋因公共利益需要被依法征收的;
<br>(三) 該房屋因城市建設(shè)需要被依法列入房屋拆遷許可范圍的;
<br>(四) 該房屋因不可抗力原因毀損、滅失，致使乙方不能正常使用的:
<br>(五) 簽訂本合同時(shí)，甲方已告知乙方該房屋已設(shè)定抵押，租賃期間被處分的;
<br>(六) 甲乙雙方協(xié)商一致解除本合同的。
<br>10-2.甲、乙雙方同意，甲方有下列情形之一的，乙方可書(shū)面通知甲方解除本合同，并有權(quán)要求甲方賠償損失。
<br>(一) 甲方未按合同約定按時(shí)交付該房屋，經(jīng)乙方書(shū)面催告后 7日內(nèi)仍未交付的;
<br>(二) 甲方交付的該房屋不符合本合同約定或存在重大質(zhì)量缺陷，致使乙方不能正常使用的;
<br>
<br>10-3.甲、乙雙方同意，乙方有下列情形之一的，甲方可書(shū)面通知乙方解除本合同，并有權(quán)要求乙方賠償損失。
<br>(一) 乙方擅自改變房屋居住用途的;
<br>(二) 因乙方原因造成房屋結(jié)構(gòu)損壞的:
<br>(三) 乙方擅自轉(zhuǎn)租該房屋、轉(zhuǎn)讓該房屋承租權(quán)或與他人交換各自承租的房屋的;
<br>(四) 乙方擅自增加承租同住人，或人均承租建筑面積、使用面積低于規(guī)定標(biāo)準(zhǔn)的
<br>(五) 乙方利用承租的居住房屋從事違法違規(guī)活動(dòng)的:
<br>(六) 乙方逾期不支付本合同項(xiàng)下約定由乙方承擔(dān)的費(fèi)用的(包括但不限于房屋押金、租金、水電煤費(fèi)用等);
<br>(七)乙方擅自將該房屋鑰匙交付或配給非居住人員的;
<br>(八)乙方隱瞞、漏報(bào)、謊報(bào)自身傳染性疾病或隱性疾病的;
<br>(九) 乙方在未承租的房間堆放私人物品的。
<br>(十) 欠繳各項(xiàng)費(fèi)用達(dá)月租金額 15%的。
<br>
<br>第十一條違約責(zé)任
<br>11-2.甲方未在本合同中告知乙方，該房屋出租前已抵押，造成乙方損失的，甲方應(yīng)負(fù)責(zé)賠償。
<br>11-3.乙方未征得甲方書(shū)面同意或者超出甲方書(shū)面同意的范圍擅自裝修房屋或者增設(shè)附屬設(shè)施的，甲方可以要求乙方恢復(fù)房屋原狀并賠償損失。
<br>11-4.租賃期間，非本合同約定的情況，甲方提前解除合同，甲方應(yīng)向乙方支付壹個(gè)月房屋租金作為違約金。若違約金不足抵付乙方損失的，甲方還應(yīng)負(fù)責(zé)賠償。
<br>11-5.租賃期間，非本合同約定的情況，乙方中途擅自退租的，乙方應(yīng)向甲方支付壹個(gè)月房屋租金作為違約金。若違約金不足抵付甲方損失的，乙方還應(yīng)負(fù)責(zé)賠償。
<br>11-6.租賃期間，甲方有本合同第 10-2條約定情形之一的，應(yīng)向乙方支付貳個(gè)月房屋租金作為違約金，若違約金不足抵付乙方損失的，甲方還應(yīng)負(fù)責(zé)賠償。
<br>11-7.租賃期間，乙方有本合同第 10-3 條約定情形之一的，應(yīng)向甲方支付貳個(gè)月房屋租金作為違約金，若違約金不足抵付甲方損失的，乙方還應(yīng)負(fù)責(zé)賠償。
<br>11-8租賃期間，乙方承諾租賃期內(nèi)不使用煤氣罐，不給電動(dòng)車電池充電，若乙方私自違反承諾，造成意外事故與甲方無(wú)關(guān)，所有責(zé)任由乙方自行承擔(dān)。合同期內(nèi)甲方不定期實(shí)地檢查屋內(nèi)安全隱患，一經(jīng)發(fā)現(xiàn)乙方使用煤氣罐或給電動(dòng)車電池充電行為，視乙方嚴(yán)重違約，甲方有權(quán)收回房屋且押金不退。
<br>
<br>第十二條 其他條款
<br>12.1
租賃期間內(nèi)，承租人是房屋的實(shí)際管理人，承租人需時(shí)刻注意防火、防盜、防觸電，不做危及自身人身安全的活動(dòng)，房屋內(nèi)發(fā)生的一切安全事故都由承租人來(lái)承擔(dān)，與出租人無(wú)關(guān)，包括但不限于高空拋物，水電煤氣使用不當(dāng)，在房屋內(nèi)摔倒等，如果承租人利用此房進(jìn)行不正當(dāng)?shù)慕?jīng)營(yíng)或者違法活動(dòng)，出租方有權(quán)無(wú)條件的立刻收回房屋，給出租方造成損失的，要按照實(shí)際損失進(jìn)行賠償。
<br>12.2.本合同未盡事宜，經(jīng)甲、乙雙方協(xié)商一致，可訂立補(bǔ)充條款。本合同補(bǔ)充條款及附件，為本合同不可分割的一部分。
<br>12.3.本合同為電子合同，經(jīng)乙方在本系統(tǒng)點(diǎn)擊”確認(rèn)簽署“或支付本合同項(xiàng)下賬單 (該房屋租金及/或押金賬單) 后生效。
<br>12.4.本合同生效后，甲、乙雙方對(duì)合同內(nèi)容的變更或補(bǔ)充應(yīng)另行訂立合同，作為本合同的附件。本合同附件與本合同具有同等法律效力。
<br>
<br>第十三條 解決爭(zhēng)議的方式
<br>11-1.本合同由中華人民共和國(guó)法律、法規(guī)管轄。
<br>11-2.雙方在履行本合同過(guò)程中若發(fā)生爭(zhēng)議的，甲、乙雙方可協(xié)商解決或者向人民調(diào)解委員會(huì)申請(qǐng)調(diào)解，也可選擇下列第二種方式解決:
<br>(一) 提交當(dāng)?shù)刂俨梦瘑T會(huì)仲裁，(二) 依法向人民法院提起訴訟。
<br>
<br>其它內(nèi)容
<br>房間家具清單:
<br>床2。床墊2。衣柜1。茶幾1。沙發(fā)1。電視柜 1。椅子4。窗簾3。冰箱1。洗衣機(jī)1。鑰匙 1。電卡 1。戶門禁 1。油煙機(jī) 1。洗碗機(jī) 1。茶幾1。餐桌1。
<br>公共家具清單:
<br>
<br>
<br>
<br>
<br>
<div class="sign">
<dl>
<dt>甲方（出租人）簽字：<div class="sign-text">簽字</div>
</dt>
<dd>日期：<div class="sign-date">簽字</div>
</dd>
</dl>
<dl>
<dt>乙方（承租人）簽字：<div class="sign-text1">簽字</div>
</dt>
<dd>日期：<div class="sign-date1">簽字</div>
</dd>
</dl>
</div>
</div>
<div class="controlPanel">
<div class="party partya"></div>
<div class="party partyb"></div>
<button id="downloadAgree">下載合同</button>
</div>
<div class="pop">
<div class="mark">
<canvas id="signatureCanvas" width="700" height="400" style="border:1px solid #000000;"></canvas>
<div>
<button id="clearButton">清除簽名</button>
<button id="saveButton">保存簽名</button>
</div>
</div>
</div>
</body>
<script>
$('.pop').hide();
let signName = ''
$(' .sign-text,.sign-date , .sign-text1,.sign-date1').click(function (e) {
console.log(111, e.target.className);
signName = e.target.className
$('.pop').show();
});
const canvas = $('#signatureCanvas')[0]// document.getElementById('signatureCanvas');
const ctx = canvas.getContext('2d');
let drawing = false;
$('#signatureCanvas').on('mousedown touchstart', (e) => {
drawing = true;
draw(e);
});
$('#signatureCanvas').on('mousemove touchmove', (e) => {
if (drawing) {
draw(e);
}
});
$('#signatureCanvas').on('mouseup mouseout touchend', () => {
drawing = false;
ctx.beginPath();
});
function draw(e) {
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
ctx.lineWidth = 4;
ctx.lineCap = 'round';
ctx.strokeStyle = '#000000';
ctx.lineTo(x, y);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(x, y);
}
//取消簽名
document.getElementById('clearButton').addEventListener('click', () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
});
// 保存簽名
document.getElementById('saveButton').addEventListener('click', () => {
const dataURL = canvas.toDataURL();
let name = '.' + signName
if (name) {
const signTexts = document.querySelectorAll(name);
signTexts.forEach(signText => {
signText.style.backgroundImage = `url(${dataURL})`;
signText.style.backgroundSize = 'cover';
signText.textContent = ''; // 清空文本內(nèi)容
});
$('.pop').hide();
}
});
</script>
<script>
// 下載簽名與輸入完成后的后合同
$('#downloadAgree').click(function () {
// 你可以指定要轉(zhuǎn)換為PDF的元素
const element = document.body;
/*
html2pdf()
.from(element)
.save('page.pdf');
*/
// 將當(dāng)前頁(yè)面保存為png格式
html2canvas(element).then(canvas => {
// 創(chuàng)建一個(gè)a標(biāo)簽來(lái)下載PNG文件
const link = document.createElement('a');
link.href = canvas.toDataURL('image/png');
link.download = 'page.png';
element.appendChild(link);
link.click();
element.removeChild(link);
});
});
</script>
</html>以上就是前端canvas實(shí)現(xiàn)電子簽約完成線上簽署功能的詳細(xì)內(nèi)容，更多關(guān)于canvas電子簽約的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
快速學(xué)習(xí)JavaScript的6個(gè)思維技巧
在這篇文章中，我將介紹六個(gè)思維技巧來(lái)幫助你更快地學(xué)習(xí)JavaScript，并成為一個(gè)更快樂(lè)、更富有成效的程序員。2015-10-10
js中flexible.js實(shí)現(xiàn)淘寶彈性布局方案
這篇文章主要為大家詳細(xì)介紹了js中flexible.js實(shí)現(xiàn)淘寶彈性布局方案，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-12-12
下面小編就為大家?guī)?lái)一篇JS去除空格和換行的正則表達(dá)式(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
原生JavaScript實(shí)現(xiàn)簡(jiǎn)單五子棋游戲
這篇文章主要為大家詳細(xì)介紹了原生JavaScript實(shí)現(xiàn)簡(jiǎn)單五子棋游戲，文中示例代碼注釋的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
JavaScript隱式類型轉(zhuǎn)換代碼實(shí)例
這篇文章主要介紹了JavaScript隱式類型轉(zhuǎn)換代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
JavaScript創(chuàng)建對(duì)象的七種經(jīng)典方式分享
JavaScript 創(chuàng)建對(duì)象的方式有很多，通過(guò) Object 構(gòu)造函數(shù)或?qū)ο笞置媪康姆绞揭部梢詣?chuàng)建單個(gè)對(duì)象，顯然這兩種方式會(huì)產(chǎn)生大量的重復(fù)代碼，并不適合量產(chǎn)。本文介紹了七種非常經(jīng)典的創(chuàng)建對(duì)象的方式，希望對(duì)大家有所幫助2022-11-11
uniapp地圖組件(map)使用與遇到的一些問(wèn)題總結(jié)
uniapp是用vue.js開(kāi)發(fā)所有前端應(yīng)用的框架,開(kāi)發(fā)人員只需要編寫(xiě)一套代碼就可以發(fā)布到安卓、iOS、H5和小程序、快應(yīng)用等平臺(tái),下面這篇文章主要給大家介紹了關(guān)于uniapp地圖組件(map)使用與遇到的一些問(wèn)題,需要的朋友可以參考下2022-07-07
JavaScript 數(shù)組中插入元素的實(shí)例方法
這篇文章主要介紹了如何在 JavaScript 數(shù)組中插入元素,在本文中,我們學(xué)習(xí)了使用?splice()?方法將元素添加到數(shù)組的開(kāi)始、末尾或任何位置的各種方法,需要的朋友可以參考下2023-09-09
微信小程序 騰訊地圖SDK 獲取當(dāng)前地址實(shí)現(xiàn)解析
這篇文章主要介紹了微信小程序 騰訊地圖SDK 獲取當(dāng)前地址實(shí)現(xiàn)解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
前淘寶前端開(kāi)發(fā)工程師阿當(dāng)?shù)腜PT中有JS技術(shù)理念問(wèn)題
第一屆 web rebuild 北京會(huì)有個(gè)前淘寶前端開(kāi)發(fā)工程師阿當(dāng)分享的 PPT 在公司團(tuán)隊(duì)內(nèi)部有同事下載的分享，然后看了。發(fā)現(xiàn)了有些技術(shù)理念的問(wèn)題：2010-01-01