Глобализация переменной из функции

Question

Мне было поручено обеспечить прямую трансляцию видео на устаревшей машине с IE6. Для этого я использую шим на основе Flash для воссоздания объекта Canvas (нет поддержки в IE <10). Вот ReadMe: <a href="https://www.mapmsg.com/static/3rdparty/fxcanvas-0/ReadMe.html" rel="nofollow noreferrer">https://www.mapmsg.com/static/3rdparty/fxcanvas-0/ReadMe.html

Теперь я получаю imageData вот так:

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

В документации по прокладке не просто используется 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 не объявлено. Неважно, что я пытаюсь, я не могу заполнить this.imageData данными изображения от .invoke

Это мой первый опыт работы с 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 (...);

Клавиатура this в javascript работает иначе, чем вы используете на других языках.