视频截屏下载图片

最新推荐文章于 2024-05-17 13:52:13 发布

简基

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量969

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_49764670/article/details/124322229

版权

下载流程

一、video播放，调用canvas 的drawImage方法截取，再通过canvas转码解析，最后上传服务器下载至指定文件夹

1.本地下载

<!DOCTYPE html>

<head>

content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

</head>

<video style="width: 1920px;height: 1080px" id="video" controls>Your browser can't support HTML5 Audio</video>

<p><input type="file" id="file" οnchange="onInputFileChange()"><input class="cut" type="button" value="截图"

id="buttons_cut" οnclick="cut()"></p>

</div>

// 打开本地视频

function onInputFileChange() {

var file = document.getElementById('file').files[0];

var url = URL.createObjectURL(file);

console.log(url);

document.getElementById("video").src = url;

}

// 使用canvas对视频进行截图

function cut() {

var canvas = document.getElementById('canvas');

var video = document.getElementById('video');

console.log('视频尺寸：' + video.style.width + '*' + video.style.height);

canvas.width = video.videoWidth;

canvas.height = video.videoHeight;

console.log(canvas.width);

console.log(canvas.height);

var ctx = canvas.getContext('2d');

ctx.drawImage(video, 0, 0, 1920, 1080);

var base64 = canvas.toDataURL('images/png');

upload(base64);

}

// 上传图片

function upload(image) {

var imgFile = dataURLtoFile(image, "img.png");

var xhr = new XMLHttpRequest();

var fd = new FormData();

xhr.open('POST', '/springStudy/user/multifiles');

fd.append("multipartFile", imgFile);

xhr.send(fd);

console.log('上传json！')

}

//将图片Base64 转成文件

function dataURLtoFile(dataurl, filename) {

console.log("转文件")

var arr = dataurl.split(','),

mime = arr[0].match(/:(.*?);/)[1],

bstr = atob(arr[1]),

n = bstr.length,

u8arr = new Uint8Array(n);

while (n--) {

u8arr[n] = bstr.charCodeAt(n);

}

return new File([u8arr], filename, {

type: mime

});

}

</script>

</body>

</html>

2.跨域下载

前提条件：服务端配置跨域！！！（必须）前端video标签配置crossOrigin = "Anonymous"

crossorigin="anonymous"></script>

var videoElem;

var videoDiv;

//创建视频播放

function createVideo() {

videoElem = document.createElement("video"); //创建video

videoElem.width = "320";

videoElem.height = "570";

videoElem.controls = true;

videoElem.useCORS = true; //解决跨域

videoElem.crossOrigin = "Anonymous"; // 这两个参数必填解决跨域

videoElem.autoplay = false;

videoDiv = document.getElementById("videoDivId"); //获取video的外层容器

videoDiv.appendChild(videoElem);

videoElem.setAttribute('src', "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4");

}

//定时切图

function drawvideo() {

icanvas = document.getElementById("${videoId}icanvas");

var context = icanvas.getContext("2d"); //第一个复制video的画布

context.drawImage(videoElem, 0, 0, videoElem.width, videoElem.height);

}

//将图片转换成Blob

function dataURItoBlob(base64Data) {

var byteString;

if (base64Data.split(',')[0].indexOf('base64') >= 0)

byteString = atob(base64Data.split(',')[1]);

else

byteString = unescape(base64Data.split(',')[1]);

var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];

var ia = new Uint8Array(byteString.length);

for (var i = 0; i < byteString.length; i++) {

ia[i] = byteString.charCodeAt(i);

}

return new Blob([ia], {

type: mimeString

});

}

//截图

function drawimg() {

var firstcanvas = document.getElementById("${videoId}icanvas");

var img = new Image();

var imgBs64 = firstcanvas.toDataURL("image/jpeg");

img.src = imgBs64;

imgFile = dataURItoBlob(imgBs64); //该数据为图片数据，可直接上传服务器

output.innerHTML = "";

output.appendChild(img); //显示截图

}

window.onload = function () {

createVideo();

setInterval(drawvideo, 100);

if (parent.isAutoVideo) {

setTimeout(function () {

drawimg();

}, 1500)

}

var clickbtn = document.getElementById('drawImgBut');

clickbtn.onclick = function () {

drawimg();

};

}

</script>

简基

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
视频截屏下载图片

视频截屏下载图片（本地/跨域）
复制链接

扫一扫

视频截屏下载图片

“相关推荐”对你有帮助么？