How to save an image with CSS overlay color applied?

Question

How would I do this using javascript?

I want to be able to download the image with the CSS color overlay applied to it.

https://jsfiddle.net/8cvom49d/

<div class="coloroverlay"></div>

.coloroverlay {
  width: 1920px;
  height: 1080px;
  background-image: linear-gradient(to bottom,
      rgba(255, 0, 187, 0.34),
      rgba(255, 0, 187, 0.34)),
    url(https://i.imgur.com/2jjLqzk.jpg);
}

Answer 1

 (function( d ) { 'use strict'; var wdh, hgt, canvas, ctx, grd, image, img = new Image(); img.crossOrigin = ''; img.src = 'https://i.imgur.com/2jjLqzk.jpg'; img.onload = draw; canvas = d.createElement( 'canvas'); canvas.setAttribute( 'width', 1920 ); canvas.setAttribute( 'height', 1080 ); function draw() { ctx = canvas.getContext( '2d' ); wdh = canvas.width; hgt = canvas.height; ctx.drawImage( this, 0, 0 ); grd = ctx.createLinearGradient( wdh/2, 0, wdh/2, hgt ); grd.addColorStop( 0, 'rgba(255, 0, 187, 0.34)'); grd.addColorStop( 1, 'rgba(255, 0, 187, 0.34)' ); ctx.fillStyle = grd; ctx.rect(0, 0, wdh, hgt); ctx.fill(); image = d.createElement( 'img' ); image.setAttribute( 'id', 'overlaid-image' ); image.setAttribute( 'src', canvas.toDataURL() ); image.setAttribute( 'width', 1920 ); image.setAttribute( 'height', 1080 ); image.setAttribute( 'alt', 'overlaid image' ); d.body.insertBefore( image, d.querySelector( 'h1' ).nextSibling ); } }( document ));

 h1 { text-align: center; } img { display: block; width: 60%; height: auto; margin: auto; cursor: pointer; }

 <h1> Image with overlay<br> Right click to save. </h1>