Save image with overlay ( CSS overlay)?

Question

css

Good afternoon,
Can you please tell me if it is possible to somehow save the original image with CSS overlay without resorting to heavy programs like Adobe Photoshop?
Below is the code that is applied to the picture.

.hero-overlay {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  background-color: rgba(45, 51, 69, 0.8); 
}

Thanks

Answer 1

Only editing through Canvas

Answer 2

take a screenshot How to take a screenshot of an element using JS?