我最近了解到似乎有多种方法可以在网页上显示图像。
第一种方法是直接将 URL 分配给图像元素的 URL
const img = new Image();
img.onload = () => {
document.querySelector("#myImage").src = url;
};
img.onerror = () => {};
img.src = imageUrl;
我最近学到的另一种方法是使用fetch
fetch(imageUrl)
.then((response)=>response.blob())
.then((blob)=>{
const objectUrl = URL.createObjectURL(blob)
document.querySelector("#myImage").src = objectUrl;
})
我对这两种方法都有一些疑问：
我很熟悉，fetch但我通常用它来获取 JSON。在我看来，第二种获取fetch图像的方法就像我们通过 HTTP 获取该图像文件的原始二进制数据，而第一种方法是我们委托浏览器启动Get获取该图像的请求。但从服务器的角度来看，在如何发送图像方面没有区别？我这样理解对吗？
在什么情况下我们应该优先选择一种方法而不是另一种？我觉得第二种方法比第一种方法会出现很多 CORS 问题，但不确定具体原因。
还有其他方法可以在网页上显示图像吗？当人们谈论图像时，我经常听说 Base64 编码/解码。response.blob()base64与ie第二种方法有关吗？还是有所不同？如果是这样，有人可以给我一个使用 base64 显示图像的例子吗？
最后，我认为显示图像一直是我前端或 Web 开发知识中的一个漏洞。请随时推荐有关此主题的任何好的资源。
我正在尝试以编程方式捕获具有js / css效果的html5视频。我尝试了几种方法。
首先，我找到了这篇很棒的博客文章并将其实现。一切都很完美，直到我发现phantomjs 不支持 html5视频标签，因此无法捕获视频。
第二种选择是使用无头的chrome拍摄连续的屏幕截图，并将这些屏幕截图输入ffmpeg以创建视频。尽管它在某种程度上可以正常工作，但无头的chrome屏幕快照仍需要一些时间。.我无法创建流畅的视频。
在我的第三次尝试中，我给了Chrome的Page.startScreencast api一个机会。它可以捕获视频，但是帧速率确实有问题。原因是该 ..
现在，我正在研究xvfb + chrome / firefox + ffmpeg组合，以捕获该评论中提到的视频。从理论上讲，这是有希望的，但我无法捕获视频。相反，我有黑屏。
我的设置如下：
xvfb-run --listen-tcp --server-num 44 --auth-file /tmp/xvfb.auth -s "-ac -screen 0 1440x685x24" firefox --headless http://localhost
使用x11grab参数启动ffmpeg以从xvfb抓取帧
ffmpeg -f x11grab -video_size 1440x685 -i :44 -codec:v libx264 -r 12 ./output.mp4
结果是黑色视频:)
应该是什么问题，我该如何解决问题？
ps：还有一种可能的解决方案，我还没有尝试过。由于phantomjs具有捕获画布的功能；有可能
似乎是一个肮脏的解决方法，所以为什么还没有尝试呢。
更新1
尝试使用截屏，xwd -root -silent -display :44 -out screen.xwd然后转换为jpeg convert screen.xwd shot.jpg，结果为黑色jpg。
根据 MDN：
该
HTMLMediaElement接口添加HTMLElement了支持音频和视频常见的基本媒体相关功能所需的属性和方法。
HTMLMediaElement.captureStream(). 它可以与<video>和<canvas>元素一起使用来捕获它们的流。
相反，一个可以添加一个视频流作为srcObject一个<video>元素，则它示出了它。是否有可能为<canvas>元素呢？
是否可以将流作为源添加到 html<canvas>元素？
我有2个元素 - 视频和画布.在视频播放事件中,函数在画布上仅绘制灰度相同的视频.然后我有一个按钮,它应该将画布视频从灰度渐变回颜色.到目前为止,我已经设法在按钮点击时恢复颜色,但我需要它来淡化 - 从灰度到颜色,而不仅仅是立即显示颜色.
有关如何实现这一目标的任何想法？或者......它甚至可能吗？
这是代码:
function grey() {
if (!stop) {
bgContext.drawImage(video, 0, 0, w, h);
var pixelData = bgContext.getImageData(0, 0, w, h);
for (var i = 0; i < pixelData.data.length; i += 4 ) {
var r = pixelData.data[i];
var g = pixelData.data[i+1];
var b = pixelData.data[i+2];
var averageColour = (r + g + b) / 3;
pixelData.data[i] = averageColour;
pixelData.data[i+1] = averageColour;
pixelData.data[i+2] = averageColour;
}
context.putImageData(pixelData, 0, 0);
}
}
function color() {
bgContext.drawImage(video, 0, …我正在尝试从video画布上的元素中绘制视频.我写了以下JS代码:
$(function () {
var video = $("#video");
video.bind("loadedmetadata", function () {
var vw = this.videoWidth;
var vh = this.videoHeight;
var canvas = $('#canvas');
canvas.width(vw).height(vh);
var context = canvas.getContext("2d");
video.addEventListener("play", function () { draw(video, context, vw, vh); }, false);
});
});
function draw(video, context, vw, vh)
{
if (video.paused || video.ended)
{
return false;
}
context.drawImage(video, 0, 0, vw, vh);
setTimeout(draw, 20, video, context, vw, vh);
}
这是我的HTML:
<body>
<video id="video" autoplay controls>
<source src="src1.avi" />
<source src="src2.mov" …我想使用画布显示视频，包括播放暂停功能，允许用户通过单击画布来切换播放，我还希望在视频暂停时在视频顶部绘制叠加层。这是如何在 javascript 中完成的？
画布可用于显示来自各种来源的视频。此示例展示了如何将视频加载为文件资源、显示它并在屏幕播放/暂停切换上添加一个简单的点击。
就画布而言，视频只是一个图像。您可以像绘制任何图像一样绘制它。不同之处在于视频可以播放并且有声音。
// It is assumed you know how to add a canvas and correctly size it.
var canvas = document.getElementById("myCanvas"); // get the canvas from the page
var ctx = canvas.getContext("2d");
var videoContainer; // object to hold video and associated info
var video = document.createElement("video"); // create a video element
video.src = "urlOffVideo.webm";
// the video will now begin to load.
// As some additional info is needed we will place the video …canvas ×4
javascript ×4
html5 ×3
video ×2
base64 ×1
fetch-api ×1
ffmpeg ×1
html ×1
html5-canvas ×1
html5-video ×1
jquery ×1
media-source ×1
mediastream ×1
stream ×1
xvfb ×1