Установка URI данных изображения (base64) в качестве фона холста - PullRequest
Новая
       16

Установка URI данных изображения (base64) в качестве фона холста

0 голосов
/ 04 июня 2018

Я использую 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 голосов
/ 05 июня 2018

Вам необходимо использовать видео с поддержкой кросс-оригинала, или видео нужно подавать с того же сервера.

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>
...