javascript - 来自托管文件的 Canvas 图像 src

Question

目前我正在调用来自 imgur 的 Canvas 源图像，但我想将它们托管在我的应用程序中，例如“images/soundwave.png”......鉴于我当前的代码，我不知道该怎么做.

如果有帮助，我正在使用 Middleman

<script>
  var imgBg = new Image(),
      imgFg = new Image(),
      count = 2;
  imgBg.onload = imgFg.onload = init;
  imgBg.src = "http://i.imgur.com/hRHH9VO.png";
  imgFg.src = "http://i.imgur.com/WoJggN0.png";

  function init() {

     var canvas = document.querySelector("canvas"),
         ctx = canvas.getContext("2d"),
         audio =  document.querySelector("audio");

    canvas.width = 500;
    canvas.height = 120;

    render();

    audio.addEventListener("timeupdate", render);

    function render() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(imgBg, 0, 0, canvas.width, canvas.height);


      // calc progress
      var progress = audio.currentTime / audio.duration;

      // draw clipped version of top image
      if (progress > 0) {
        ctx.drawImage(imgFg, 0, 0, imgFg.width * progress, imgFg.height,  // source
                             0, 0, canvas.width * progress, canvas.height); // dst
      }
    }
  }
</script>

任何帮助将不胜感激

Answer 1

在您的源目录中，您可以创建一个images 文件夹并将图像放在那里。

然后，您可以将图像 src 设置为您的应用程序 URL 或相对 URI(例如 /images/hRHH9VO.png)。

然后，如果您只需要在页面中嵌入图像，您可以使用 image_tag模板助手。