相关疑难解决方法(0)

是否可以捕获或打印html画布中显示的图像或pdf？

我想通过画布生成一个图像,并能够从该图像生成一个png.

我正在开展一个项目,我想:

1. 加载视频js并将其显示在画布上.
2. 使用过滤器来改变画布的外观(以及视频).
3. 使用MediaStream captureStream()方法和MediaRecorder对象记录画布表面和原始视频的音频.
4. 在HTML视频元素中播放画布和音频的流.

我已经能够通过调整这个WebRTC演示代码在视频元素中显示画布记录:https://webrtc.github.io/samples/src/content/capture/canvas-record/

也就是说,我无法弄清楚如何在画布旁边录制视频的音频.是否可以从两个不同的源/元素创建包含MediaStreamTrack实例的MediaStream？

根据MediaStream API的规范,理论上应该有一些方法来实现这个目标:https: //w3c.github.io/mediacapture-main/#introduction

"MediaStream API中的两个主要组件是MediaStreamTrack和MediaStream接口.MediaStreamTrack对象表示源自用户代理中的一个媒体源的单一类型的媒体,例如由网络摄像头生成的视频.MediaStream用于分组几个MediaStreamTrack对象分成一个单元,可以在媒体元素中记录或渲染."

我想知道,因为HTML和javascript一起迷人,如果HTML5中有一个解决方案来生成许多图像的视频文件？

例如,您可以通过操作画布将视频加载到画布中并使其显示为灰度视频.但是,我想知道,如果有一种方法可以从该greyscaled版本生成视频文件.如果你想通过whatsapp等发送视频,那将是有意义的.

谢谢

按下面的“运行代码片段”即可查看我要保存的动画加载微调器。

我想用透明度替换所有绿色。

另外，我希望动画能够完美循环。

我尝试使用 OBS 录制屏幕捕获视频，然后上传到https://ezgif.com/video-to-gif并使用“用透明度替换颜色”功能，但它根本没有删除任何绿色。

另外，如果导出canvas动画比捕获 CSS 动画更容易，我会接受向我展示如何操作的答案。

body {
  display: flex;
  overflow: hidden;
  height: 100vf;
  padding: 0;
  margin: 0;
  background-color: #090;
}
.container {
  background-color: #0c0;
  height: 500px;
  width: 500px;
}
.sym {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(white 50%, black 0);
  animation: r 8s linear infinite;
}
.sym:before, .sym:after {
  --i: 0;
  position: absolute;
  top: 25%;
  right: calc((1 - var(--i))*50%);
  bottom: 25%;
  left: calc(var(--i)*50%);
  border: solid …