草庐IT

javascript - 从视频帧在 Canvas 中绘制图像改变色调

coder 2024-05-17 原文

我写了一个简单的脚本，从视频中提取一帧并将其绘制到 Canvas 上。我的问题是视频和绘制图像之间的颜色在变化。

我将结果放在原始结果旁边，以便于查看。原来的在左边。顺便说一句，它在 chrome 浏览器上似乎更明显。我在 OSX 上进行的所有测试。

这里是一个片段，左边是 Canvas ，右边是视频:

 // Get our mask image
var canvas = document.querySelector(".canvas");
var video = document.querySelector(".video");

var ctx = canvas.getContext('2d');
function drawMaskedVideo() {
  ctx.drawImage(video, 0, 0, video.videoWidth/2, video.videoHeight, 0,0, video.videoWidth/2,  video.videoHeight);
}

requestAnimationFrame(function loop() {
  drawMaskedVideo();
  requestAnimationFrame(loop.bind(this));
});
html, body {
  margin: 0 auto;
}
.video, .canvas {
  width: 100%;
}

.canvas {
  position: absolute;
  top: 0;
  left: 0;
}
<video class="video" autoplay="autoplay" muted="muted" preload="auto" loop="loop">
    <source src="http://mazwai.com/system/posts/videos/000/000/214/original/finn-karstens_winter-wonderland-kiel.mp4" type="video/mp4">
</video>
<canvas class='canvas' width='1280' height='720'></canvas>

我想知道为什么会发生这种情况，是否有可能以跨浏览器的方式摆脱它？

这里是我写的简单脚本:

let video = document.querySelector('#my-video') // .mp4 file used
let w = video.videoWidth;
let h = video.videoHeight;
let canvas = document.createElement('canvas');
    canvas.width  = w;
    canvas.height = h;
let ctx = canvas.getContext('2d');

ctx.drawImage(video, 0, 0, w, h)

document.querySelector('.canvas-container').appendChild(canvas);

最佳答案

解决方案可能就像为视频元素设置一个 css filter 一样简单:

.video {
    -webkit-filter: contrast(100%);
}

我无法对此进行推理，因为它是偶然发现的(玩你的演示并阅读相关答案)，所以我把技术解释留给其他人，现在留给你一些魔法。

Any sufficiently advanced technology is indistinguishable from magic.

— Arthur C. Clarke

 // Get our mask image
var canvas = document.querySelector(".canvas");
var video = document.querySelector(".video");

var ctx = canvas.getContext('2d');
function drawMaskedVideo() {
  ctx.drawImage(video, 0, 0, video.videoWidth/2, video.videoHeight, 0,0, video.videoWidth/2,  video.videoHeight);
}

requestAnimationFrame(function loop() {
  drawMaskedVideo();
  requestAnimationFrame(loop.bind(this));
});
html, body {
  margin: 0 auto;
}
.video, .canvas {
  width: 100%;
}
.video {
  -webkit-filter: contrast(100%);
}

.canvas {
  position: absolute;
  top: 0;
  left: 0;
}
<video class="video" autoplay="autoplay" muted="muted" preload="auto" loop="loop">
    <source src="http://mazwai.com/system/posts/videos/000/000/214/original/finn-karstens_winter-wonderland-kiel.mp4" type="video/mp4">
</video>
<canvas class='canvas' width='1280' height='720'></canvas>

注意: 在 Macbook Pro(2.3 GHz Intel Core i5)上运行它，我看不出性能有什么不同。在视频播放期间跟踪 CPU，两个演示都空闲在 28% 左右。

关于javascript - 从视频帧在 Canvas 中绘制图像改变色调，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45884058/

javascriptCanvasvideocodehtml5-canvashtml5-videodrawimage

有关javascript - 从视频帧在 Canvas 中绘制图像改变色调的更多相关文章

  1. ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2

    我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在，我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式？我不这么认为……或者有什么rake任务可以重新生成样式吗？ 最佳答案 参见Thumbnail-Generation.如果rake任务不适合你，你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司

  2. ruby-on-rails - 在 Ruby (on Rails) 中使用 imgur API 获取图像 - 2

    我正在尝试使用Ruby2.0.0和Rails4.0.0提供的API从imgur中提取图像。我已尝试按照Ruby2.0.0文档中列出的各种方式构建http请求，但均无济于事。代码如下:require'net/http'require'net/https'defimgurheaders={"Authorization"=>"Client-ID"+my_client_id}path="/3/gallery/image/#{img_id}.json"uri=URI("https://api.imgur.com"+path)request,data=Net::HTTP::Get.new(path

  3. 动漫制作技巧如何制作动漫视频 - 2

    动漫制作技巧是很多新人想了解的问题，今天小编就来解答与大家分享一下动漫制作流程，为了帮助有兴趣的同学理解，大多数人会选择动漫培训机构，那么今天小编就带大家来看看动漫制作要掌握哪些技巧？一、动漫作品首先完成草图设计和原型制作。设计草图要有目的、有对象、有步骤、要形象、要简单、符合实际。设计图要一致性，以保证制作的顺利进行。二、原型制作是根据设计图纸和制作材料，可以是手绘也可以是3d软件创建。在此步骤中，要注意的问题是色彩和平面布局。三、动漫制作制作完成后，加工成型。完成不同的表现形式后，就要对设计稿进行加工处理，使加工的难易度降低，并得到一些基本准确的概念，以便于后续的大样、准确的尺寸制定。四、

  4. python ffmpeg 使用 pyav 转换 一组图像 到 视频 - 2

    2022/8/4更新支持加入水印水印必须包含透明图像，并且水印图像大小要等于原图像的大小pythonconvert_image_to_video.py-f30-mwatermark.pngim_dirout.mkv2022/6/21更新让命令行参数更加易用新的命令行使用方法pythonconvert_image_to_video.py-f30im_dirout.mkvFFMPEG命令行转换一组JPG图像到视频时，是将这组图像视为MJPG流。我需要转换一组PNG图像到视频，FFMPEG就不认了。pyav内置了ffmpeg库，不需要系统带有ffmpeg工具因此我使用ffmpeg的python包装p

  5. TimeSformer：抛弃CNN的Transformer视频理解框架 - 2

    Transformers开始在视频识别领域的“猪突猛进”，各种改进和魔改层出不穷。由此作者将开启VideoTransformer系列的讲解，本篇主要介绍了FBAI团队的TimeSformer，这也是第一篇使用纯Transformer结构在视频识别上的文章。如果觉得有用，就请点赞、收藏、关注！paper:https://arxiv.org/abs/2102.05095code(offical):https://github.com/facebookresearch/TimeSformeraccept:ICML2021author:FacebookAI一、前言Transformers(VIT)在图

  6. ruby - 是否有将图像文件转换为 ASCII 艺术的命令行程序或库？ - 2

    有这样的事吗？我想在Ruby程序中使用它。 最佳答案 试试这个http://csl.sublevel3.org/jp2a/此外，Imagemagick可能还有一些东西 关于ruby-是否有将图像文件转换为ASCII艺术的命令行程序或库？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/6510445/

  7. ruby - 改变替换的大小写 - 2

    我有以下内容:text.gsub(/(lower)(upper)/,'\1\2')我可以将\2替换为大写吗？类似于:sed-e's/\(abc\)/\U\1/'这在Ruby中可行吗？ 最佳答案 查看gsub文档:str.gsub(模式){|匹配|block}→new_str在block形式中，当前匹配字符串作为参数传入，$1、$2、$`、$&、$'等变量将被适当设置。block返回的值将替换为每次调用的匹配项。"alowerupperb".gsub(/(lower)(upper)/){|s|$1+""+$2.upcase}

  8. ruby-on-rails - 使用 Dragonfly 从 URL 分配图像 - 2

    我正在使用Dragonfly在Rails3.1应用程序上处理图像。我正在努力通过url将图像分配给模型。我有一个很好的表格:{:multipart=>true}do|f|%>RemovePicture?Dragonfly的文档指出:Dragonfly提供了一个直接从url分配的访问器:@album.cover_image_url='http://some.url/file.jpg'但是当我在控制台中尝试时:=>#ruby-1.9.2-p290>picture.image_url="http://i.imgur.com/QQiMz.jpg"=>"http://i.imgur.com/QQ

  9. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  10. Ruby-vips 图像处理库。有什么好的使用示例吗？ - 2

    我对图像处理完全陌生。我对JPEG内部是什么以及它是如何工作一无所知。我想知道，是否可以在某处找到执行以下简单操作的ruby​​代码:打开jpeg文件。遍历每个像素并将其颜色设置为fx绿色。将结果写入另一个文件。我对如何使用ruby​​-vips库实现这一点特别感兴趣https://github.com/ender672/ruby-vips我的目标-学习如何使用ruby​​-vips执行基本的图像处理操作(Gamma校正、亮度、色调……)任何指向比“helloworld”更复杂的工作示例的链接——比如ruby​​-vips的github页面上的链接，我们将不胜感激!如果有ruby​​-

随机推荐