I am trying to make an interactive map that multiple users will be able to draw on and see each others edits live. My attempts so far have not really worked so far. Essentially, in the end, I'd like to have "rooms" that multiple users can join and then write on their own maps but for now I'd like to get it just working in general.
My thought process was this: get a script that auto refreshes an image on a webpage without refresh, make the canvas have a static background of the map I want people to write on, take what they've drawn and save it to a file every x milliseconds, combine the image that is constantly being updated with one that has all other edits, make that final image a second background image of the canvas that auto refreshes.
Now, this is probably horrifically wrong. Here is the code I have so far:
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');
?>
now I'm about to scrap this whole idea just because it's not doing anything that I want it to do and it just seems to be a huge mess. Is there a completely different way of going about what I'm trying to accomplish or is there a way to actually make this work?
There are many ways to build live web applications, but the best and most modern way is to use WebSocket. You can still use older methods such as long pooling and methods that rely on timeouts.
On the client you will need a minimum of four major parts.
On the server you will need messaging system that will relay events from a client to all other subscribed clients.
This is really easy with node.js and socket.io or ratchet for PHP.