Question

目前我正在调用imgur中的画布源图像，但我想在我的应用程序中托管它们，比如＆＃34; images / soundwave.png＆＃34; ...... ..鉴于我目前的代码，我不能数字如何做到这一点。

如果它对我使用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设置为您的应用网址或相对URI（例如/images/hRHH9VO.png）。

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

托管文件中的画布图像src

1 个答案: