0

我正在开发一个简单的基于表单的发票/收据 Web 应用程序，该应用程序需要使用signature_pad获取客户签名。由于熟悉和内置的用户身份验证脚手架，我的应用程序使用Laravel 5.4 。

作为概念证明，我尝试将 signature_pad 示例中的代码嵌入到我的 Blade 模板中，但运气不佳 - 没有进行绘图。此外，与按钮关联的操作/事件侦听器也不起作用。

代码的直接 html 文件变体会产生一个功能性的 signature_pad（见下文），所以我知道编写的代码可以正常工作 - 问题似乎与 Laravel、Vue、Blade 或内部处理 JS 的方式有关的模板。

在 Laravel 5.4 或类似的刀片模板中使用 signature_pad 的任何见解或专业知识都值得赞赏。谢谢你。

<!DOCTYPE html>
<html>
	<head>
		<title>Testing</title>
	</head>

	
	<body>
		<div class="wrapper">
	        <canvas id="signature-pad" class="signature-pad" width=400 height=200></canvas>
	    </div>
	    <div>
	        <button id="save">Save</button>
	        <button id="clear">Clear</button>
	    </div>
	</body>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.5.3/signature_pad.min.js"></script>


	<script>
		var signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
		  backgroundColor: 'rgba(255, 255, 255, 0)',
		  penColor: 'rgb(0, 0, 0)'
		});
		var saveButton = document.getElementById('save');
		var cancelButton = document.getElementById('clear');

		saveButton.addEventListener('click', function (event) {
		  var data = signaturePad.toDataURL('image/png');

		// Send data to server instead...
		  window.open(data);
		});

		cancelButton.addEventListener('click', function (event) {
		  signaturePad.clear();
		});


	</script>

</html>

4

1 回答 1

0

问题来自 Laravel 开箱即用创建的样板模板。默认情况下，模板布局 (views/layouts/app.blade.php) 带有 app.js 的脚本标签，我想是因为 Vue2.0 的搭配。完全删除此调用使 signature_pad JS 能够正常工作。

于 2017-06-22T18:26:42.260 回答