如何保存应用了 CSS 叠加颜色的图像？

Question

我如何使用 javascript 执行此操作？

我希望能够下载应用了 CSS 颜色叠加层的图像。

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

如何保存应用了 CSS 叠加颜色的图像？

How to save an image with CSS overlay color applied?

javascript

css

image

download

save