In the common use case, user pass a image, then WebGLImageFilter return a new image object .

Could you supply a feature for canvas that not create a new Image Object ( by a switch)

example:

var filteredImage = filter.apply( offscreen,  createNewImageOrNot );
if createNewImageOrNot===false ,  filteredImage==offscreen

Trying to use your library in a Webpack environment with ESLint enabled.

I get all kinds of errors like :
Expected an object to be thrown
Expected an assignment or function call and instead saw an expression
Expected literal to be on the right side of ===

Any plans to fix these?

As the title .

thanks

I have a game that I'm drawing to an html canvas, and I'd love to be be able to use this library to do post processing on it.

In all of image-editors (e.g. photoshop ,paint.net , painter...) , there is a parameter named "Radius" in the blur panel.

In this lib, no radius , it has a "size" parameter.
What's different between size and radius?

If no difference , could you change the name from "size" to "radius" ?
I think the radius is common.

I've implemented a pixelation filter for my in-progress game. Here is a screen shot of the pixelation level being updated in real-time:

If this is something we want, it's a pretty small shader.

The majority of browsers natively support the new es modules feature, would you be willing/interested to accept a PR for this, or would you prefer to keep WebGLImageFilter as a window global?

hi , first of all thanks for this beautiful library.how can i change the size of image returned?

Hey, great (and fast!) Library!
I found this as most modern js image processing libraries are quite outdated, yours could be one of the best around if you gave it an update. :)
Also, using .png images as an overlay would be great as a new feature.

Could you support the Darker and Lighter filters ?

Thank you

hi how can i use cutom fragment shaders? as far as i can see i can only pass a custom colorMatrix toaddFilter. suppose i want to achieve bloom effect how can i go about it?

I create a path ( via context.beginPath & closePath),
How to apply the filter in the path ?

On the line referenced below, a comma is missing in the filter definition for the detechEdges filter.

Example:

filter.apply(image,  [  [ v1X, v1Y] ,  [ v2X, v2Y,  [ v3X, v3Y] .... [ vnX, vnY]   ] );
filter.apply(image,  centreX, centreY, radius);

then the filter only affects the "ploygon area" and "circle area" in the image.

Good morning !

I can't find any documentation on how your vertex array should work or what represent the v and w coordinates :

  // Create the vertex buffer for the two triangles [x, y, v, w] * 6
  var vertices = new Float32Array([
  -1, -1, 0, 1, 1, -1, 1, 1, -1, 1, 0, 0,
  -1, 1, 0, 0, 1, -1, 1, 1, 1, 1, 1, 0
  ]);

For me, vertices only need 2, or 3 coordinates with the depth. I guess you're not specifying any depth with these points, but I can't manage do find what v and w are. Can you give me a hint on this, please ? Thanks (a lot) in advance !

WebGLImageFilter uses DOM methods to create canvas (e.g. document.createElement()) - and DOM is not available inside a web worker.

Should use OffscreenCanvas instead.

Which then leads to second problem, canvas and it's webgl context are initialized upon class creation and only resized upon subsequent access - but OffscreenCanvas cannot be resized, it has to be initialized with fixed size. Which means that initialization code should be modified so canvas is dynamically created (and it's context updated).

"Failed to execute 'texImage2D' on 'WebGLRenderingContext': Tainted canvases may not be loaded."

What shall I do ?

On mobile devices, like Firefox OS phones with low memory, it's not possible to apply those effects to larger images (like from 8 MP cameras).

Quote from a stackoverflow answer to the question how to deal with this:

So the way to deal with that is that you subdivide your image into smaller tiles and process each tile one at a time.

There are two ways you can deal with borders if you have filter kernels.

• You could pass in 9 textures and branch on texture lookup to address the correct one (that might be slow, some GPUs don't support branching and will execute all codepaths). Border textures would just be 2x2 so would have little ram footprint. Note that between textures there would be no interpolation, so don't rely on it, or substitute your own.
• You could add a half kernel sized border around each tile taking pixels from neighboring tiles in a preprocessing step.

[Source: http://stackoverflow.com/a/15039655/1692735]

Could I use WebGLImageFilter in the game for dynamic filter?

If my offscreen-canvas about 512*512 , How many FPS the WebGLImageFilter can reach ?

First of all thanks for the great work. In a project of mine I also need a couple of image filter, so I stumbled over your project. Unlucky my use case doesn't work so good with your API, so I started to work out a new API on a fork of this repo. It comes out, that I rewrote in my fork big parts of the hole library beside the shaders and filters. I thought now about to publish my results as a further image filter library (of course with reference to your work) or as a fork of you. I would prefer to publish it at a new project (of course under a open source licence), because I used other build tools and the API is mainly different from yours. Would this be okay?

Further I did like to know under which licence this project is published? Maybe you can add one.

Thanks again for your work. jacmendt

In many image-edit-tools , the blur has an agrument named "radius"

I found in WebGLImageFilter, there is a variable named "size" , blurSize.

I want know whether the size equals the radius . or size == 2 * radius ?

if size==radius , could you change the "size" to "radius" ?
because "radius" is more generic .

thanks.