Javascript 有人能帮我把画布图像保存到sql吗？数据库=注册…表：用户…列：用户名，图像[longblob]

直接说我不清楚JS（所以我不明白用sql存储图像的任何逻辑）。。。我只是一个学习者[一年级的CE学生]…我学习了后端（sql，php）我必须提交这个项目，但我是库存…我完全不知道如何将图像直接存储到sql，因为我单击“继续”按钮…我所有的朋友都是新手，我没有足够的时间学习JS…有很多解决方案可用，但我一个都不懂…请帮助我维护我的代码…谢谢

喜马拉雅学院






快照





//抓取元素、创建设置等。
var video=document.getElementById（'video'）；
//接近摄像机！
if（navigator.mediaDevices&&navigator.mediaDevices.getUserMedia）{
//不添加“{audio:true}”，因为我们现在只需要视频
navigator.mediaDevices.getUserMedia（{video:true}）。然后（函数（流）{
video.src=window.URL.createObjectURL（流）；
video.play（）；
});
}
//设置
var canvas=document.getElementById（'canvas'）；
var context=canvas.getContext（'2d'）；
var video=document.getElementById（'video'）；
//触发拍照
document.getElementById（“snap”）.addEventListener（“单击”，函数）（）{
drawImage（视频，0，0，400，300）；
});

因此，您的脚本已经能够从视频中获取快照。现在，您必须将画布数据转换为blob，并通过ajax将其发送到服务器。这对于现代浏览器来说并不特别困难

document.getElementById（'snap'）.addEventListener（'click'，function（）{
drawImage（视频，0，0，400，300）；
canvas.toBlob（函数（blob）{
var req=新的XMLHttpRequest（）；
请求打开（'POST'，'uploadimage.php'）；
req.onload=函数（）{
日志（'上传完成，服务器响应：'，请求响应'）；
};
log（'正在上载快照…'）；
请求发送（blob）；
});
});

打开控制台（F12）查看日志消息。在生产中，您必须为用户生成HTML反馈

服务器部分有点复杂。首先，创建一个名为

uploadimage.PHP

的PHP脚本。该脚本将使用

php://input

stream

处理用户提交的数据时，通常需要执行一些安全检查。您要验证上载的文件是否为图像类型（请参阅）

您还需要对用户进行身份验证，以不允许所有人（或任何机器人）将内容上载到您的服务器。我不会告诉您如何操作，这超出了本主题的范围

最后，我们需要选择一个不会与现有文件名冲突的文件名。一个好的候选文件名是基于当前时间的字符串（请参阅）。您可能还需要添加一个与经过身份验证的用户相关的前缀

（编辑：很抱歉，我忘了您想要将其存储在数据库中。请告诉我您是否能够调整此脚本。如果不能，我将编写更合适的响应。）

在mysql中……数据库名称注册……表名：用户……列：用户名、批处理、密码\u 1、密码\u 2、图像（blob）。。。。
我使用apache作为服务器（XAMPP），所有页面（registration.php、login.php）都连接到server.php，如下所示


您必须使用：
canvas.toBlob（（blob）=>{…}）
我很确定这已经被问过了。我正在写一个完整的回复。等一下……很抱歉，我没有得到第二部分：）如何在数据库中保存？？？我在第二部分感到困惑是的，对不起，我继续我的工作，忘了你想把它存储在数据库中。你能告诉我你如何处理数据库逻辑吗？你使用了什么API使用，您的表名和列名是什么，等等。您需要更多信息吗？：）您有SQL注入漏洞，例如，当用户名为
”或TRUE时；--
。在我的表中使用或…….是-“用户”。。。。。我已经有了一列-'image[blob]'。。。首先注册数据，然后出现登录页面。。。。登录后进入sanp phtoto页面。。。。从那里我无法将图像存储在数据库中。。。。。快照照片是基于用户名、、、加载的，即，。。。如果我能够将图像存储在数据库、、、中，它将存储在-image列中。。其中用户名已登录。。。。因为这两个pase是相互关联的：）因为它只是一个小项目……我无论如何都不打算主持它……所以可以考虑一下sql注入：）虽然成本不高，但这是一个好习惯。不管怎样，你看到我编辑了我的答案了吗？
document.getElementById('snap').addEventListener('click', function() {
  context.drawImage(video, 0, 0, 400, 300);
  canvas.toBlob(function (blob) {
    var formData = new FormData();
    formData.append('snapshot', blob);
    formData.append('image-description', 'MFW Im writing an answer on SO');

    var req = new XMLHttpRequest();
    req.open('POST', 'uploadimage.php');

    req.onload = function () {
      console.log('upload complete, server response:', req.response);
    };

    console.log('uploading snapshot...');
    req.send(formData);
  });
});

<?php
header('Content-Type: text/plain; charset=utf-8');
ini_set('html_errors', '0');

function sendError($message, $code = 500) {
    header("HTTP/1.0 $code");
    die($message);
}

session_start();
if (!isset($_SESSION['username'])) sendError('Please log in', 401);

if (!isset($_FILES['snapshot'])) sendError('Missing file', 400);

$fd = fopen($_FILES['snapshot']['tmp_name'], 'rb');
$mimeType = mime_content_type($fd);
fclose($fd);

$matchResult = preg_match('#^image/#', $mimeType);

if ($matchResult === false) {
    sendError("Couldn't parse MIME type");
}
if ($matchResult === 0) {
    sendError('Wrong MIME type', 400);
}

$mysqli = new mysqli('localhost:3306', 'root', '', 'registration');
if ($mysqli->connect_error) {
    sendError($mysqli->connect_error);
}
$mysqli->set_charset('utf8mb4') or sendError($mysqli->error);

$username = $_SESSION['username'];
$contents = file_get_contents($_FILES['snapshot']['tmp_name']);

$query = 'INSERT INTO uploads (username, file) VALUES (?, ?)';
$stmt = $mysqli->prepare($query)              or sendError($mysqli->error);
$stmt->bind_param('ss', $username, $contents) or sendError($stmt->error);
$stmt->execute()                              or sendError($stmt->error);

echo 'Ok';