[英]Binding a Range Slider to Image Sequence
我想显示一个延时视频,但它带有“范围”滑块,因此用户可以前后拖动它。 我已经尝试过播放视频,但是在滚动时我不喜欢加载效果。 我还将视频导出为图像并将其绑定到范围滑块。 第一个问题是,是否没有插件或应用程序可以执行此操作? 也许我在搜索错误的术语。 其次,图像序列是执行此操作的最佳方法吗? 在下面的代码中,我可以使其部分工作,但是我无法弄清楚如何调整图像的大小,这对于画布来说是很大的方法。
<style>
canvas {
height: 650px;
width: 1000px;
border: 1px solid black;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<canvas id="canvas" height="650px" width="1000px"></canvas>
<br>
<input id="my-input" type="range" min="1" max="50" value="1">
<script type="text/javascript">
var canvas = document.getElementById("canvas");
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
var totalImages = 50;
var videoFrames = [];
for (var i = 1; i <= totalImages; i++) {
var videoFrame = new Image;
var videoFrameUrl = 'http://dacwebdesign.com/testing/images/timelapse-' + i + '.jpg';
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);
});
</script>
您可以使用以下方法调整图像大小以适合您的画布:
var currentImage = videoFrames[event.target.value - 1];
var context = canvas.getContext("2d");
var dstWidth = canvas.width;
var dstHeight = canvas.height;
var srcWidth = currentImage.naturalWidth;
var srcHeight = currentImage.naturalHeight;
context.drawImage(currentImage, 0, 0, srcWidth, srcHeight, 0, 0, dstWidth, dstHeight);
这没有考虑到长宽比,因此,如果画布与图像的长宽比不同,则它会显得失真。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.