我正在创建一个漫游视频,用户可以在其中滑动 UI slider ,然后相机将在 3D 空间中漫游。
视频已导出为jpg帧,编号为0到350.jpg。
我首先预加载所有帧,然后将函数应用于 slider 更改。
这是 Canvas
<canvas id="walkthrough" width="1280" height="300"></canvas>
这是应用 data.value 的 jQuery UI slider 的函数
$("[data-slider]")
.each(function () {
var input = $(this);
$("<span>")
.addClass("output")
.insertAfter($(this));
})
.bind("slider:ready slider:changed", function (event, data) {
$(this)
.nextAll(".output:first")
.html(data.value.toFixed(3));
});
这是图像预加载函数
var totalImages = 50; // Wow, so many images for such a short clip
var images = new Array();
for(var i = 1; i < totalImages; i++) {
var filename = '/walkthrough/' + i + '.jpg'; // Filename of each image
var img = new Image;
img.src = filename;
images.push(img);
}
这是当 slider 改变时应该将图像绘制到 Canvas 的函数
$("#my-input").bind("slider:changed", function (event, data) {
var currentimage = '/walkthrough/' + data.value + '.jpg';
var canvas = document.getElementById("walkthrough");
var context = canvas.getContext("2d");
context.drawImage(currentimage,10,10);
});
我试图从我在这里读到的一篇文章中改编这段代码,这篇文章使用滚动位置而不是 data.value 来绘制图像。
http://elikirk.com/canvas-based-scroll-controlled-backgroud-video-use-parallax-style-web-design/
我很感激任何帮助!
最佳答案
这是一个使用 slider 更改 Canvas 上绘制的图像的演示。与您的代码的一些显着差异:
- 使用原生 HTML5 slider 而不是 jQuery UI
- 使用
input
事件而不是change
事件来检测 slider 变化 - 使用
event.target.value
而不是data
访问 slider 值(未在input
事件中定义)< - 使用 slider 值作为预加载图像数组的索引而不是文件路径
var canvas = document.getElementById("canvas");
canvas.height = 150;
canvas.width = 400;
var totalImages = 72;
var videoFrames = [];
for (var i = 1; i <= totalImages; i++) {
var videoFrame = new Image;
var videoFrameUrl = 'http://rphv.net/walkthrough/tmp-' + i + '.gif';
videoFrame.src = videoFrameUrl;
videoFrames.push(videoFrame);
}
$("#my-input").on("input", function(event) {
var currentImage = videoFrames[event.target.value - 1];
var context = canvas.getContext("2d");
context.drawImage(currentImage, 0, 0);
});
html,
body {
height: 100%;
margin: 0 auto;
}
canvas {
height: 150px;
width: 400px;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas"></canvas>
<br>
<input id="my-input" type="range" min="1" max="72" value="1" />
关于javascript - 在html5 Canvas 上逐帧绘制视频并用 slider 控制,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31196113/