0

i have found a pack of css filter that you can use on pictures with just specifying the id of the filter on the image. right now i want to create a button that will let me send the edited picture(the picture with the filter) to a file where i put the pictures i'm using a Uniform server to run my php can anyone help ?

Yassine Laadraoui
  • 78
  • 1
  • 10
  • I don't know if this will work but you can try drawing the filtered imaged to a canvas and then saving the canvas as an image. – Musa Apr 25 '16 at 17:39
  • @Musa do you know how i can do that ? – Yassine Laadraoui Apr 25 '16 at 17:44
  • 1
    [Draw image to canvas](https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/drawImage), [Export image from canvas](http://stackoverflow.com/questions/923885/capture-html-canvas-as-gif-jpg-png-pdf) – Musa Apr 25 '16 at 18:03
  • to add to this: http://www.html5rocks.com/en/tutorials/canvas/imagefilters/ is an excellent resource for working out your filters once you draw the image to the Canvas 2d context (afaik, there is no way to get the css filter to be 'applied' to the drawn image, you would only be effecting the canvas element itself) . – rlemon Apr 25 '16 at 18:54

1 Answers1

1

CSS filters are never exported along with the canvas.

Native canvas has some compositing & blending filters.

But, beyond that, you must apply the filter to the canvas itself. This is done by:

  1. Fetching the image's pixel data with context.getImageData,
  2. Manipulating the pixel data according to your filter algorithm,
  3. Replacing the modified pixels back on the canvas with context.putImageData.

You can explore the many filter algorithms by Googling "html5 canvas filters".

markE
  • 102,905
  • 11
  • 164
  • 176
  • 1
    Just to mention, canvas now has (or at least will soon have) CSS filters incorporated in context.filter (currently under a flag in chrome and FF.) – Kaiido Apr 25 '16 at 23:31
  • What about filters being applied to images that are drawn to a canvas? – Musa Apr 26 '16 at 18:23
  • @Musa. CSS filters never apply to the exported image, but you can certainly apply filter algorithms to images as they are being drawn to the canvas. There are some experimental filters available on some browsers, but (for me) I can't use the experimental filters until they become cross-browser compatible. – markE Apr 26 '16 at 18:33