Javascript 来自托管文件的画布图像src

目前我正在调用imgur的canvas源图像，但我想在我的应用程序中托管它们，比如“images/soundwave.png”。。鉴于我目前的代码，我想不出怎么做

如果有帮助的话，我正在使用中间人

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

var imgBg=新图像（），
imgFg=新图像（），
计数=2；
imgBg.onload=imgFg.onload=init；
imgBg.src=”http://i.imgur.com/hRHH9VO.png";
imgFg.src=”http://i.imgur.com/WoJggN0.png";
函数init（）{
var canvas=document.querySelector（“canvas”），
ctx=canvas.getContext（“2d”），
音频=document.querySelector（“音频”）；
画布宽度=500；
高度=120；
render（）；
addEventListener（“时间更新”，呈现）；
函数render（）{
clearRect（0，0，canvas.width，canvas.height）；
ctx.drawImage（imgBg，0，0，canvas.width，canvas.height）；
//计算进度
var progress=audio.currentTime/audio.duration；
//绘制顶部图像的剪裁版本
如果（进度>0）{
ctx.drawImage（imgFg，0，0，imgFg.width*progress，imgFg.height，//source
0,0，canvas.width*进度，canvas.height）；//dst
}
}
}

---

任何帮助都将不胜感激

在您的源目录中，您可以创建一个

图像

文件夹并将图像放入其中

然后，您可以将图像src设置为应用程序URL或相对URI（例如，

/images/hRHH9VO.png

）

---

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

这是可行的，但是否有“imgBg.src=”的替代方案；“当您正在工作时……bc还没有直播，……因此没有真正的URL……？我相信您可以设置imgBg.src=“/images/soundwave_1_dark.png”