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

【问题标题】：How can I make every user on a webpage see and edit HTML canvas live?如何让网页上的每个用户实时查看和编辑 HTML 画布？
【发布时间】：2015-03-19 05:36:51
【问题描述】：

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

我的想法是这样的：获取一个脚本，在不刷新的情况下自动刷新网页上的图像，使画布具有我希望人们在其上书写的地图的静态背景，获取他们绘制的内容并将其保存到每 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');

?>

现在我要放弃这整个想法，只是因为它没有做任何我想让它做的事情，而且它似乎是一团糟。有没有一种完全不同的方式来完成我想要完成的事情，或者有没有办法让这项工作真正发挥作用？

【问题讨论】：

标签： javascript php html canvas

【解决方案1】：

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

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

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

在服务器上，您需要将事件从客户端中继到所有其他订阅客户端的消息传递系统。

使用 node.js 和 socket.io 或 PHP 的 ratchet 真的很容易。

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

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

【讨论】：