do a video screenshot function. After canvas is finished, the picture is changed into a picture and saved locally. It is said that it is a cross-domain problem when checked on the
Internet. My videos and pictures are in my local ah, and then put the pictures on the server, but also reported an error.
here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv=" X-UA-Compatible" content=" IE=edge,chrome=1/>
<!-- <link rel="stylesheet" href="http://v3.faqrobot.org/hvb/com/css/reset.css?dev=1"> -->
<!-- <script type="text/javascript" src="http://v3.faqrobot.org/hvb/com/js/jquery-1.11.3.min.js?dev=1"></script> -->
<!-- <script type="text/javascript" src="http://v3.faqrobot.org/hvb/com/js/base.js?dev=1"></script> -->
<title>video</title>
<script type="text/javascript" src="./jquery-3.3.1.min.js"></script>
<style>
body, html {
width: 100%;
height: 100%;
}
video {
width: 400px;
}
canvas {
width: 200px;
}
</style>
</head>
<body>
<video src="./movie.ogg" controls autoplay></video>
<img src="http://169.254.186.44/webwxgetmsgimg.jpg" crossorigin="anonymous"/>
<img src="./1.png" />
<div class="cut"></div>
<canvas></canvas>
<script>
;$(function() {
<!-- https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=59125745,2894869156&fm=58 -->
var $canvas = $("canvas");
var $video = $("video");
$canvas.attr({
width: $video.width(),
height: $video.height(),
});
$video[0].onloadstart = function(e) {
console.log(e.srcElement.videoWidth);
console.log(this.videoWidth);
}
var ctx = $canvas[0].getContext("2d");
$(".cut").on("click", function() {
var w = $video[0].videoWidth;//
var h = $video[0].videoHeight;//
$canvas.attr({
width: w,
height: h,
});
var img = new Image();
img.setAttribute("crossOrigin", "anonymous");
img.src = "https://img.codeshelper.com/upload/img/2021/03/13/rv4geqglgwo7805.jpg";
img.onload = function () {
ctx.drawImage($video[0], 0, 0, w, h);
var base64 = $canvas[0].toDataURL("images/jpg");
console.log(base64);
}
console.log(666)
});
});
</script>
</body>