Seriously.js
Seriously.js copied to clipboard
Published
20 hours ago •
brianchirls
brianchirls
Canvas - background image instead transparent background under chroma image
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>
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;
