Question

我需要用我自己的背景图像替换绿色背景（x，y定位）。

此时我刚从https://s14.postimg.org/x9hmont5d/image.jpg删除了带有Seriously.js库的绿色背景。

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

Answer 1

查看SeriouslyJS库，可以使用blend-plugin添加背景图像。您需要在chroma script-tag旁边包含它：

<script src="https://cdn.jsdelivr.net/gh/brianchirls/Seriously.js@r2015-09-08/effects/seriously.blend.js"></script>

在主脚本中，您可以使用与第一个相同的方式添加背景图像：

let bgImage = new Image();
bgImage.crossOrigin = 'anonymous';
bgImage.src = 'https://picsum.photos/800/600?random';

最后，替换＆＃34; canvas.source＆＃34;：

let blend = seriously.effect('blend');
blend.top = chroma;
blend.bottom = seriously.source(bgImage);  

canvas.source = blend;

我希望我没有错过任何东西。您可以在代码段中签出并运行整个脚本：

＆＃13;

let image = new Image();
image.crossOrigin = 'anonymous';
image.src = 'https://s14.postimg.org/x9hmont5d/image.jpg';
let bgImage = new Image();
bgImage.crossOrigin = 'anonymous';
bgImage.src = 'https://picsum.photos/800/600?random';

let seriously = new Seriously();
let canvas = seriously.target('#canvas');

let chroma = seriously.effect('chroma');
chroma.source = seriously.source(image);

let blend = seriously.effect('blend');
blend.top = chroma;
blend.bottom = seriously.source(bgImage);

canvas.source = blend;

seriously.go();

＆＃13;

<!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 src="https://cdn.jsdelivr.net/gh/brianchirls/Seriously.js@r2015-09-08/effects/seriously.blend.js"></script>

</body>

</html>

＆＃13;

另一种解决方案可以使用HTML和CSS将图像定位在画布后面的z-index处。（如果第一个人没有工作，我会用这个）

＆＃13;

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();

＆＃13;

#container {
  position: relative;
}

#myBg {
  position: absolute;
  padding: 2px;
  z-index: 1;
}

#canvas {
  border: 2px solid #000;
  position: absolute;
  z-index: 2;
}

＆＃13;

<html>

<body>

  <div id="container">

    <img src="https://picsum.photos/800/600?random" id="myBg" />
    <canvas width="800" id="canvas" height="600"></canvas>

  </div>

  <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>
  

</body>

</html>

＆＃13;

画布 - 背景图像而不是透明背景下色度图像

我需要用我自己的背景图像替换绿色背景（x，y定位）。

1 个答案: