在iframe中使用画布绘制图像

Question

我在HTML文件中有一个canvas元素，我在<iframe>中调用它。问题是画布加载一些图像而忽略其他图像。甚至有时候相同的图像也不会被绘制出来。我尝试了多种解决方案。路径是本地文件系统。首先将图像下载到服务器，然后调用脚本。以下是我的JS脚本：

function loadCanvas(e) {
  alert(e.getSource().getProperty("sourcePath"));
  var path = e.getSource().getProperty("sourcePath");
  var source = e.getSource();
  alert('source' + source);
  var ADFiframe = source.findComponent("if1");
   alert('ADFiframe' + ADFiframe);
  var iframe = document.getElementById(ADFiframe.getClientId()).firstChild;
  alert('iframe' + iframe);
  var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;
    alert('innerDoc' + innerDoc);
  var canvas = innerDoc.getElementById("imageView");
  alert('canvas' + canvas);
  var context = canvas.getContext('2d');
  var img = new Image();
  img.src = path;
  alert('path' +path);
  img.onload = function() {
    alert('img.src' + img.src);
  alert('Press OK to load your image');
  context.drawImage(img, 0, 0, 700, 700);

  };
 // img.onerror= function(){
 // alert('Ooops,Error loading this image');
 // };
}