在HTML5画布上逐帧绘制视频并通过滑块控制

Question

我正在创建一个漫游视频，用户可以在屏幕上滑动 UI 滑块，相机会穿过 3D 空间。

视频已导出为 jpg 帧，并编号为 0 到 350.jpg。

我要先预加载所有帧，然后将函数应用于滑块更改。

这是画布。

<canvas id="walkthrough" width="1280" height="300"></canvas>

这是来自jQuery UI滑块的函数，应用数据值data.value。

$("[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);
}

当滑块改变时，此函数应在画布上绘制图像。

$("#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/ 非常感谢您的帮助!

- Todd Padwick

Answer 1

这里有一个演示，它使用滑动条来改变画布上绘制的图像。与您的代码相比，有一些值得注意的区别：

• 使用本机HTML5滑块而不是jQuery UI
• 使用事件而不是事件来检测滑块更改
• 使用访问滑块值，而不是<数据>（在事件上未定义）
• 将滑块值用作预加载图像数组中的索引，而不是文件路径

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" />

- rphv