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

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

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

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

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

Спасибо,
- Art Z.

Ответ 1

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

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

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

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

Ответ 2

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

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

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