将图像数据URI（base64）设置为画布背景

Posted 2021-03-28

我正在使用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
    }
  );

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

答案

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

DEMO

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）设置为画布背景的主要内容，如果未能解决你的问题，请参考以下文章

使用 typescript 使用 data-uri 将图像转换为 base64

如何将画布图像“data:image/jpeg;base64,..”转换为普通图像文件 - javascript

将 byte[] 转换为数据 URI 的 Base64 字符串

将 base64 图像数据上传到 Amazon S3

使用 Firebase 存储上传 base64 图像

Safari 中的数据 URI 泄漏（原为：HTML5 画布的内存泄漏）