@extends('layouts.base')
@section('title', '发现管理')
@section('content')
    <video src="{{$path}}" controls="controls" id="video">
    </video>
    <div id="imgbox"></div>
    <script type="text/javascript">
        (function(){
            var video, output;
            var scale = 0.8;
            var init = function() {
                imgbox = document.getElementById("imgbox");
                video = document.getElementById("video");
                video.addEventListener('loadeddata',captureImage);
            };

            var dataURItoBlob = function(dataURI) {
              // 图片转成Buffer---------------------------------
              var byteString = atob(dataURI.split(",")[1]);
              var mimeString = dataURI
                .split(",")[0]
                .split(":")[1]
                .split(";")[0];
              var ab = new ArrayBuffer(byteString.length);
              var ia = new Uint8Array(ab);
              for (var i = 0; i < byteString.length; i++) {
                ia[i] = byteString.charCodeAt(i);
              }
              return new Blob([ab], { type: mimeString });
            }

            var captureImage = function() {
                var canvas = document.createElement("canvas");//创建一个canvas
                canvas.width = video.videoWidth * scale;//设置canvas的宽度为视频的宽度
                canvas.height = video.videoHeight * scale;//设置canvas的高度为视频的高度
                canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);//绘制图像

                var img = document.createElement("img");//创建img
                img.src = canvas.toDataURL("image/png");//将绘制的图像用img显示出来

                let coverUrl = dataURItoBlob(img.src);
                console.log(coverUrl);
                sub(coverUrl);
                imgbox.appendChild(img);//将img添加到imgbox里
            };



            init();

            var sub = function (coverUrl) {
                let fd = new FormData();
                fd.append("file", coverUrl);
                $.post("{!! yzWebUrl('plugin.video-share.frontend.upload.upload') !!}", {
                    img: fd
                }, function (json) {

                });
            }
        })();
</script>
@endsection