Javascript / HTML图像编辑器为多用户(Javascript/HTML image editor for multi

Javascript / HTML图像编辑器为多用户(Javascript/HTML image editor for multi-users)

这个想法很简单：有一个像谷歌文档一样工作的图像编辑器：你几乎可以立即看到人们的变化

我在互联网上做了一些研究，我想从一个基本的javascript图像编辑器开始。 我在不是我的html5游戏上使用它（但它允许使用GreaseMonkey的脚本）。

现在我做了一个按钮，它显示并关闭一个窗口，里面有一个google文档： 在这里 。 但它并不是最好的图像编辑器^^

我试图使用和理解我在谷歌上找到的一些代码，但它们似乎都不起作用（用画布代替iframe）我甚至试图删除拖动选项，认为它可能会影响画布，但不会，它不工作。

如果您有任何关于javascript图像版和html canvas的好教程，我很乐意了解它。 如果你有一个关于为什么画布不工作的想法，我会很乐意去了解它

谢谢^^

The idea is simple : Having an image editor that work like a google doc : You can see people changes almost instantly

I did some research on internet, I wanted to start with a basic javascript image editor. I'm using this on a html5 game that's not mine (but it allows scripts with GreaseMonkey).

For now I did a button that display and close a window with a google doc inside it : Here it is. But it's not the best image editor at all ^^

I tried to use and understand some codes I've found on google but none of them seems to work.(Replacing the iframe by a canvas) I've even tried to remove the drag option, thinking it could affect the canvas but nope, it's not working.

If you have any good tutorials about javascript image edition and html canvas, I'll love to learn about it. If you have an idea of why canvas isn't working, I'll be happy to learn about it ^^

Thanks ^^

最满意答案

那么，开始：

多人编辑同一个对象 （在这种情况下，图像）：您将需要设置某种类型的P2P流（最好的解决方案是使用Webrtc +数据通道或当然 websockets）。

Acctuall画布的东西：多数民众赞成只是JavaScript。 任何w3schools教程都应该这样做。 我做了一个小游戏（使用画布和普通的JS）。 也许你可以使用快速参考（只读它低谷，并试图了解发生了什么）： https ： //github.com/IvRRimum/agario-duel-webrtc

这应该让你开始。

Well, to start off:

Multiple people editing the same object(image in this case): You will propably need to setup some kind of a P2P stream(Best solution is to use Webrtc + data channels OR of course websockets).

Acctuall canvas stuff: Thats just javascript. Any w3schools tutorial should do. I made a small game(using canvas and plain JS). Maybe you can use for quick reference(just read it trough and try to understand whats happening) : https://github.com/IvRRimum/agario-duel-webrtc

That should get you started.