bztang-admin/plugins/video-share/views/videoGoods/image.blade.php

62 lines
2.3 KiB
PHP

@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