</div> <button id="take">拍照</button> <br /> <video id="v" style="width: 640px;height: 480px;"></video> <canvas id="canvas" style="display:none;"></canvas> <br /> <img src="http://placehold.it/640&text=Your%20image%20here%20..." id="photo" alt="photo"> </div> 前端用ajax将拍照的图片保存到url:http://localhost:5001/static/picture 上 怎么写
时间: 2023-10-07 07:14:18 浏览: 65
您需要使用 JavaScript 发送 AJAX 请求来将拍照的图片上传到指定的 URL。以下是一个示例代码:
```javascript
// 获取拍照按钮和视频元素
const takeBtn = document.getElementById('take');
const video = document.getElementById('v');
// 点击拍照按钮时触发
takeBtn.addEventListener('click', function() {
// 获取 canvas 元素和图像元素
const canvas = document.getElementById('canvas');
const photo = document.getElementById('photo');
// 将视频的帧画面绘制到 canvas 中
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
// 将 canvas 转换为 base64 编码的图像数据
const imageData = canvas.toDataURL('image/jpeg');
// 发送 AJAX 请求上传图像数据
const xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost:5001/static/picture');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
console.log('上传成功');
};
xhr.onerror = function() {
console.error('上传失败');
};
xhr.send('image=' + encodeURIComponent(imageData));
// 将图像元素的 src 属性设置为 base64 编码的图像数据
photo.setAttribute('src', imageData);
});
```
需要注意的是,以上代码中的 AJAX 请求使用 POST 方法上传图像数据。服务器端需要能够解析该请求,并将图像数据保存到指定的路径。另外,由于图像数据是以 base64 编码的形式上传的,因此需要在服务器端进行解码才能保存为图像文件。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
帮我美化此登录页面要求全部使用页内样式:<script src="../js/vue.js"></script> <script src="../plugins/elementui/index.js"></script> <script type="text/javascript" src="../js/jquery.min.js"></script> <script src="../js/axios-0.18.0.js"></script> <style> #control{ margin-left: 600px; background-color: #0abdfe;width: 180px;border-radius:20%} p{ margin-left: 80px;} </style> <body> 登录 账号:<input placeholder="请输入账号" id="username" name="username" required v-model="pass.username">
密码:<input type="password" placeholder="请输入密码" id="password" name="password" required v-model="pass.password"> <button>登录</button> <button>注册</button>
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
样式优化美化<!DOCTYPE html> {% load static %} <html> <head> <title>个人中心</title> <style> .container { display: flex; flex-wrap: wrap; justify-content: space-between; } .module { width: calc(25% - 20px); margin-bottom: 20px; padding: 20px; border: 1px solid #ccc; border-radius: 5px; } @media (max-width: 768px) { .module { width: calc(50% - 20px); } } @media (max-width: 480px) { .module { width: 100%; } } </style> </head> <body> 个人信息 <form> <label for="username">用户名:</label> <input type="text" id="username"> <label for="email">邮箱:</label> <input type="email" id="email"> <button type="submit">保存</button> </form> 修改密码 <form> <label for="old-password">旧密码:</label> <input type="password" id="old-password"> <label for="new-password">新密码:</label> <input type="password" id="new-password"> <label for="confirm-password">确认密码:</label> <input type="password" id="confirm-password"> <button type="submit">保存</button> </form> 绑定手机 <form> <label for="phone">手机号:</label> <input type="tel" id="phone"> <button type="submit">保存</button> </form> 我的消息 系统消息1 系统消息2 好友消息1 好友消息2 </body> </html>
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
优化这一段代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>qq登录</title> </head> <body style=" border: 1px solid; height: 400px; width: 450px; color: #555555; font: 12px; background-color: #ffff; position: absolute; left: 35%; " >
密码登录 推荐使用 快捷登录 ,防止盗号
<input type="text" placeholder="请输入账号" style="width: 242.14px; height: 33.14px" />
<input type="text" placeholder="请输入密码" style="width: 242.14px; height: 33.14px" />
<input type="submit" value="登录" style=" width: 250px; height: 38px; background-color: rgb(0, 119, 255); padding: 1px 6px; " />
找回密码注册账号意见反馈 </body> </html>
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)