Ошибка HTMLCanvasContext.drawImage() при передаче изображения, найденного с помощью jQuery

Идея моего кода заключается в создании скрытого 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();
    //}
   });

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


javascript canvas html jquery drawimage
person Belinda    schedule 19.01.2011    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Поскольку $('#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);
    }
};
person Yi Jiang    schedule 19.01.2011
comment
Спасибо, это сработало. Я знаю, что мог бы сделать это так, но скрытый div существует для другой части (т.е. для браузера, который не поддерживает холст, я могу просто показать скрытый div, и изображение все еще отображается. - person Belinda; 19.01.2011
comment
@Белинда А, конечно. Вы по-прежнему можете внедрить изображение в DOM с помощью этого метода, если поддержка canvas не обнаружена, но я полагаю, что ваш метод будет работать лучше. - person Yi Jiang; 19.01.2011

arrow_upward
0
arrow_downward

А теперь о моем собственном решении:

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.

person KenBoyer    schedule 14.08.2013