Несколько вызовов canvas.putImageData в HTML5

Я создаю приложение, которое делает указанное пользователем количество вызовов canvas.putImageData в Javascript. Между каждым вызовом putImageData данные изображения изменяются. Время, необходимое для изменения данных, зависит от вызова. Пользователь также должен иметь возможность остановить анимацию во время ее выполнения (я использую кнопку). Изначально я использовал:

for (var i=0; i < n; i++) {
    canvas.putImageData(imgdata, 0, 0);
    modify(imgdata);
}

Однако это не отображает каждый кадр, а только последний. Что работает, так это поставить предупреждение после canvas.putImageData, но это очень раздражает. Я пытался использовать setInterval и cancelInterval, как, я уверен, многие бы предложили, но это не работает для меня по двум причинам:

  • Время, необходимое для изменения данных изображения, варьируется.
  • setInterval является асинхронным; если задержка, которую я использую, слишком короткая, вызовы для модификации (imgdata) накапливаются в стеке, и пользователи не смогут остановить анимацию, когда захотят.

Как я могу заставить это работать правильно?


javascript canvas html setinterval putimagedata
person Neal Lawton    schedule 08.08.2013    source источник
comment
Ваш метод изменения размера потрясающий !! Однако, взглянув на код, я увидел, что вы можете быть намного быстрее с небольшими усилиями: ширина кеша, высота и, что более важно, данные в каждом методе вместо использования их в основных циклах ( var imgData = img.data ; ). кэш также повторяет вычисления (4*...) . В некоторых случаях вы также можете использовать 32- или 64-битные массивы производительности, например stackEnd. (я немного говорил об этом здесь: stackoverflow.com/a/14429346/856501).   -  person GameAlchemist    schedule 08.08.2013

Ответы (1)


arrow_upward
0
arrow_downward

Используйте повторяющийся setTimeout():

var shouldStop = false;

function iteration() {
  canvas.putImageData(imgData, 0, 0);
  modify(imgData);

  if (!shouldStop) {
    window.setTimeout(iteration, 1000);
  }
}

function stop() {
  shouldStop = true;
}

Это будет отображать и изменять данные изображения каждую секунду.

Другим решением было бы делегировать алгоритм модификации веб-воркеру.

person ComFreek    schedule 08.08.2013
comment
Превосходно! Это сработало отлично! Огромное спасибо! Вот приложение, если оно кому-то поможет: dl.dropboxusercontent.com/u/178840674/ seamCarve.html загрузите изображение, затем для режима редактирования: выберите Режим изменения размера -> Оптимальный; затем щелкните в любом месте изображения или отредактируйте текстовые поля, чтобы увидеть анимацию. Используйте кнопку Отмена, чтобы остановить анимацию. - person Neal Lawton; 08.08.2013