HTMLCanvasContext.drawImage() сбой при передаче найденного изображения с использованием jQuery

Question

Идея моего кода - создать скрытый 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(); 
    //} 
    }); 

части иначе закомментирована сейчас, но есть для браузеров, которые не поддерживают холст.

Answer 1

Поскольку $('#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); 
    } 
}; 

Answer 2

И теперь для моего собственного взять на решение:

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.