Question

我正在尝试创建一个交互式地图，多个用户可以在其上绘制并看到彼此实时编辑。到目前为止，我的尝试到目前为止还没有真正奏效从本质上讲，最后，我想拥有多个用户可以加入的“房间”，然后在他们自己的地图上写字，但是现在我想让它只是一般的工作。

我的思维过程是这样的：获取一个脚本，在不刷新的情况下自动刷新网页上的图像，使画布具有我想要人们写的地图的静态背景，拍摄他们绘制的内容并将其保存到每隔x毫秒一个文件，将不断更新的图像与具有所有其他编辑的图像组合在一起，使最终图像成为自动刷新的画布的第二个背景图像。

现在，这可能是可怕的错误。这是我到目前为止的代码：

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>

的script.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');

?>

现在我要废弃这个想法只是因为它没有做任何我想要它做的事情，而这似乎是一个巨大的混乱。有没有完全不同的方式来实现我想要实现的目标，还是有办法让这项工作真正实现？

Answer 1

有许多方法可以构建实时Web应用程序，但最好和最现代的方法是使用WebSocket。您仍然可以使用较旧的方法，例如长池和依赖超时的方法。

在客户端，您至少需要四个主要部分。

Websocket连接器（vanilla或类似socket.io的库）
向上同步（绑定到事件并通知连接器）
向下同步（复制其他客户端从连接器发送的事件）
画布或WebGL相关逻辑（输入/输出，图纸，形状等）

在服务器上，您需要将消息系统从客户端转发到所有其他订阅客户端的消息系统。

对于PHP，node.js和socket.io或ratchet非常简单。

Here is a tutorial for Node.js (Node + Express + Socket.io)

Here is an example of a socket.io client written in PHP

如何让网页上的每个用户查看和编辑HTML画布？

1 个答案: