0

Really sorry if my question is a duplicate one.

based on this problem Capture/save/export an image with CSS filter effects applied and from that link was asked before, still no idea to solve the problem. because Im using many filter effect in a canvas (like hueRotate, brightness, sepia, blur, contrast, etc).

is anyone know how to save an image with css filter applied? the key from this problem is how to putImageData from filter layer into canvas.

I've tried many times and it come with no filter applied. I've also searching from any website and books, still have no idea to solve this.

so, is anyone solve this problem?

(sorry for my bad english, this problem is my final task, so I will really appreciate if you guys can help me.)

Community
  • 1
  • 1
Fachrizal Allolangi
  • 31
  • 3

1 Answers1

1

There's a fairly easy solution.

You need to change the canvas pixels to reflect your desired filter and then save the canvas as an image.

  1. Draw the original image on the canvas with drawImage. Be sure you satisify cross-domain security restrictions, otherwise the canvas will be tainted and you will not be able to use the canvas methods required to apply the filter.
  2. Fetch the RGBA pixel data for all pixels on the canvas using getImageData.
  3. Apply your desired filter by modifying the canvas pixel data from step#2. Here's a relevant previous Stackoverflow Q&A: HTML5 Canvas blending & IE / Edge
  4. Put the filter-modified pixels back onto the canvas using putImageData.
  5. Convert the canvas to an image using toDataURL. Note: Chrome and Foxfire allow the user to directly save the canvas as an image with right-click-save-as-image on their canvas context menu.
Community
  • 1
  • 1
markE
  • 102,905
  • 11
  • 164
  • 176