- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我正在尝试在页面上构建一个 Canvas ,只要用户在其上绘制内容,该 Canvas 就会自行更新。然而,看起来好像下面的一段代码(来自 index.html)导致了错误
socket.on("drawn_complete",function(data){
ctx.putImageData(data.image,0,0);
console.log("Everthing worked technically");
});
这是在我的控制台中输出的错误:
Uncaught TypeError: Failed to execute 'putImageData' on 'CanvasRenderingContext2D': No function was found that matched the signature provided
我的 data.image 是从以下代码返回的:
ctx.getImageData(0,0,200,100); // ctx is canvas.getContext("2d")
这是我在 html 中的 Canvas :
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
这是完整的 nodeJS:
var http = require("http")
var server = http.createServer(handler).listen(1337);
console.log("Server created at 127.0.0.1:1337");
var io = require("socket.io").listen(server);
function handler(req,res)
{
console.log("Client Connected");
res.writeHead(200,{"Content-type": "text/plain"});
res.end("Hello World");
}
io.sockets.on("connection",function(socket){
socket.on("drawing",function(data){
var image = data["image"];
io.sockets.emit("drawn_complete",image);
});
});
当用户在我的 Canvas 内按住并移动鼠标时,会发出绘图:
代码如下:
c.onmousedown = function(evt){
moving = true
};
c.onmousemove = function(evt){
if(moving == true)
{
console.log("holding and moving");
var x = evt.clientX - rect.left;
var y = evt.clientY - rect.top;
console.log("X: " + x + " Y: " + y);
ctx.fillRect(x,y,1,1);
socket.emit("drawing",{"image": ctx.getImageData(0,0,200,100)});
}
};
c.onmouseup = function(evt){
moving = false;
};
更新
这是开始的脚本:
<script>
window.onload = function(){
var socket = io.connect("http://localhost:1337");
socket.on("drawn_complete",function(data){
ctx.putImageData(data.image,0,0);
console.log("Everthing worked technically");
});
var c = document.getElementById("myCanvas");
var moving = false;
console.log(c);
var ctx = c.getContext("2d");
var rect = c.getBoundingClientRect();
c.onmousedown = function(evt){
moving = true
};
c.onmousemove = function(evt){
if(moving == true)
{
console.log("holding and moving");
var x = evt.clientX - rect.left;
var y = evt.clientY - rect.top;
console.log("X: " + x + " Y: " + y);
ctx.fillRect(x,y,1,1);
socket.emit("drawing",{"image": ctx.getImageData(0,0,200,100)});
}
};
c.onmouseup = function(evt){
moving = false;
};
};
</script>
更新正如 Palanik 建议的那样,我已尝试在发布图像之前将其序列化:
var stringfy = JSON.stringify(ctx.getImageData(0,0,200,100));
socket.emit("drawing",{"image": stringfy});
看起来好像控制台仍然抛出同样的错误
更新 ( 2 )正如@Palanik 建议的那样,我尝试序列化该对象。我知道下面的代码并不完全是他推荐的,但我只想强调一些非常特别的东西:
发件人:
var stringfy = ctx.getImageData(0,0,200,100);
console.log(stringfy)
var sent = JSON.stringify(stringfy);
socket.emit("drawing",{"image": sent});
接收者
socket.on("drawn_complete",function(data){
imageData = JSON.parse(data.image);
console.log(imageData);
ctx.putImageData(imageData,0,0);
console.log("Everthing worked technically");
});
这里有趣的一点是 imageData 的 console.log 打印出一个对象,该对象具有与 ImageData 具有的完全相同的属性。高度,宽度和原始。看这里:
{"height":100,"width":200,"data":{"0":0,"1":0,"2":0,"3":0,"4":0,"5 etc... }
因此,正如我从此处所见,我能够取回对象。如果我在 java 中,一个转换就足够了;
ImageData object = (ImageData) imageData // Is there a way to do this?
最佳答案
这里的解决方案是使用canvas.toDataURL();
.
这将返回一个 Base64 编码的图像字符串(头部带有 MIME 类型和编码)。
var canvas = getMyCanvas(),
ctx = canvas.getContext("2d"),
encodedImageData = canvas.toDataURL(),
image = new Image();
image.src = encodedImageData;
ctx.drawImage(image, x, y, w, h...);
您可以愉快地将这些编码后的字符串传入和传出服务器。
您可以在常规 HTML 中使用它们 <img src="data:image/png;base64,...">
,还有。
此外,您可以传递 toDataURL
几个参数:
canvas.toDataURL("image/jpeg", 0.5);`
其中,第一个参数是请求的文件类型,第二个参数是请求的图像质量级别(介于 0 和 1 之间)。
不过,不能保证任何浏览器都会支持您的要求,无论如何您可能只会得到一个 .png 文件(这可能是您想要的游戏、透明胶片,无论如何) ).
此外,Android 2.2 及更低版本的浏览器、IE9 以及我认为 Mobile Safari 5.1(原始 iPad)不支持 .toDataURL
.
我对 iPad 的看法可能是错误的,但它们不支持其他可结合使用的 HTML5 API。
关于javascript - 使用 nodeJS 的跨浏览器 Canvas 未找到该函数的签名,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22075501/
例如,我有一个父类Author: class Author { String name static hasMany = [ fiction: Book,
代码如下: dojo.query(subNav.navClass).forEach(function(node, index, arr){ if(dojo.style(node, 'd
我有一个带有 Id 和姓名的学生表和一个带有 Id 和 friend Id 的 Friends 表。我想加入这两个表并找到学生的 friend 。 例如,Ashley 的 friend 是 Saman
我通过互联网浏览,但仍未找到问题的答案。应该很容易: class Parent { String name Child child } 当我有一个 child 对象时,如何获得它的 paren
我正在尝试创建一个以 Firebase 作为我的后端的社交应用。现在我正面临如何(在哪里?)找到 friend 功能的问题。 我有每个用户的邮件地址。 我可以访问用户的电话也预订。 在传统的后端中,我
我主要想澄清以下几点: 1。有人告诉我,在 iOS 5 及以下版本中,如果您使用 Game Center 设置多人游戏,则“查找 Facebook 好友”(如与好友争夺战)的功能不是内置的,因此您需要
关于redis docker镜像ENTRYPOINT脚本 docker-entrypoint.sh : #!/bin/sh set -e # first arg is `-f` or `--some-
我是一名优秀的程序员,十分优秀!