Привязка ползунка диапазона к последовательности изображений - PullRequest
Новая
       45

Привязка ползунка диапазона к последовательности изображений

0 голосов
/ 02 февраля 2019

Я хочу показать видео с интервальной съемкой, но иметь слайдер Range, чтобы пользователь мог перетаскивать его вперед и назад.Я пробовал с видео, но мне не нравится эффект загрузки при прокрутке.Я также экспортировал видео в виде изображений и связал его с ползунком диапазона.Первый вопрос: есть ли какие-нибудь плагины или приложения, которые делают это?Может быть, я ищу неправильные термины.Во-вторых, является ли последовательность изображений лучшим способом сделать это?В приведенном ниже коде я могу заставить его работать частично, но я не могу понять, как изменить размер изображения, и это очень важно для холста. 

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

1 Ответ

0 голосов
/ 02 февраля 2019

Вы можете изменить размеры изображений, чтобы они соответствовали вашему холсту: 

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);

Это не учитывает пропорции, поэтому, если ваш холст имеет другое соотношение сторон к вашим изображениям, он будет выглядеть искаженным.

...