我正在編輯一個laravel項目,我想添加一個簽名功能。我在下面有這段程式碼,它是移動響應的。但我不知道如何將它連接到現有的 例如,伺服器名稱:localhost。使用者名稱:db_test。密碼:db123。資料庫名稱:db_test
我想要插入它的表格是$booking->signature。
<?php if(isset($_POST['signaturesubmit'])){ $signature = $_POST['signature']; $signatureFileName = uniqid().'.png'; $signature = str_replace('data:image/png;base64,', '', $signature); $signature = str_replace(' ', '+', $signature); $data = base64_decode($signature); $file = 'signatures/'.$signatureFileName; file_put_contents($file, $data); $msg = "<div class='alert alert-success'>Signature Uploaded</div>"; } ?> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <style> #canvasDiv{ position: relative; border: 2px dashed grey; height:300px; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <br> <?php echo isset($msg)?$msg:''; ?> <h2>Sign Here</h2> <hr> <div id="canvasDiv"></div> <br> <button type="button" class="btn btn-danger" id="reset-btn">Clear</button> <button type="button" class="btn btn-success" id="btn-save">Save</button> </div> <form id="signatureform" action="" style="display:none" method="post"> <input type="hidden" id="signature" name="signature"> <input type="hidden" name="signaturesubmit" value="1"> </form> </div> </div> </body> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script> <script> $(document).ready(() => { var canvasDiv = document.getElementById('canvasDiv'); var canvas = document.createElement('canvas'); canvas.setAttribute('id', 'canvas'); canvasDiv.appendChild(canvas); $("#canvas").attr('height', $("#canvasDiv").outerHeight()); $("#canvas").attr('width', $("#canvasDiv").width()); if (typeof G_vmlCanvasManager != 'undefined') { canvas = G_vmlCanvasManager.initElement(canvas); } context = canvas.getContext("2d"); $('#canvas').mousedown(function(e) { var offset = $(this).offset() var mouseX = e.pageX - this.offsetLeft; var mouseY = e.pageY - this.offsetTop; paint = true; addClick(e.pageX - offset.left, e.pageY - offset.top); redraw(); }); $('#canvas').mousemove(function(e) { if (paint) { var offset = $(this).offset() //addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true); addClick(e.pageX - offset.left, e.pageY - offset.top, true); console.log(e.pageX, offset.left, e.pageY, offset.top); redraw(); } }); $('#canvas').mouseup(function(e) { paint = false; }); $('#canvas').mouseleave(function(e) { paint = false; }); var clickX = new Array(); var clickY = new Array(); var clickDrag = new Array(); var paint; function addClick(x, y, dragging) { clickX.push(x); clickY.push(y); clickDrag.push(dragging); } $("#reset-btn").click(function() { context.clearRect(0, 0, window.innerWidth, window.innerWidth); clickX = []; clickY = []; clickDrag = []; }); $(document).on('click', '#btn-save', function() { var mycanvas = document.getElementById('canvas'); var img = mycanvas.toDataURL("image/png"); anchor = $("#signature"); anchor.val(img); $("#signatureform").submit(); }); var drawing = false; var mousePos = { x: 0, y: 0 }; var lastPos = mousePos; canvas.addEventListener("touchstart", function(e) { mousePos = getTouchPos(canvas, e); var touch = e.touches[0]; var mouseEvent = new MouseEvent("mousedown", { clientX: touch.clientX, clientY: touch.clientY }); canvas.dispatchEvent(mouseEvent); }, false); canvas.addEventListener("touchend", function(e) { var mouseEvent = new MouseEvent("mouseup", {}); canvas.dispatchEvent(mouseEvent); }, false); canvas.addEventListener("touchmove", function(e) { var touch = e.touches[0]; var offset = $('#canvas').offset(); var mouseEvent = new MouseEvent("mousemove", { clientX: touch.clientX, clientY: touch.clientY }); canvas.dispatchEvent(mouseEvent); }, false); // Get the position of a touch relative to the canvas function getTouchPos(canvasDiv, touchEvent) { var rect = canvasDiv.getBoundingClientRect(); return { x: touchEvent.touches[0].clientX - rect.left, y: touchEvent.touches[0].clientY - rect.top }; } var elem = document.getElementById("canvas"); var defaultPrevent = function(e) { e.preventDefault(); } elem.addEventListener("touchstart", defaultPrevent); elem.addEventListener("touchmove", defaultPrevent); function redraw() { // lastPos = mousePos; for (var i = 0; i < clickX.length; i++) { context.beginPath(); if (clickDrag[i] && i) { context.moveTo(clickX[i - 1], clickY[i - 1]); } else { context.moveTo(clickX[i] - 1, clickY[i]); } context.lineTo(clickX[i], clickY[i]); context.closePath(); context.stroke(); } } }) </script> </html>
您必須在 .env 檔案中設定資料庫憑證。它位於您專案的根目錄中。如果不存在,您可以重新命名 .env.example 並對其進行更改。
根據您的程式碼(至少在 MVC 框架中與資料庫的互動不是標準的),我認為最好先熟悉 Laravel。有很多資源可以學習。