javascript - 是否可以在 JavaScript 中使用创建的图像设置背景图像？

Question

我希望使用用 JavaScript 创建的图像而不是简单的 URL 来设置 Canvas 的背景。

<script>
      var v = document.getElementById("video1");
      var canvas1 = document.getElementById("firstcanvas");
      var ctx1 = canvas1.getContext("2d");
      var canvas2 = document.getElementById("secondCanvas");
      var ctx2 = canvas2.getContext("2d");

      var i;
      function draw() {
        ctx1.drawImage(v, 0, 0, 300, 150);
        transform();
      }
      function transform() {
        var dataURL = canvas1.toDataURL("image/png");

        canvas2.style.backgroundImage = dataURL;

      }
      v.addEventListener("play", function() {i = window.setInterval("draw()", 200);}, false);
      v.addEventListener("pause", function() {window.clearInterval(i);}, false);
      v.addEventListener("ended", function() {window.clearInterval(i);}, false);
      </script>

简单地说，这段代码: 1. 使用 drawImage 不断从视频中绘制帧到 Canvas ，然后 2. 使用 dataURL 将 Canvas 转换为实际图像， 3. 图像将设置为背景最后的 Canvas 。正如您可能已经猜到的那样，最后一部分不起作用。我只是一个工作代码，用于设置没有 URL 的背景图像，最好使用我提供的格式。谢谢。

Answer 1

您不能简单地将 .toDataURL() 返回的数据分配给 backgroundImage 属性，因为它希望将其包装在 "url()" 中。

这是一个例子:

var canvas1 = document.getElementById("firstCanvas");
var ctx1 = canvas1.getContext("2d");
var canvas2 = document.getElementById("secondCanvas");
var ctx2 = canvas2.getContext("2d");

ctx1.beginPath();
ctx1.arc(50, 50, 40, 0, 2 * Math.PI);
ctx1.stroke();

function transform() {
  var dataURL = canvas1.toDataURL("image/png");
  canvas2.style.backgroundImage = "url(" + dataURL + ")";
}
transform();

<canvas id="firstCanvas" width="100" height="100"></canvas>
<canvas id="secondCanvas" width="100" height="100"></canvas>