Как ускорить обработку изображения в HTML5 Canvas

Question

[Pavel Shvedov]

Все доброго времени суток, упражняюсь с CoffeeScript и HTML5 Canvas, нашел на просторах интернета алгоритм простого размытия, реализовал его на CoffeeScript, но работает очень медленно, реально картинка 500 на 500 точек обрабатывается секунд 5, на это время браузер отмирает (Safari, Chrome OSX 10.9). Есть какие-нибудь идеи ускорить этот процесс? Самому в голову пока не приходят мысли как ускорить попиксельный обход изображения. Вот код реализации размытия на CoffeeScript:

class BlurEffect extends BasicEffect
	constructor: (@_radius, @_ctx) ->

	proceed: (target) ->
		newImageData = @_ctx.createImageData(target)
		w = target.width
		h = target.height
		for i in [0...w]
			for j in [0...h]
				total = {
					red: 0
					green: 0
					blue: 0
				}
				for ky in [-@_radius...@_radius]
					for kx in [-@_radius...@_radius]
						pixel = @getPixel(target, i+kx, j+ky)
						total.red+=pixel.red
						total.green+=pixel.green
						total.blue+=pixel.blue
				newImageData.data[(j * w * 4) + (i * 4)] = total.red/ Math.pow(@_radius * 2 + 1, 2)
				newImageData.data[(j * w * 4) + (i * 4) + 1] = total.green/ Math.pow(@_radius * 2 + 1, 2)
				newImageData.data[(j * w * 4) + (i * 4) + 2] = total.blue/ Math.pow(@_radius * 2 + 1, 2)
				newImageData.data[(j * w * 4) + (i * 4) + 3] = target.data[(j * w * 4) + (i * 4) + 3]
		newImageData

Код вроде как примитивный, в пояснении не нуждается.

Comments

[vladimer belashvili]

Приветствую вас Pavel, Прежде всего я скажу вам, что это очень важно для меня. Я заинтересован в ускорении HTML5 canvas. Я видел ваш код об этом, но я не могу понять его, и если вы можете объяснить, как ускорить этот процесс, я буду благодарен. '' ''
Я Не знаю где и как это поменять. Пожалуйста, помогите мне и Заранее благодарю.

Answer 1

[0re1]

- не надо считать Math.pow(@_radius * 2 + 1, 2) каждый раз

- не вызывать @getPixel каждый раз, а стянуть ImageData в Typed Array

- не изпользовать объект total, а хранить именные переменные red, green, blue

- считать (j * w * 4) + (i * 4) один раз а не пять

- не использовать CoffeeScript, в for ky in [-@_radius...@_radius] будет оверхед на определения направления

- здесь может пригодиться asm-js

Мне кажется, что быстрее будет использовать CSS.

Comments

[Pavel Shvedov]

Хорошо, я учту Ваши рекомендации, единственное, почему @getPixel плох, там просто метода, который из ImageData находит 4 числа (rgba) отвчающие за конкретный пиксель, там кода всего

getPixel: (source, x, y) ->
		w = source.width
		{
			red:   source.data[ (y * w * 4) + (x * 4)]
			green: source.data[((y * w * 4) + (x * 4)) + 1]
			blue:  source.data[((y * w * 4) + (x * 4)) + 2]
			alpha: source.data[((y * w * 4) + (x * 4)) + 3]
		}

[0re1]

при размере canvas 500 X 500 и радиусе 6, данный метод будет вызван 36000000, значит 36KK вызовов функций (+ обертка результата в объект) + 432KK операци умножения, против 36KK операций умножения при ручном дерганьи данных.

[0re1]

UPD: не 36KK умножений, а 250K

[0re1]

UPD: можно обойтись без умножения

[ForveAvar]

Так же стоит упомянуть использование web workers чтоб не умирал браузер

[0re1]

UPD: можно обойтись без деления и циклов 3 и 4 вложености, для этого для каждого значения радиуса реализовать не хитрую арифметическую функцию подсчета среднего с сложением и побитовым сдвигом, а потом эти функции заинлайнить чтобы избежать оверхед на вызов функций