javascript - 从函数全局化变量

Question

我的任务是在运行 IE6 的旧计算机上提供实时视频源。为此，我使用基于 Flash 的填充程序来重新创建 Canvas 对象(IE<10 不支持)。这是自述文件:https://www.mapmsg.com/static/3rdparty/fxcanvas-0/ReadMe.html

现在，我目前得到的 imageData 是这样的:

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

垫片文档不仅仅使用getImageData。原因是:

We cannot use canvas image data as it declared in specs, because of IE using extremely ineffective memory manager so it may eats all available memory in some circumstances. So that fxCanvas is using slightly different image data format.

示例:

 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 将其放回 Canvas 。

所以，我的愚蠢尝试是:

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 这是一个回调，但是一旦函数完成，变量就消失了。我在您的第一个代码段中没有看到您的 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 键的工作方式与其他语言中使用的不同。