1

我的代码的想法是创建一个隐藏的 div 来加载图像。当它的加载事件被触发时，在画布中绘制它。当我运行代码时，我收到此错误 0x80040111 (NS_ERROR_NOT_AVAILABLE)，但我正在等待加载事件。这是我的代码。

HTML

<div id="old-counties-image-wrapper" style="display: none;">
<img border="0" height="390" id="interreg-iiia-old-counties-map" src="/f/MISCELLANEOUS/old-map.jpg" /></div>
<p>
<canvas id="old-counties-image-canvas"></canvas></p>

和 javascript

 $('#interreg-iiia-old-counties-map').load(function() {
    var canvas=document.getElementById('old-counties-image-canvas');
    if (canvas.getContext) {
         var ctx=canvas.getContext('2d');
         var img=$('#interreg-iiia-old-counties-map');
         ctx.drawImage(img, 0, 0);
    }
    //else {
    //    $('#old-counties-image-wrapper').show();
    //}
   });

else 部分现在被注释掉了，但是对于不支持画布的浏览器来说。

4

2 回答 2

4

因为$('#interreg-iiia-old-counties-map')返回一个 jQuery 对象，而该drawImage方法接受一个Image对象 - jQuery ( $) 函数返回一个包装原始元素的 jQuery 对象，以提供您看到的常用 jQuery 函数。

Image您可以使用该方法获取底层对象get，但在这种情况下，仅使用 会更容易this，在提供给load函数的回调函数的上下文中，它是原始$('#interreg-iiia-old-counties-map')DOM 元素。换句话说，

ctx.drawImage(this, 0, 0);

在这里应该可以正常工作。您也不必使用隐藏<img>元素 -new Image您可以检索类似于您在此处所做的图像：

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);
    }
};
于 2011-01-19T10:55:45.217 回答
0

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

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

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

于 2013-08-14T00:32:46.840 回答