zoukankan      html  css  js  c++  java
  • js + html 实现视频截图

    思路

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

    使用语法

    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,还在寻找合适的处理方法。。。

  • 相关阅读:
    Centos下使用Docker部署MySql
    用C#编写游戏脚本
    VS2013使用自带的数据库 Microsoft SQL Server 2012 Express LocalDB
    WIN11下访问Gitee(WIN11下GITEE 拉取PULL和推送PUSH失败的解决办法)
    前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)
    前端MVC Vue2学习总结(一)——MVC与vue2概要、模板、数据绑定与综合示例
    JavaScript学习总结(五)——jQuery插件开发与发布
    JavaScript学习总结(四)——this、原型链、javascript面向对象
    JavaScript学习总结(三)——闭包、IIFE、apply、函数与对象
    JavaScript学习总结(二)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
  • 原文地址:https://www.cnblogs.com/surfingcat/p/14680152.html
Copyright © 2011-2022 走看看