canvas渲染video视频，并添加图像设置功能，
source link: http://www.hywel.cn/2020/10/16/canvas%E6%B8%B2%E6%9F%93video%E8%A7%86%E9%A2%91%EF%BC%8C%E5%B9%B6%E6%B7%BB%E5%8A%A0%E5%9B%BE%E5%83%8F%E8%AE%BE%E7%BD%AE%E5%8A%9F%E8%83%BD%EF%BC%8C/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
canvas渲染video视频，并添加图像设置功能，
Posted on
2020-10-16 In Web前端
本文主要展示使用canvas来实时的获取video并动态播放的例子。
function drawCanvas() {
if (videoElement.paused videoElement.ended) {
return;
}
var canvas = $(“#canvas”);
var _canvas = canvas.get(0);
context = _canvas.getContext(“2d”);
canvas.attr({
width: videoElement.videoWidth,
height: videoElement.videoHeight
})
context.clearRect(0, 0, videoElement.videoWidth, videoElement.videoHeight);
context.fillStyle = ‘red’;
context.fillStyle = ‘rgba(255,255,0,0.5)’;
context.drawImage(videoElement, 0, 0, videoElement.videoWidth, videoElement.videoHeight, 0, 0, videoElement.videoWidth, videoElement.videoHeight);
if (videoElement.videoWidth > 0 && videoElement.videoHeight > 0) {
var filters = “blur(“ + (_blur.getCurVal() / 10) + “px) brightness(“ + (_brightness.getCurVal() / 10) + “) contrast(“ + (_contrast.getCurVal() / 10) + “) grayscale(“ + (_grayscale.getCurVal() / 100) + “) hue-rotate(“ + (_hue_rotate.getCurVal()) + “deg) invert(“ + (_invert.getCurVal() / 100) + “) saturate(“ + (_saturate.getCurVal() / 10) + “) sepia(“ + (_sepia.getCurVal() / 100) + “)”;
$(“#canvas”).css({
‘-webkit-filter’: filters,
‘max-width’: ‘100%’
});
}
setTimeout(drawCanvas, 24);
}
Recommend
-
148
前言前段时间遇到了一个移动端对图像进行裁剪、压缩、旋转的需求。考虑到已有各轮子的契合度都不高，于是自己重新造了一个轮子。 关于图像裁剪、压缩在HTML5时代，canvas的功能已经非常强大了，可以进行像素级的操作。像图像裁剪、压缩就都是基于canvas来实现的
-
85
项目详情 github 地址： github demo实例：demo 背景 起初，在公司做一些活动页的时候，经常需要用到截图分享的千人千面的功能，而且这种需求并不止一两次，而是经常会出现在各种各样的截图场景。第一次碰到这种需求的时候，基本上都会去手撸canv
-
67
留言板的标准特性之一是允许成员签名,这是附加到每个帖子的底部。 可以把任何他们想要到签名海报(在论坛设置)。 把报价放在一个签名是一个比较流行的事情要做。很多人把一些座右铭他们住,一些有趣的引用一些名人等等。 有些人喜欢引用其他海报在黑板上说道。 我是...
-
9
简 简介： 这篇文章主要从技术视角介绍下跨平台WebCanvas的架构设计以及一些关键模块的实现方案(以Android为主)，限于作者水平，有不准确的地方欢迎指正或者讨论。 标准化：Web Canvas标准主要指的是...
-
8
V2EX › NVIDIA 用过云计算服务做图像、视频渲染的来讲讲经验？ gengchun · 9 小时 11 分钟...
-
4
淘宝小部件 Canvas 渲染流程与原理全解析 作者：史健平(楚奕) 上篇回顾：《
-
11
C#/VB.NET 给PDF文档添加文本/图像水印 原创 毛毛雨大人 2022-07-01 17:3...
-
5
微软Bing Chat宣布在聊天答案中添加图像 并支持购物商品对比 ...
-
9
[译]通过HTML5 Canvas API调节图像的亮度和颜色译自：Adjusting Image Brightness and Color Using the HTML...
-
9
2023-10-06 06:03 研究表明：为 AI 生成图像添加的数字水印可被轻易破解 据 IT之家 10 月 6 日报道，据外媒 Engadget、Wired 等报道，美国马里兰大学的一个研究小组对 AI 生成内容的“数字水印”技术可靠性进行研究，发现这一技术可...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK