我有这段HTML代码:
<div id="container"> <div id="calendar"> </div> </div> <button class="btn btn-dark mb-1" onclick="captureAndSave()">Format</button>
还有这段js代码
<script> function captureAndSave() { // Select "calendar" element var elementToCapture = document.querySelector('section.content'); // Hide ".noPrint" elements var elementsToHide = elementToCapture.querySelectorAll('.noPrint'); elementsToHide.forEach(function(element) { element.style.visibility = 'hidden'; }); html2canvas(elementToCapture).then(function(canvas) { var imageBase64 = canvas.toDataURL('image/png'); elementsToHide.forEach(function(element) { element.style.visibility = 'visible'; }); var link = document.createElement('a'); link.href = imageBase64; link.download = 'captura.png'; link.click(); }); } </script>
按下按钮应该下载内容"section.content"的图像,对吗?实际上,这个操作是成功执行的,但是当我尝试修改这段代码,使其将图像下载到服务器文件夹而不是下载到用户的计算机时,我无法做到。
我尝试了这种方法:
<script> function captureAndSave() { var elementToCapture = document.querySelector('section.content'); var elementsToHide = elementToCapture.querySelectorAll('.noPrint'); elementsToHide.forEach(function (element) { element.style.visibility = 'hidden'; }); html2canvas(elementToCapture).then(function (canvas) { var imageBase64 = canvas.toDataURL('image/png'); elementsToHide.forEach(function (element) { element.style.visibility = 'visible'; }); var xhr = new XMLHttpRequest(); xhr.open('POST', 'assets/imagen.php', true); xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); var data = 'image=' + encodeURIComponent(imageBase64); xhr.send(data); xhr.onload = function () { if (xhr.status === 200) { var response = JSON.parse(xhr.responseText); if (response.success) { alert(response.message); } else { alert('Error: ' + response.message); } } }; }); } </script>
我尝试管理保存到服务器的名为"image.php"的PHP代码,但没有成功:
<?php $response = array(); if(isset($_POST['image'])) { $imageData = $_POST['image']; $filePath = '../vistas/img/temp/imagen.png'; if(file_put_contents($filePath, base64_decode(preg_replace('#^data:image/w+;base64,#i', '', $imageData)))) { $response['success'] = true; $response['message'] = 'The image has been saved successfully.'; } else { $response['success'] = false; $response['message'] = 'There was an error saving the image.'; } } else { $response['success'] = false; $response['message'] = 'No image received.'; } header('Content-type: application/json'); echo json_encode($response); ?>
有关我可以改变的建议或者更好的方法来实现我想要的目标吗?首先,谢谢。
有一件事引起了我的注意,那就是你为$filePath变量定义的路径。如果你想要上传文件的完整目录树不存在,写入操作将会失败。
您可以使用以下代码来确保到您要写入的文件的目录树存在,然后再尝试写入它。
您还可以使用异常处理来确定错误的类型,以便进行调试。默认情况下,file_put_contents只会返回一个警告,因此让PHP抛出异常可能超出了您的项目范围。
检查您的PHP日志也可以帮助您找出问题的原因。