H5 前端實現簽名，寫入到合同照片裏。（前端實現倆張圖片合成）

原創

2020-02-20 18:39

一、概要：

我實現的需求類似於，現實中的合同簽名。這種方式是通過前端生成一個畫布，然後用戶通過微信進入，瀏覽到H5頁面，寫入自己的名字，在把寫好的畫布與我們預先準備好的合同圖片合成一張圖片，在上傳至服務器。這種方式也可以後端進行合成，隨後發現前端合成比較方便，就在前端做了。

二、前端代碼

<!DOCTYPE html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
<html>
<head>
<title>測試頁面</title>
</head>
<style>
.div-top {text-align: center;height: 4rem;line-height: 4rem;overflow: hidden;width: 100%;background: url(img/background.gif) repeat-x 0;}
.div-topSpan {font-size: 1.5rem;color: #FFFFFF;}
.canvas {display: block;border: 1px solid #95b4e3;}
#clear,
#clear1,
#save {margin: 0 auto;display: inline-block;padding: 5px 10px;width: 50px;height: 40px;line-height: 40px;border: 1px solid #eee;background: #e1e1e1;border-radius: 10px;text-align: center;margin: 20px auto;cursor: pointer;}
</style>
<script src="js/jquery.js"></script>
<body>
<div class="agree" style="display:;">
<div class="div-top" style="width: 106%;">
	<span class="div-topSpan">閱讀協議</span>
</div>
    <div align="center">
        <img id="starImg" src="img/tp.jpg" style="display:;"/>     
    </div>
		<img id="image" src="" style="display:none;"/>
	<div align="center" style="display:none;">
		<canvas id="main" width="375" height="2564" style="border:1px solid #d3d3d3;"></canvas>
	</div>
	<div>
		<div align="center">
		<span style="font-size: 10px;color: #242424;">請簽署您的姓名：</span>
			<canvas id="canvas" class="canvas" width="600" height="600">
				您的瀏覽器不支持canvas技術,請升級瀏覽器!
			</canvas>
		</div>
		<div style="text-align: center">
			<span id="clear">清空</span>
			<span id="save">保存</span>
		</div>
	</div>
</div>
<script>
	/**
	*合成畫布內容
	*/
    function hechen(){
        var mydate = new Date();
        //var date = mydate.getFullYear()+'-'+(mydate.getMonth()+1)+'-'+mydate.getDate();
        var mainCtx = getCanvasContext('main');
        var maxWidth = mainCtx.width;
        var maxHeight = mainCtx.height;
        mainCtx.clearRect(0,0,maxWidth,maxHeight);
		
        //因爲沒法直接讀取本地圖片 所以做了這部操作
        var starImg = new Image();
        var centImg = new Image();		
		var endImg = new Image();
        starImg.src=$('#starImg').attr('src');	
        centImg.src=$('#image').attr('src');		
        endImg.src=$('#image').attr('src');		
		endImg.οnlοad=function(){
			mainCtx.drawImage(endImg,130,2440,52,28);
		};
		mainCtx.currentTime=1;
		centImg.οnlοad=function(){
			mainCtx.drawImage(centImg,90,64,52,28);
		};
        starImg.οnlοad=function(){			
            //先把圖片繪製在這裏
            mainCtx.drawImage(starImg,0,0,375,2564);
			//mainCtx.drawImage(starImg,0,0,200,2400);

			//日期
			mainCtx.font = "small-caps bold 15px STXinwei";
            //設置用戶文本填充顏色
            mainCtx.fillStyle = "black";
			mainCtx.fillText('16256458753',108,2515);
			
			mainCtx.font = "small-caps bold 8px STXinwei";
			mainCtx.fillText(mydate.getFullYear(),70,2544);			
			mainCtx.fillText((mydate.getMonth()+1),100,2544);			
			mainCtx.fillText(mydate.getDate(),122,2544);		
			
			//mainCtx.fillText('2019',279,2544);
			//mainCtx.fillText('12',308,2544);
			//mainCtx.fillText('13',330,2544);
            //讀取用戶的文本
            /*if($('#desc').val()){
                mainCtx.font = "small-caps bold 18px STXinwei";
                //設置用戶文本填充顏色
                mainCtx.fillStyle = "black";
                //從座標點(50,50)開始繪製文字
                mainCtx.fillText($('#desc').val(),108,335);
                //設置時間填充顏色
                mainCtx.font = "small-caps bold 16px STXinwei";
                mainCtx.fillText(date,326,447);
            }*/
        };
    }
	/**
	*獲取畫布對象
	*/
    function getCanvasContext(id){
        return document.getElementById(id).getContext("2d");
    }
	/**
	*方法調用
	*/
    function saveImageInfo() {
		hechen();		
		//...比如取出合成的圖片
		setTimeout(function(){
			createImg();
		},1000);
    }
	/**
	*生成圖片
	*/
	function createImg(){
		var image = new Image();
		var canvas = document.getElementById("main");	
		image.src = canvas.toDataURL("image/png");	
		console.log('圖片內容===>', image.src);
	}

</script>
<script type="text/javascript" src="js/autograph.js"></script>
</body>

實例圖片