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

Question

我想用 JavaScript 创建的图像设置 canvas 的背景，而不是简单的 URL。

<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. 使用数据 [=21] 将 canvas 转换为实际图像=], 3. 图像将被设置为最终canvas的BACKGROUND。正如您可能已经猜到的那样，最后一部分不起作用。我只是一个工作代码，用于设置没有 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>

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

Is it possible to set backgroundImage with created image in JavaScript?

javascript

background-image

data-uri