js + html 实现视频截图

思路

使用Canvas API中的CanvasRenderingContext2D实例方法drawImage()来截取video的图片
文档指路：https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage

使用语法

?
1
2
3
void ctx.drawImage(image, dx, dy);
void ctx.drawImage(image, dx, dy, dWidth, dHeight);
void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

参数

image

绘制到上下文的元素。允许任何的 canvas 图像源(CanvasImageSource)，例如：CSSImageValue (en-US)，HTMLImageElement，SVGImageElement (en-US)，HTMLVideoElement，HTMLCanvasElement，ImageBitmap 或者OffscreenCanvas。

sx可选

需要绘制到目标上下文中的，image的矩形（裁剪）选择框的左上角 X 轴坐标。

sy可选

需要绘制到目标上下文中的，image的矩形（裁剪）选择框的左上角 Y 轴坐标。

sWidth可选

需要绘制到目标上下文中的，image的矩形（裁剪）选择框的宽度。如果不说明，整个矩形（裁剪）从坐标的sx和sy开始，到image的右下角结束。

sHeight可选

需要绘制到目标上下文中的，image的矩形（裁剪）选择框的高度。

dx

image的左上角在目标canvas上 X 轴坐标。

dy

image的左上角在目标canvas上 Y 轴坐标。

dWidth可选

image在目标canvas上绘制的宽度。 允许对绘制的image进行缩放。 如果不说明， 在绘制时image宽度不会缩放。

dHeight可选

image在目标canvas上绘制的高度。 允许对绘制的image进行缩放。 如果不说明， 在绘制时image高度不会缩放。

实现代码

复制代码
var video =  document.getElementById("videoBox");
var canvas = document.createElement("canvas");
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
console.log(canvas.toDataURL());
var img = document.createElement("img");
img.src = canvas.toDataURL();
// 找个地方放图片
document.getElementById("imgOut").append(img)
复制代码

完整代码

 

复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <video id="videoBox" autoplay controls="controls">
        <source src="D:/videos/无聊的自拍.mp4" />
    </video>
    <button onclick="cut()">截图</button>
    <div id="imgOut"></div>
    <script>
        function cut() {
            "use strict";
            var scale = 0.25;
            var video = document.getElementById("videoBox");
            var canvas = document.createElement("canvas");
            canvas.width = video.videoWidth * scale;
            canvas.height = video.videoHeight * scale;
            canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
            canvas.setAttribute("id", "canvas");
            document.getElementById("imgOut").append(canvas)
        }
    </script>
</body>

</html>
复制代码

效果

 

 顺带说一下，canvas用toDataURL()这个方法会报错，文档指路： https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_enabled_image，还在寻找合适的处理方法。。。

posted @   SurfingCat  阅读(1384)  评论(0)  编辑  收藏  举报
编辑推荐：
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
点击右上角即可分享
微信分享提示
AI IDE Trae