將圖像數據URI（base64）設置為畫布背景

Question

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

當我在上面的代碼上運行時，它只是刪除在畫布上繪制的圖像。

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>