【发布时间】：2021-02-05 01:13:27
【问题描述】：
我目前正在尝试将画布保存到数据库。
程序从画布上预加载的图像开始，然后用户可以在其上绘制并点击“保存”将编辑的画布保存到数据库。我创建了一个 api 文件夹，其中包含 db.php（使用 PDO 连接到数据库）、insertDrawing.php（将编辑的画布保存到数据库）和 viewDrawing（从数据库调用保存的画布）。
我使用 AJAX 将画布发布到数据库中，但是当我运行它时，来自 Inspect Element 的网络控制台显示错误 405（不允许的方法）： Console
我已经尝试了几乎所有关于状态 405 的方法，但都无济于事。
这些是我的编码：
window.onload = () => {
const canvas = document.getElementById('canvas');
const saveButton = document.getElementById('save');
const clearButton = document.getElementById('clear');
new Drawing(canvas, saveButton, clearButton);
};
class Drawing {
constructor(canvas, saveButton, clearButton) {
this.isDrawing = false;
canvas.addEventListener('mousedown', () => this.startDrawing());
canvas.addEventListener('mousemove', (event) => this.draw(event));
canvas.addEventListener('mouseup', () => this.stopDrawing());
saveButton.addEventListener('click', () => this.save());
clearButton.addEventListener('click', () => this.erase());
const img = new Image();
img.src = 'images/bodies.png';
img.onload = () => {
const canvas = this.canvas;
const context = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(img, 0, 0);
};
const rect = canvas.getBoundingClientRect();
this.offsetLeft = rect.left;
this.offsetTop = rect.top;
this.canvas = canvas;
this.context = this.canvas.getContext('2d');
}
startDrawing() {
this.isDrawing = true;
}
stopDrawing() {
this.isDrawing = false;
}
draw(event) {
if (this.isDrawing) {
this.context.fillRect(event.pageX - this.offsetLeft, event.pageY - this.offsetTop, 3, 3);
this.context.fillStyle = "#FF0000";
}
}
save() {
const imgdata = this.canvas.toDataURL('image/png');
const a = document.createElement('a');
// a.href = imgdata;
// a.download = 'image.png';
a.click();
$.ajax({
type: "post",
url: 'api/insertDrawing.php',
dataType: "json",
contentType: "application/json; charset=utf-8",
data: imgdata,
});
}
erase(){
const img = new Image();
img.src = 'images/bodies.png';
img.onload = () => {
const canvas = this.canvas;
const context = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(img, 0, 0);
};
}
}
.container {
display: flex;
flex-direction:column;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css1.css">
</head>
<body>
<canvas id="canvas" width="600" height="500" style="border: 1px solid;"></canvas>
<button id="save" type="button">
Save
</button>
<button id="clear" type="button">
Clear
</button>
<!-- <input type="file" id="load" name="avatar" accept="image/png"> -->
<script src="jquery-3.2.1.min.js"></script>
<!-- <script src="js1.js"></script> -->
<script src="trytry.js"></script>
</body>
</html>
注意：jQuery 3.2.1 已添加为同一文件夹中的 js 文件
而我的 php 文件看起来像这样：
<?php
header('Content-Type: application/json');
require_once('db.php');
class Drawing
{
var $image;
}
try
{
$selectAllDrawing->execute();
$row_count = $selectAllDrawing->rowCount();
if ($row_count)
{
$data = array();
while($row = $selectAllDrawing->fetch(PDO::FETCH_ASSOC))
{
//create Drawing object
//put std drawing in Model (Drawing Object)
$drawing = new Drawing();
$drawing->image = $row['image'];
array_push($data, $drawing);
}
echo json_encode($data);
exit;
}
else
{
$data = array();
echo json_encode($data);
exit;
}
}
catch(PDOException $e)
{
die('ERROR: ' . $e->getMessage());
}
<?php
require_once('db.php');
$image = $_POST["image"];
//insert into database
try
{
$insertDrawing->execute(array(
"image" => "$image",
));
}
catch(PDOException $e)
{
$errorMessage = $e->getMessage();
$data = Array(
"insertStatus" => "failed",
"errorMessage" => $errorMessage
);
echo json_encode($data);
exit;
}
$data = Array(
"insertStatus" => "success",
"image" => $image,
);
echo json_encode($data);
<?php
//PDO
function dbStart($address, $login, $password)
{
try
{
$db = new PDO($address, $login, $password);
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$db->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
}
catch(PDOException $e)
{
echo 'ERROR: ' . $e->getMessage();
}
return $db;
}
function prepareDbStatement($db,
&$insertDrawing,
&$viewDrawing
)
{
try
{
$insertContactStmt = $db->prepare("INSERT INTO drawing(image) VALUES (:image)");
$selectAllContactsStmt = $db->prepare('SELECT * FROM drawing
ORDER BY image ASC');
}
catch(PDOException $e)
{
echo 'ERROR: ' . $e->getMessage();
}
}
$address = 'mysql:host=localhost;dbname=draw;charset=utf8';
$login = "root";
$password = "";
$db = null;
$db = dbStart( $address,
$login,
$password);
$insertDrawing = null;
$viewDrawing = null;
//*
prepareDbStatement($db,
$insertDrawing,
$viewDrawing);
//*/
欢迎回复。非常感谢。
【问题讨论】：
-
您的服务器端不允许使用“POST”方法，也许服务器端日志中有一些内容可以显示更多信息
-
你确定它是你在 5500 端口上运行的 PHP 服务器吗？
-
HTTPmetgods 通常使用大写字母，即
"POST"而不是"post"。这不会导致问题吗？ -
我已将“post”更改为“POST”，但仍然无济于事。当我从 VSCode 中的 HTML 文件中单击“使用 Live Server 打开”时，将获得端口 5500。它不是正确的服务器吗？
-
没错，VS Code 的直播服务器仅用于静态托管
标签： javascript php html jquery database