0

I have added CSS filters in the "style" attribute of an <img> tag containing an image.

<img src="myImage.png" style="filter: grayscale(100%)">

Now, the original image will look different due to the filters applied and I want that different looking image to be converted into Base64 image file using JavaScript.

Please help me out of this situation.

Souvik paul
  • 403
  • 1
  • 6
  • 10
  • I believe this is what you are looking for https://stackoverflow.com/questions/6978156/get-base64-encode-file-data-from-input-form – Pritesh Feb 20 '21 at 11:45
  • Does this answer your question? [Get Base64 encode file-data from Input Form](https://stackoverflow.com/questions/6978156/get-base64-encode-file-data-from-input-form) – Markus Zeller Feb 20 '21 at 12:03

1 Answers1

0

Starting from HTML 5 You can use canvas for this.

Create a canvas element with your image. after that you can use the toDataURL method (returns a data URI containing the representation of the image in the format specified by the type parameter where the default format is image/png) in order to get the base64 image file.

you can read more about it here:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

Ran Turner
  • 14,906
  • 5
  • 47
  • 53