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

时间:2018-06-04 14:25:40

标签: javascript canvas background-image fabricjs

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

现在我想将此图像的数据URI添加为同一画布的背景图像。 我正在使用此代码执行此操作:

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

当我在代码上面运行时,它只删除画布上绘制的图像。

1 个答案:

答案 0 :(得分:0)

您需要使用支持crossorigin的视频,或者视频需要从同一服务器提供。

<强> 样本

&#13;
&#13;
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);
 })

}
&#13;
canvas{
 border:2px solid #000;
}
&#13;
<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>
&#13;
&#13;
&#13;