将图像数据 URI (base64) 设置为 canvas 背景

Question

我正在使用 Fabric.js。我在页面上有一个视频，我正在使用 canvas 元素将其转换为图像。使用 canvas.toDataURL() 为我提供了 base64 格式的视频的正确图像。

现在我想将此图片的数据 URI 添加为相同 canvas 的背景图片。我正在使用此代码来执行此操作：

var img = new Image();
img.onload = function() {
  var f_img = new fabric.Image(img);

  canvas.setBackgroundImage(
    f_img, 
    canvas.renderAll.bind(canvas), {
     height: canvas.height,
     width: canvas.width
    }
  );
};
img.src = canvas.toDataURL();

但是这段代码不起作用。我也尝试过直接设置数据 URI：

  canvas.setBackgroundImage(
    canvas.toDataURL(), 
    canvas.renderAll.bind(canvas), {
     height: canvas.height,
     width: canvas.width
    }
  );

当我运行上面的代码时，它只是删除了 canvas 上绘制的图像。

Answer 1

您需要使用启用跨源的视频，或者视频需要从同一服务器提供服务。

演示版

var videoEl = document.getElementById('videoEl');
videoEl.play();
var canvas = new fabric.Canvas('c');
canvas.add(new fabric.Circle({radius:50,fill:'green'}));

function takeSnap(){
 canvas.contextTop.drawImage(videoEl,0,0,400,400)
 canvas.setBackgroundImage(canvas.upperCanvasEl.toDataURL(),function(){
  canvas.requestRenderAll();
  canvas.clearContext(canvas.contextTop);
 })

}

canvas{
 border:2px solid #000;
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<video width="400" height= "400" id='videoEl' crossorigin='anonymous' loop>
  <source src="https://d8d913s460fub.cloudfront.net/videoserver/cat-test-video-320x240.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>
<br>
<button onclick='takeSnap()'>takeSnap</button>
<br>
<canvas id='c' width='400' height='400'></canvas>

将图像数据 URI (base64) 设置为 canvas 背景

Setting image data URI (base64) as canvas background

javascript

canvas

background-image

fabricjs