javascript - 范围 slider 控制的 Canvas 需要更好的图片加载和预览图像(？)

Question

我对 javascript 和编码非常缺乏经验，所以我从我在这里和其他地方看到的一些示例中拼凑了下面的代码。该代码完成了我现在想要的 90% 的功能，但我想知道如何让它在移动 slider 之前显示数组“videoFrames”中的第一个图像，就像现在一样， Canvas 在页面加载时为空白。第二件事是，图像似乎没有在页面加载时加载，我错了吗？我如何改进/将其合并到此代码中？

var canvas = document.getElementById("myCanvas");
var width = 1920;
var height = 1080;

var totalImages = 50;
var videoFrames = [];
for (var i = 1; i <= totalImages; i++) {
  var img = new Image;
  var videoFrameUrl = 'https://the-faction.squarespace.com/assets/chalet-lightmix-01/Chalet-V06_LM_' + i + '.jpg';
  img.src = videoFrameUrl;
  videoFrames.push(img);
}

$("#my-input").on("input", function(event) {
  var currentImage = videoFrames[event.target.value - 1];
  var ctx = canvas.getContext("2d");
  ctx.drawImage(currentImage, 0, 0, canvas.width, canvas.height);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myCanvas" width="400" height="225" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.
    </canvas>
<br>
<input id="my-input" type="range" min="1" max="50" value="0" />

Answer 1

我在您的一些图像上收到 404，但我会尝试触发输入。

你确实可以立即画画

Loading an image onto a canvas with javaScript

不是等待输入，而是与触发输入相同的等待，因为 Canvas 在绘制之前必须存在

以下是如何触发 - 注意:如果图像很大，触发时第一张图像的预加载可能尚未完成

var canvas = document.getElementById("myCanvas");
var width = 1920;
var height = 1080;

var totalImages = 50;
var videoFrames = [];
for (var i = 1; i <= totalImages; i++) {
  var img = new Image;
  var videoFrameUrl = 'https://the-faction.squarespace.com/assets/chalet-lightmix-01/Chalet-V06_LM_' + i + '.jpg';
  img.src = videoFrameUrl;
  videoFrames.push(img);
}

$("#my-input").on("input", function(event) {
  var currentImage = videoFrames[event.target.value - 1];
  console.log("val",currentImage)
  var ctx = canvas.getContext("2d");
  ctx.drawImage(currentImage, 0, 0, canvas.width, canvas.height);
}).trigger("input");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myCanvas" width="400" height="225" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.
    </canvas>
<br>
<input id="my-input" type="range" min="1" max="50" value="0" />

可能运行得更好的版本

var canvas,ctx;
$(function() {
  canvas=$("#myCanvas")[0];
  ctx = canvas.getContext("2d");
  $("#my-input").on("input", function(event) {
    var currentImage = videoFrames[this.value];
    ctx.drawImage(currentImage, 0, 0, canvas.width, canvas.height);
  })

  var totalImages = 50;
  var videoFrames = [];
  for (var i = 1; i <= totalImages; i++) {
    videoFrames[i] = new Image();
    if (i === 1) {
      videoFrames[i].onload = function() {
        console.log("loaded")
        $("#my-input").trigger("input");
      }
    }
    videoFrames[i].src = 'https://the-faction.squarespace.com/assets/chalet-lightmix-01/Chalet-V06_LM_' + i + '.jpg';
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myCanvas" width="400" height="225" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.
    </canvas>
<br>
<input id="my-input" type="range" min="1" max="50" value="1" />