Canvas 来自托管文件的图像源

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 模板助手。

Canvas 来自托管文件的图像源

Canvas image src from hosted file

html

javascript

canvas

html5-canvas