javascript - 将绘制的画布保存到每个间隔的文件
问题描述
下面是 HTML 和 JS 代码的一部分,它尝试在某个定义的时间间隔内从网络摄像头捕获图片并将其保存为服务器上的单独文件:
<video id="player" controls autoplay></video>
<canvas id="canvas" width=320 height=240></canvas>
<script>
const player = document.getElementById('player');
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const captureButton = document.getElementById('capture');
const constraints = {video: true,};
navigator.mediaDevices.getUserMedia(constraints)
.then((stream) => {
player.srcObject = stream;
});
setInterval(drawevery, 350);
function drawevery(){
$(document).ready(function() {
var image = canvas.toDataURL("image/png");
$.post("server.php", { pimg: image } );
});
context.drawImage(player, 0, 0, canvas.width, canvas.height);
}
PHP代码:
<?php
define('UPLOAD_DIR', 'path/');
$img = $_POST['pimg'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . uniqid() . '.png';
$success = file_put_contents($file, $data);
?>
但这只会导致空白图片。问题可能是在保存之前画布没有完全加载吗?如果是这样,如何解决?
编辑:更好的实现是这样,但它仍然不起作用:
function drawevery(){
context.drawImage(player, 0, 0, canvas.width, canvas.height);
var img = new Image();
img.onload=function(){
var image = canvas.toDataURL("image/png");
$.post("savePic.php", { pimg: image } );
}
img.src=canvas.toDataURL();
setTimeout(drawevery, 400);
}
解决方案
推荐阅读
- python - 如何从列 pyspark 中获得第二高的值?
- android-studio - 滚动视图的 OnScrollChangeListener
- ssh - 如何连接到每个 ip 只接受单个连接的远程 ssh 服务器
- c# - 如何在 C# 中通过 MessagingCenter 发送对象列表?
- ios - iOS Swift:将 NSLog 调用路由到文件
- php - 当表单在 php 页面中时使用 ajax
- asp.net-core - Kubernetes 中的警告“将密钥存储在目录 '{path}' 中,可能不会保留在容器之外。”
- .htaccess - 如何配置 .htaccess 文件以允许注入样式和脚本?
- django - 每个用户的唯一字段值,自定义字段验证
- java - 单元测试Java中的InvalidUseOfMatchersException