Javascript 当传递使用jQuery找到的图像时，HtmlCanvaContext.drawImage（）失败

我的代码的想法是创建一个隐藏的div来加载图像。当它的加载事件被激发时，在画布中绘制它。当我运行代码时，我得到这个错误0x80040111 NS\u error\u NOT\u AVAILABLE，但我正在等待加载事件。这是我的密码

HTML

else部分暂时被注释掉，但是对于不支持canvas的浏览器来说是存在的。

因为$'interreg-iiia-old-Countries-map'返回一个jQuery对象，而drawImage方法获取一个图像对象-jQuery$函数返回一个jQuery对象，该对象包装原始元素以提供您看到的常用jQuery函数

您可以通过使用该方法获得底层图像对象，但在本例中，只使用它会更容易，在提供给load函数的回调函数的上下文中，它是原始的$'interreg-iia-old-countries-map'DOM元素。换句话说,

ctx.drawImage(this, 0, 0);

在这里应该很好。您也不必使用隐藏元素-对于新图像，您可以检索与您在此处所做操作类似的图像：

因为$'interreg-iiia-old-Countries-map'返回一个jQuery对象，而drawImage方法获取一个图像对象——jQuery$函数返回一个jQuery对象，该对象包装原始元素以提供您看到的常用jQuery函数

您可以通过使用该方法获得底层图像对象，但在本例中，只使用它会更容易，在提供给load函数的回调函数的上下文中，它是原始的$'interreg-iia-old-countries-map'DOM元素。换句话说,

ctx.drawImage(this, 0, 0);

在这里应该很好。您也不必使用隐藏元素-对于新图像，您可以检索与您在此处所做操作类似的图像：

---

现在，让我自己提出一个解决方案：

var img = new Image(), 
    canvas = document.getElementById('old-counties-image-canvas');
img.src = '/f/MISCELLANEOUS/old-map.jpg';

img.onload = function(){
    if (canvas.getContext) {
         var ctx = canvas.getContext('2d');
         ctx.drawImage(img, 0, 0);
    }
};

---

这很难看，但我不认为它比上述解决方案更难看。其他解决方案也可能有性能优势，尽管这一解决方案似乎避免了从服务器的文件系统加载映像文件，这应该是值得的。我在Chrome、Firefox和IE10中对其进行了测试。

现在，我自己提出了一个解决方案：

var img = new Image(), 
    canvas = document.getElementById('old-counties-image-canvas');
img.src = '/f/MISCELLANEOUS/old-map.jpg';

img.onload = function(){
    if (canvas.getContext) {
         var ctx = canvas.getContext('2d');
         ctx.drawImage(img, 0, 0);
    }
};

---

这很难看，但我不认为它比上述解决方案更难看。其他解决方案也可能有性能优势，尽管这一解决方案似乎避免了从服务器的文件系统加载映像文件，这应该是值得的。我在Chrome、Firefox和IE10上进行了测试。

谢谢你的帮助。我知道我可以这样做，但隐藏的div在else部分，即对于不支持画布的浏览器，我可以只显示隐藏的div，图像仍然显示。@Belinda啊，当然了。如果未检测到画布支持，您仍然可以使用此方法将图像注入DOM，但我认为您的方法会更好。谢谢，它起作用了。我知道我可以这样做，但隐藏的div在else部分，即对于不支持画布的浏览器，我可以只显示隐藏的div，图像仍然显示。@Belinda啊，当然了。如果未检测到画布支持，您仍然可以使用此方法将图像注入DOM，但我认为您的方法会更好。

var imgId = $("#myDiv img").attr("id");
var imgObj = document.getElementById(imgId);
var canvasContext = $("#imgCanvas")[0].getContext('2d');
canvasContext.drawImage(imgObj, 0, 0);