Skip to content Skip to sidebar Skip to footer

How To Set Opacity Of An Image Opacity At The Time Of Upload?

I have a scenario where i have to upload an image and with that uploaded image another image also stores with low opacity in the Database. Kindly tell me how can i manipulate image

Solution 1:

You cannot manipulate the image's opacity while it uploads. You'll have to upload the image, save it, and then process it at a later time with something like setimageopacity()

Solution 2:

You can do it thru canvas. So the Flow is as follows.

  1. upload image from imput file, and get its base 64 string.

  2. create html image tag, add your base 64 to it`s src attribute.

  3. draw that image to canvas. Here you should specify opacity whyle drawing in canvas. Feel free to google how to draw image with opacity in canvas.

  4. from canvas (with image drawn as you wanted), get base 64 of the image.

  5. do a post request to save your base 46 image to back end.

    Edit.

I am assuming you want to upload the image from the browser. The original image can be uploaded from simple form. (edited base 64 one could be added to same form too in background) Here is an example of getting base 64 from input file. Preview an image before it is uploaded

Post a Comment for "How To Set Opacity Of An Image Opacity At The Time Of Upload?"