Canvas - background image instead transparent background under chroma image #162

neviem1 · 2018-01-22T16:46:56Z

I need to replace green background with my own background image with (x,y positioning).

At this moment I just removed green background from https://s14.postimg.org/x9hmont5d/image.jpg with your library.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">

    <style>
      #canvas {
        border: 2px solid #000;
      }
    </style>
  </head>
  <body>
    <canvas width="800" id="canvas" height="600"></canvas>

    <script src="https://cdn.jsdelivr.net/gh/brianchirls/Seriously.js@r2015-09-08/seriously.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/brianchirls/Seriously.js@r2015-09-08/effects/seriously.chroma.js"></script>
    <script>
      let image = new Image();
      image.crossOrigin = 'anonymous';
      image.src = 'https://s14.postimg.org/x9hmont5d/image.jpg';

      let seriously = new Seriously();
      let canvas = seriously.target('#canvas');

      let chroma = seriously.effect('chroma');
      chroma.source = seriously.source(image);

      canvas.source = chroma;

      seriously.go();
    </script>
  </body>
</html>

spoji · 2019-02-06T13:19:59Z

You can use the blend effect to do so. Put your chroma output on the top layer and your image on the bottom.

  const image = new Image();
  image.crossOrigin = 'anonymous';
  image.src = 'https://i.imgur.com/yUJW7ZJ.jpg';
  const blend = seriously.effect("blend");
  blend.top = chroma;
  blend.bottom = seriously.source(image);

  canvas.source = blend;

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Canvas - background image instead transparent background under chroma image #162

Canvas - background image instead transparent background under chroma image #162

neviem1 commented Jan 22, 2018

spoji commented Feb 6, 2019

Canvas - background image instead transparent background under chroma image #162

Canvas - background image instead transparent background under chroma image #162

Comments

neviem1 commented Jan 22, 2018

I need to replace green background with my own background image with (x,y positioning).

spoji commented Feb 6, 2019