search

brianchirls / Seriously.js

A real-time, node-based video effects compositor for the web built with HTML5, Javascript and WebGL
MIT License
3.87k stars 354 forks source link

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

Open neviem1 opened 6 years ago

neviem1 commented 6 years ago

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.

https://jsfiddle.net/0xz7cfkL/

<!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 commented 5 years ago

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;