Создать изображение HTML из данных в переменной Javascript

Question

У меня есть данные изображения (JPEG или PNG) в переменной Javascript. Как отобразить изображение в HTML-документе? Это очень большие изображения, и подобный код не работает, потому что URI слишком длинный:

// doesn't work because the URI is too long
$('img#target').attr('src', 'data:...');

Использование canvas - это, вероятно, ответ, но я не могу понять, как загрузить его с данными изображения.

Если вам интересно: нет, я не могу просто загрузить данные изображения непосредственно в тег img. Он пришел с сервера в зашифрованном виде и был расшифрован в браузере с использованием Javascript.

Спасибо
- Art Z.

Answer 1

Чтобы использовать URL данных для рисования на холсте:

var img = new Image;
img.onload = function(){
  myCanvasContext.drawImage(img,0,0);
};
img.src = "data:...";

За этот вопрос / ответ убедитесь, что вы установили onload перед src.

Вы говорите, что "URI слишком длинный" , но неясно, что вы подразумеваете под этим.Только IE8 имеет ограничение 32 КБ на URI данных;для других браузеров это должно работать нормально.Если вы столкнулись с ошибкой, опишите ее.

Answer 2

Оказывается, что

$('img#target').attr('src', 'data:...');

работает во всех, кроме IE.Моя проблема возникла в другом месте.