? ? ? ?之前接觸了一個二手房交易軟件，移動端使用H5開發(fā)，需求中尤一快就會客戶通過手機可以直接簽訂租/售合同。

下面分享一下電子簽名的幾個步驟：

1、電子合同生成圖片（demo）

2、尋找可是的簽名插件（本文使用signature_pad.js）

????引入相關js

????<script charset="utf-8"src="js/jquery.min.js"></script>

????<script src="js/signature_pad.js"></script>

3、計算簽名生成位置

? ? 根據(jù)需要簽名的位置計算簽名生成的位置

4、js畫圖

創(chuàng)建canvas對象，將尺寸設置與電子檔合同一樣大，在新建的canvas里面重新繪制電子合同，在按照之前計算的簽名位置，將生成的簽名繪制在對應位置

注意事項：

簽名圖片沒有加載完成時直接調(diào)用繪圖會造成簽名無法顯示，所以需要對簽名圖片的onload方法里面在執(zhí)行繪圖操作