我正在尝试制作一个交互式 map ，多个用户将能够在其中绘制并实时查看彼此的编辑。到目前为止我的尝试还没有真正奏效。本质上，最后，我希望拥有多个用户可以加入的“房间”，然后在他们自己的 map 上书写，但现在我想让它正常工作。
我的思考过程是这样的:获取一个无需刷新即可自动刷新网页上图像的脚本，使 Canvas 具有我希望人们在其上书写的 map 的静态背景，获取他们绘制的内容并将其保存到每 x 毫秒一个文件，将不断更新的图像与具有所有其他编辑的图像结合起来，使最终图像成为自动刷新的 Canvas 的第二个背景图像。
现在，这可能是大错特错了。这是我到目前为止的代码:
HTML/JS:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="sketch.js"></script>
<title>title</title>
<style>
body{text-align:center;}
div{padding:10px;}
img{border:2px solid #fff;border-radius:7px;}
</style>
</head>
<body onload="toImage(); saveImage(); combineImages();">
</div>
<div class="tools">
<a href="#colors_sketch" data-download="png" data-color="#ffffff" style="float: right; width: 100px;">Download</a>
</div>
<canvas id="colors_sketch" width="700" height="700"></canvas>
<img id="canvasImg" src="">
<script type="text/javascript">
$(function() {
$('#colors_sketch').sketch({defaultColor: "#ff0"});
});
function toImage() {
setInterval(function() {
var canvas = document.getElementById('colors_sketch');
var context = canvas.getContext('2d');
// save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL();
// set canvasImg image src to dataURL
// so it can be saved as an image
document.getElementById('canvasImg').src = dataURL;
document.getElementById('colors_sketch').style.background = 'url(images/final_img.png), url(img/p1.jpg)';
}, 100);
}
function saveImage() {
setInterval(function() {
var canvas = document.getElementById('colors_sketch');
var context = canvas.getContext('2d');
// save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL();
var onmg = encodeURIComponent(dataURL);
var xhr = new XMLHttpRequest();
var body = "img=" + onmg;
xhr.open('POST', "script.php",true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.setRequestHeader("Content-Length", body.length);
xhr.setRequestHeader("Connection", "close");
xhr.send(body);
xhr.onreadystatechange = function () {
if (xhr.status == 200 && xhr.readyState == 4) {
document.getElementById("div").innerHTML = xhr.responseText;
} else {
document.getElementById("div").innerHTML = 'loading';
}
}
}, 1000);
}
function combineImages() {
setInterval(function() {
$.ajax({
url: 'combine.php',
success:function(response){
alert(response);
}
});
}, 2000);
}
</script>
</body>
</html>
脚本.php:
<?php
// requires php5
define('UPLOAD_DIR', 'images/');
$img = $_POST['img'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . 'one.png';
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';
?>
combine.php:
<?php
$image_1 = imagecreatefrompng('images/one.png');
$image_2 = imagecreatefrompng('images/final_img.png');
imagealphablending($image_1, true);
imagesavealpha($image_1, true);
imagecopy($image_1, $image_2, 0, 0, 0, 0, 100, 100);
imagepng($image_1, 'images/final_img.png');
?>
现在我打算放弃整个想法，因为它没有做任何我想做的事情，而且看起来一团糟。有没有一种完全不同的方式来完成我想要完成的事情，或者有没有办法真正实现这项工作？
最佳答案
构建实时 Web 应用程序的方法有很多，但最好、最现代的方法是使用 WebSocket。您仍然可以使用旧方法，例如长池和依赖超时的方法。
在客户端，您至少需要四个主要部分。
- Websocket 连接器( vanilla 或类似 socket.io 的库)
- 向上同步(绑定(bind)到事件并通知连接器)
- 向下同步(复制其他客户端从连接器发送的事件)
- Canvas 或 WebGL 相关逻辑(输入/输出、绘图、形状等)
在服务器上，您将需要消息系统将事件从客户端中继到所有其他订阅的客户端。
使用 node.js 和 socket.io 这真的很容易或ratchet对于 PHP。
关于javascript - 如何让网页上的每个用户实时查看和编辑 HTML Canvas ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29132755/