个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
28
4
我正在尝试制作一个交互式 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。您仍然可以使用旧方法，例如长池和依赖超时的方法。
在客户端，您至少需要四个主要部分。
在服务器上，您将需要消息系统将事件从客户端中继到所有其他订阅的客户端。
使用 node.js 和 socket.io 这真的很容易或ratchet对于 PHP。
关于javascript - 如何让网页上的每个用户实时查看和编辑 HTML Canvas ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29132755/
28
4
0
Closed. This question is opinion-based。它当前不接受答案。 想改善这个问题吗？更新问题，以便editing this post用事实和引用来回答。 2年前关闭。
我想显示我的网站上所有用户都在线(实时；就像任何聊天模块一样)。我正在使用下面提到的脚本来执行此操作。 HTML: Javascript: var doClose = false; documen
有什么方法可以知道 Algolia 何时成功处理了排队作业，或者与上次重新索引相比，Algolia 是否索引了新文档？ 我们希望建立一个系统，每当新文档被索引时，浏览网站的用户都会收到实时更新警告，并
构建将在“桌面”而不是浏览器中运行的 Java 应用程序的推荐策略是什么。该应用程序的特点是: 1. Multiple application instances would be running o
这是场景: 我正在编写一个医疗相关程序，可以在没有连接的情况下使用。当采取某些措施时，程序会将时间写入CoreData记录。 这就是问题所在，如果他们的设备将时间设置为比实际时间早的时间。那将是一个大
我有: $(document).ready(function () { $(".div1, .div2, .div3, .div4, .div5").draggable();
我有以下 jquery 代码: $("a[id*='Add_']").live('click', function() { //Get parentID to add to. var
我有一个 jsp 文件，其中包含一个表单。提交表单会调用处理发送的数据的 servlet。我希望当我点击提交按钮时，一个文本区域被跨越并且应该实时显示我的应用程序的日志。我正在使用 Tomcat 7。
我编辑了我的问题，我在 Default.aspx 页面中有一个提交按钮和文本框。我打开两个窗口Default.aspx。我想在这个窗口中向文本框输入文本并按提交，其他窗口将实时更新文本框。 请帮助我!
我用 php 创建了一个小型 CMS，如果其他用户在线或离线，我想显示已登录的用户。 目前，我只创建一个查询请求，但这不会一直更新。我希望用户在发生某些事情时立即看到更改。我正在寻找一个类似于 fac
我有以下问题需要解决。我必须构建一个图形查看器来查看海量数据集。 我们有一些特定格式的文件，其中包含数百万条代表实验结果的记录。每条记录代表大图上的一个样本点。我见过的最大的文件有 4370 万条记录
我最近完成了申请，但遇到了一个大问题。我一次只需要允许 1 个用户访问它。每个用户每次都可以访问一个索引页面和“开始”按钮。当用户点击开始时，应用程序锁定，其他人需要等到用户完成。当用户关闭选项卡/浏
我是 Android 开发新手。我正在寻找任何将音高变换应用到输出声音(实时)的方法。但我找不到任何起点。 我找到了这个 topic但我仍然不知道如何应用它。 有什么建议吗？ 最佳答案 一般来说，该算
背景 用户计算机上的桌面应用程序从调制解调器获取电话号码，并在接到电话后将其发送到 PHP 脚本。目前，我可以通过 PHP 在指定端口上接收数据/数据包。然后我有一个连接到 411 数据库并返回指定电
很抱歉提出抽象问题，但我正在寻找一些关于在循环中执行一些等效操作的应用程序类型的示例/建议/文章，并且循环的每次迭代都应该在特定时间部分公开其结果(例如， 10 秒)。 我的应用程序在外部 WCF 服
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: What specifically are wall-clock-time, user-cpu-time,
我最近遇到了一个叫做 LiveChart 的工具，决定试用一下。 不幸的是，我在弄清楚如何实时更新图表值时遇到了一些问题。我很确定有一种干净正确的方法可以做到这一点，但我找不到它。 我希望能够通过 p
我正在实现实时 flutter 库 https://pub.dartlang.org/packages/true_time 遇到错误 W/DiskCacheClient(26153): Cannot
我一直在使用 instagram 的实时推送 api ( http://instagram.com/developer/realtime/ ) 来获取特定位置的更新。我使用“半径”的最大可能值，即 5
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。 想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 7年前关闭。 Improve thi
我是一名优秀的程序员,十分优秀！