Question

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

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

代码的直接html文件变体会产生一个函数signature_pad（见下文），所以我知道编写的代码工作正常 - 问题似乎是Laravel，Vue，Blade或JS的方式在模板内处理。

有关在Laravel 5.4或类似工具中使用signature_pad的任何见解或专业知识表示赞赏。谢谢。

＆＃13;

<!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>

＆＃13;

Answer 1

问题源于Laravel开箱即用的样板模板。默认情况下，模板布局（views / layouts / app.blade.php）附带了app.js的脚本标记，因为我认为是Vue2.0绑定。完全删除此调用可使signature_pad JS正常工作。

如何在laravel 5.4中使用signature_pad？

1 个答案: