get两个js小技能——JS截取视频第一帧&图片转Base64

这篇具有很好参考价值的文章主要介绍了get两个js小技能——JS截取视频第一帧&图片转Base64。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

背景

由于开发之前做的VisualDrag拖拽模板优化的时候,拖拽进去的图片、视频文件等需要进行截图作为封面,目前采用的截图方法是htme2canvas,使用canvas进行的截图操作,所以就会遇到这样的问题,视频和图片图床简单的使用标签加入canvas画布里面无法正确的截图成功。最后采取的措施就是将图片转为base64画入canvas,将视频截取第一帧图片,然后画进canvas,最后进行截图,最后经过折腾,这个方法好像成功了,写这篇博客进行记录下。

JS截取视频第一帧

截取视频的第一帧作为视频的封面是一个很常见的视频上传的做法。但这种做法一般会在上传进服务器时,在服务器进行截图了,这个操作方法在我之前的博客上有介绍过:https://qkongtao.cn/?p=560#h2-4

但是前端有时候为了避免浪费服务器资源,可以在前端使用js直接进行截图了。

代码如下:

<!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>js截取视频第一帧</title>
</head>

<body>
    <div>
        <button onclick="cutImage()">截取视频第一帧</button>
    </div>
    <div>
        <!-- 注意跨域画布污染 -->
        <video width="640" height="480" src="https://upyun.qkongtao.cn/kodbox/%E8%A7%86%E9%A2%91/20221016134256839.mp4"
            controls="controls" id="fileVideo" crossorigin="anonymous">您的浏览器不支持视频播放</video>
        <div>
            <p>视频第一帧:</p> <img
                src="https://upyun.qkongtao.cn/kodbox/%E8%A7%86%E9%A2%91/upload.png?_upt=5b974ef11679068799"
                id="videoImg">
        </div>
    </div>


</body>


<script>
    function cutImage() {
        // 获取音频标签
        let video = document.getElementById('fileVideo')
        video.currentTime = 2 // 第一帧
        video.oncanplay = () => {
            let canvas = document.createElement("canvas");
            let ctx = canvas.getContext('2d') // 绘制2d
            canvas.width = video.clientWidth // 获取视频宽度
            canvas.height = video.clientHeight // 获取视频高度
            // 利用canvas对象方法绘图
            ctx.drawImage(video, 0, 0, video.clientWidth, video.clientHeight)
            // 转换成base64形式
            let imgUrl = canvas.toDataURL("image/png");
            console.log('imgUrl :>> ', imgUrl);
            document.getElementById("videoImg").src = imgUrl
        }
    }
</script>

</html>

效果如下:
js 获取视频第一帧,javacript,javascript,音视频,前端

需要注意的地方是视频资源跨域导致画布污染的问题,所以需要在video标签加上 crossorigin=“anonymous” 。
如果需要截图第2帧以上则需要在video.oncanplay()方法中进行截图。

图片转Base64

在开发的很多场景中需要用到base64图片形式进行传输,这种一般会用在缩略图的小文件图片中,提高浏览器的流畅性。
当然在canvas画布中,当进行绘制图片时,最好还是先将图片img标签转换为base64之后进行drawImage(),避免画布被污染和跨域等问题。

代码如下:

<!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>图片转Base64</title>
</head>

<body>
    <div>
        <button onclick="imgToBase64()">转换成base64形式</button>
    </div>
    <img id="img" src="http://upyun.qkongtao.cn/chevereto/2022/10/28/20210917152407654.jpg" alt="" width="300">
    <p>转换成base64形式</p>
    <div id="base64" style="word-break: break-all;"></div>
</body>

<script>
    function imgToBase64() {

        var src = document.getElementById("img").src
        getImageUrlBase64(src).then(
            (dataUrl) => {
                base64Url = dataUrl;
                console.log('base64Url :>> ', base64Url);

                document.getElementById("base64").innerHTML = base64Url
            }
        );
    }



    /**@url :图片服务器上的url
     * @img :图片url对应的图片
     * */
    function getImageUrlBase64(url) {
        return new Promise((resolve, reject) => {
            const img = new Image();
            img.crossOrigin = "anonymous"; //处理跨域
            img.src = url;
            img.onload = function () {
                const canvas = document.createElement("canvas"); //创建一个canvas元素
                canvas.width = img.width; //把当前url对应的图片的宽度赋予canvas
                canvas.height = img.height; //把当前url对应的图片的高度赋予canvas
                const ctx = canvas.getContext("2d");
                ctx.drawImage(img, 0, 0, canvas.width, canvas.height); //在画布上一比一的画出img
                const dataUrl = canvas.toDataURL("image/jpeg"); //调用canvas的toDataURL获取.jpg的base64数据
                resolve(dataUrl);
            };
        });
    }
</script>

</html>

效果如下:
js 获取视频第一帧,javacript,javascript,音视频,前端文章来源地址https://www.toymoban.com/news/detail-526770.html

到了这里,关于get两个js小技能——JS截取视频第一帧&图片转Base64的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • js截取video视频某一帧做封面的简单案例

    可以使用 canvas 元素来截取视频某一帧并生成封面。 首先,在 video  标签上设置视频源地址和自动播放属性: 然后,在 canvas  标签上定义宽高和样式,并通过 JavaScript 获取视频元素和 canvas 元素: 接着,定义一个函数来截取视频某一帧,并将其渲染到 canvas 上: 在需要生成

    2024年02月04日
    浏览(53)
  • JS 怎么获取视频第一帧作为封面图?

    要获取视频的第一帧作为封面图,你可以使用HTML5的 video 元素和 JavaScript 来实现。下面是一个简单的步骤: 在HTML中,创建一个 video 元素,并设置视频的路径或URL: 在JavaScript中,获取 video 元素的引用,并监听它的 loadedmetadata 事件(视频元数据加载完成时触发): 继续在JavaS

    2024年04月10日
    浏览(39)
  • Java实现截取视频第一帧

    目录 前言 一、通过Java借助第三方库实现 1.引用ffmpeg 使用maven,导入pom依赖:  工具类 2.引用jcodec 二、使用第三方存储自带的方法实现(如阿里云OSS、华为云OBS) 在实际项目中,会遇到上传视频后,需要截取视频的首帧或指定帧为图片,作为展示使用的需求。这个需求本身

    2024年02月06日
    浏览(42)
  • 前端截取视频第一帧作为封面

    概述 1.做项目的时候突然想截取视频第一帧,作为视频的封面,然后搜了很多博客都发现得到空白的图片,最后得到了解决。 2.方法:通过创建canvas标签,利用其drawImage() 方法在画布上绘制该视频,然后运用toDataURL方法转换canvas上的图片为base64格式,并将base64格式的图片作为

    2023年04月23日
    浏览(40)
  • vue实现截取视频第一帧作为封面

    在Vue中实现截取视频第一帧作为视频封面可以通过以下步骤: 在Vue组件中引入video.js和videojs-contrib-hls插件。 在Vue组件中声明一个video元素,并给其添加id。 在Vue组件中初始化video.js插件,并监听loadedmetadata事件。 编写captureVideoThumbnail方法来截取视频第一帧。 在Vue组件中使用

    2024年02月12日
    浏览(38)
  • 纯前端播放文件流视频并预览并截取视频第一帧

    1、把文件流转为本地可以播放地址 调用 getFileURL 并传入文件流会返回一个地址,将地址赋值给 video 的 src 即可播放视频,无需上传至服务器。 2、截取视频第一帧 调用 getVideoBase64 并将第一步得到的url转给 getVideoBase64 即可得到视频第一帧图片, getVideoBase64 返回的片为 base64

    2023年04月09日
    浏览(36)
  • canvas截取多个视频的第一帧,第n秒画面

    业务涉及视频预览,不点击视频则不播放而是先展示视频的画面给到用户 “因为本人特别喜欢梅艳芳,所以也留存了很多她的视频,这里就以她的视频做测试了” 截取多个视频的第一帧,使用:Promise+loadeddata事件+canvas Promise来帮助我们顺序地拿到多个视频的第一帧画面 loa

    2023年04月08日
    浏览(41)
  • vue2实现截取视频第一帧图像作为开始封面

    要在Vue中实现截取视频的第一帧作为封面,你可以使用HTML5的元素和Canvas API来实现。loadeddata事件监听必须在视频加载完成后执行,然后通过Canvas的drawImage方法将视频帧绘制到Canvas上,并使用toDataURL方法将Canvas内容转换为Base64编码的图像数据URL 在你的Vue组件中,使用元素来加

    2024年02月12日
    浏览(36)
  • opencv视频截取每一帧并保存为图片python代码CV2实现练习

    当涉及到视频处理时,Python中的OpenCV库提供了强大的功能,可以方便地从视频中截取每一帧并将其保存为图片。这是一个很有趣的练习,可以让你更深入地了解图像处理和多媒体操作。 使用OpenCV库,你可以轻松地读取视频文件,并在循环中逐帧读取视频的每一帧。随后,你可

    2024年02月12日
    浏览(52)
  • 已实现:JS如何根据视频的http(s)地址,来截取帧图片,并实现大图压缩的功能

    现在,我们已经有了视频的http地址,我们怎么截取帧图片呢?我以Vue为基础架构,来写写代码。 1、先写布局,先得有video,然后得有canvas 界面上很简单,就一个视频容器,一个画布canvas还不让它显示,还有一个就是截取帧图片了。 接下来是js关键方法部分: 以上的代码就是

    2024年01月17日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包