我正在使用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
}
);
当我在代码上面运行时,它只删除画布上绘制的图像。
答案 0 :(得分:0)
您需要使用支持crossorigin的视频,或者视频需要从同一服务器提供。
<强> 样本
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;