Question

我正在尝试测试一些我以后可能会在更复杂的应用程序中使用的东西，但是我很难找到为什么以下代码无效。我不熟悉javascript，但是我注意到没有铸造这样的东西吗？

我有以下代码片段，如果使用Java，则在下面的脚本中可以使用它，但它没有。更具体地说，返回以下错误：

Uncaught TypeError: Failed to execute 'putImageData' on 'CanvasRenderingContext2D': No function was found that matched the signature provided. test.html:16
window.onload

这是代码

        <script>
    window.onload = function(){
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        var imageObject = ctx.getImageData(0,0,100,200);
        var stringed = JSON.stringify(imageObject);

        var nowShouldBeImage = JSON.parse(stringed);
        ctx.putImageData(nowShouldBeImage,0,0);
    }

    </script>

我的问题是为什么解析后的对象无法正确识别？我在这里错过了什么？我将如何解决javascript中缺少此功能的问题？（可能不是缺乏功能，而是与Java不同）

Answer 1

JSON对象将文件解析为简单结构我相信你基本上得到了一系列的频道值。

.putImageData不适用于数组，而是使用ImageData对象（可能表现得像数组，但不是）。

如果您感兴趣的是从服务器发送内容/加载内容，那么您可以使用多个解决方案。

如果你想使用XHR，那么你可以使用base64来回走动。

var canvas     = getMyCanvas(),
    ctx        = canvas.getContext("2d"),
    encImgData = canvas.toDataURL();

var img = new Image();
img.src = encImgData;

ctx.drawImage(img, 0, 0);

如果您想要通过并在此后手动编辑该图像的像素范围，请将其绘制到离屏画布.getImageData()以匹配您关注的图像的宽度和高度，编辑像素，以及{ {1}}使用已编辑的对象。

但.putImageData()并不会为你整理特定类型的东西它需要简单的数据结构，将它们放在字符串中，并将这些结构输出到其他简单的结构中。

你可以也编写一个节点修改函数，当结构中的每个节点都被重建时，它将被调用。
如果您特别想要编写一个函数来检查节点是否是一个数组，并且它填充了您假设的每个通道值，然后使用JSON，并手动循环并填充每个像素的每个通道数组值，然后返回构造的ImageData对象，你也可以这样做。但这不会对你有任何关于速度的好处。

Answer 2

Java≠Javascript ，不使用javascript作为java。

这一步似乎毫无用处：

var stringed = JSON.stringify(imageObject); //object to string
var nowShouldBeImage = JSON.parse(stringed); //same string to JSON?!?! nothing change... why?!!?

删除无用的步骤：

var imageObject = ctx.getImageData(0,0,100,200);
//var stringed = JSON.stringify(imageObject); remove this two line
//var nowShouldBeImage = JSON.parse(stringed);
ctx.putImageData(imageObject,0,0);

对象nowShouldBeImage与imageObject不同，因为在此对象内部有一些特殊的属性，因为getImageData()之后是JSON.stringify的结果丢失（nowShouldBeImage是对象的实例，imageObject是 ImageData 的实例）

Answer 3

您正在使用JSON序列化二进制数据。如果您确实需要这样做，请首先尝试将getImageData（）中的ImageData对象编码为base64。

javascript如何识别对象

3 个答案: