Сбой HTMLCanvasContext.drawImage () при передаче изображения, найденного с помощью jQuery - PullRequest
Новая
       7

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

1 голос
/ 19 января 2011

Идея моего кода - создать скрытый div, который загружает изображение.Когда событие загрузки запущено, нарисуйте его на холсте.Когда я запускаю код, я получаю эту ошибку 0x80040111 (NS_ERROR_NOT_AVAILABLE), но я жду события загрузки.Это мой кодхолст.

Ответы [ 2 ]

4 голосов
/ 19 января 2011

Поскольку $('#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);
    }
};
0 голосов
/ 14 августа 2013

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

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.

...