cropper.js 视频截图

3336.gif

Cropper是一个裁剪图片的插件,稍微修改也可以用到视频上。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/cropper.css">
    <script src="jquery.min.js"></script>
    <script src="js/cropper.js"></script>
    <style>
        img {
            max-width: 100%;
        }
        body {
            margin: 0;
            padding: 0;
        }
        .fg {
            height: 240px;
            width: 320px;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <!-- muted 加上静音 防止噪声 -->
    <video muted id="videos" width="320" height="240" controls="controls" autoplay="autoplay" loop="loop">
        <source src="movie.ogg" type="video/ogg">
    </video>
    <div>
        <img id="image" src="1.png">
    </div>
    <button>裁剪</button>
    <canvas width="320" height="240"></canvas>
</body>
<script>
    $(".btn").click(function () {
        ctx.clearRect(0, 0, 1000, 1000);
        $data = $('#image').cropper('getCropBoxData', true);
        console.log($data);
        ctx.drawImage(video, $data.left, $data.top, $data.width, $data.height, 0, 0, $data.width, $data.height);
    })
</script>
<script>
    var canvas = document.querySelectorAll('canvas')[0];
    var ctx = canvas.getContext('2d');
    var video = document.getElementById('videos');
</script>
<script>
    var $image = $('#image');
    $image.cropper({
        viewMode: 3,
        aspectRatio: 16 / 9,
        crop: function (e) {
            video.play();
        }
    }); 
    var cropper = $image.data('cropper');
</script>
</html>

注意这里有一个1.png这是一张透明图片。另外JS也需要修改。

var TEMPLATE = '<div class="cropper-container" touch-action="none">' 
+ '<div style="display: none" class="cropper-wrap-box">' 
+ '<div class="cropper-canvas"></div>' 
+ '</div>' 
+ '<div class="cropper-drag-box" style="display: none"  ></div>' 
+ '<div class="cropper-crop-box">' 
+ '<span class="cropper-view-box"></span>' 
+ '<span class="cropper-dashed dashed-h"></span>' 
+ '<span class="cropper-dashed dashed-v"></span>' 
+ '<span class="cropper-center"></span>' 
+ '<span class="cropper-face"></span>' 
+ '<span class="cropper-line line-e" data-cropper-action="e"></span>' 
+ '<span class="cropper-line line-n" data-cropper-action="n"></span>' 
+ '<span class="cropper-line line-w" data-cropper-action="w"></span>' 
+ '<span class="cropper-line line-s" data-cropper-action="s"></span>' 
+ '<span class="cropper-point point-e" data-cropper-action="e"></span>' 
+ '<span class="cropper-point point-n" data-cropper-action="n"></span>' 
+ '<span class="cropper-point point-w" data-cropper-action="w"></span>' 
+ '<span class="cropper-point point-s" data-cropper-action="s"></span>' 
+ '<span class="cropper-point point-ne" data-cropper-action="ne"></span>' 
+ '<span class="cropper-point point-nw" data-cropper-action="nw"></span>' 
+ '<span class="cropper-point point-sw" data-cropper-action="sw"></span>' 
+ '<span class="cropper-point point-se" data-cropper-action="se"></span>' 
+ '</div>' 
+ '</div>';

这里主要是增加了display:none。隐藏掉一些控件自带的背景。

CSS也需要修改 .cropper-bg 去掉background-image属性。


cropper.js 视频截图


关注小程序 [上下博客] 扫码手机完整阅读

本站如无特别说明即为原创,转而告知:(https://www.iwonmo.com/archives/1661.html)

标签: js视频裁剪, video截图, 视频截图

添加新评论