Skip to content

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

@neviem1

Description

@neviem1

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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions