从函数中全局化变量

Question

我的任务是在运行 IE6 的旧机器上提供实时视频源。为此，我使用基于 Flash 的 shim 重新创建 Canvas 对象（在 IEhttps://www.mapmsg.com/static/3rdparty/fxcanvas-0/ReadMe.html

那么，我目前得到的 imageData 是这样的：

this.imageData=this.context.getImageData(0,0,this.width,this.height)

shim 文档不仅仅使用getImageData。原因是：

我们不能使用规范中声明的画布图像数据，因为 IE 使用极其无效的内存管理器，因此在某些情况下它可能会占用所有可用内存。所以 fxCanvas 使用的图像数据格式略有不同。

例子：

 var cv = document.getElementById("cv");
var ctx = cv.getContext("2d");
ctx.setFillStyle("#ff0")
    .setStrokeStyle("#0ff")
    .strokeRect(10, 20, 30, 30)
    .fillRect(30, 40, 50, 50)
    .invoke("getImageData", 0, 0, cv.width, cv.height, function (imageData) {
        // ... processing image data
    });

想法是，所有的图像处理都在.invoke的内置函数中完成。

说了这么多，我的问题很简单。我无法在该功能中进行所有图像处理。我想将imageData 返回到this.imageData，这样我就可以在其他函数中使用它，然后最后用putImageData 将它放回画布中。

所以，我的愚蠢尝试是：

this.context.invoke("getImageData",0,0,this.width,this.height, function(imgdat){return imgdat});

this.imageData= imgdat;

不起作用。 imgdat 未声明。无论我尝试什么，我似乎都无法使用来自.invoke 的图像数据填充this.imageData

这是我第一次使用 javascript，我正在尝试编辑不是我编写的代码 (https://github.com/phoboslab/jsmpeg/blob/master/jsmpeg.min.js)。我非常希望将这些数据转换为程序已经使用的格式，而不是重写所有内容以使其全部在 .invoke 函数中发生。

Answer 1

这似乎是一个简单的范围解析问题。

您在函数内收到imgdat，这是一个回调，但一旦函数完成，变量就消失了。 我在你的第一个 sn-p 上没有看到你的 this.imageData。

我假设你需要做的是：

var cv = document.getElementById("cv");
var ctx = cv.getContext("2d");
var self = this; // <------------ important detail
ctx.setFillStyle("#ff0")
    .setStrokeStyle("#0ff")
    .strokeRect(10, 20, 30, 30)
    .fillRect(30, 40, 50, 50)
    .invoke("getImageData", 0, 0, cv.width, cv.height, function (imageData) {
        // ... processing image data
        self.imageData = imageData; //instead of this.imageData
    });

//Now you can use imageData here.
this.imageData (...);

javascript 中的this 键与您在其他语言中使用的键不同。