极客观点
项目管理
HarmonyOS
做一个视频截图功能，canvas画完变成图片保存到本地，
网上查了说是跨域问题。 我的视频和图片都是在我本地的啊，后来把图片放到了服务器上，也是报错。。。
下面是代码
<!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 = 'http://169.254.186.44/webwxgetmsgimg.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> 
html5
已经解决了。canvas.toDataURL 必须在服务器端用才行