is anyone solve about saving filtered canvas as an image? [duplicate]

Answer 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.