2015-04-01 2 views
3

Я пытаюсь загрузить файл с зашифрованным изображением из Amazon S3 через presigned_link с AJAX и получает кучу данных об ошибках.Преобразование данных изображения для рендеринга изображения в браузере

$(document).on 'click', '.js-download', (event) -> 
event.preventDefault() 

$.ajax 
    type: "GET" 
    url: event.currentTarget.href 
    contentType: 'image/jpeg', 
    headers: { 
    'x-amz-server-side-encryption-customer-algorithm': 'AES256', 
    'x-amz-server-side-encryption-customer-key': customer_key, 
    'x-amz-server-side-encryption-customer-key-MD5': customer_key_md5, 
    } 
    success: (data) -> 
    convert_to_image(data) 

Данные ajax приводят к совокупности данных изображения.

JFIFHHXICC_PROFILEHLinomntrRGB XYZ 1acspMSFTIEC SRGB-HP cprtP3desclwtptbkptrXYZgXYZ, bXYZ @ dmndTpdmddvuedLview $ lumimeas $ tech0rTRC < < ГУИЦ Белтелерадиокомпании < textCopyright (с) 1998 Hewlett-Packard CompanydescsRGB IEC61966-2.1sRGB IEC61966-2.1XYZ Q XYZ XYZ o 8 XYZ b XYZ $ descIEC http://www.iec.ch IEC http://www.iec.ch desc.IEC 61966-2.1 По умолчанию RGB цветовое пространство - sRGB.IEC 61966-2.1 Цветовое пространство по умолчанию RGB - sRGBdesc, состояние просмотра ссылок в IEC61966-2.1, состояние просмотра ссылок в IEC61966-2.1view _. \ XYZ L VPW meas sig CRT curv .. ......

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

convertToImage(imageData) -> 
    data = 'data:image/jpeg,' + btoa(encodeURIComponent(imageData)) 
    img = document.createElement('img') 
    img.src = data 
    a = document.createElement('a') 
    a.setAttribute("download", "image.jpeg") 
    a.setAttribute("href", data) 
    a.appendChild(img) 
    document.body.appendChild(a) 

The link returns: 
'<img src="data:image/jpeg,JUVGJUJGJUJEJUVGJUJGJUJEJUVGJUJGJUJEJUVGJUJ.......>' 

Изображение не отображается правильно. Я пытаюсь использовать другие методы для преобразования данных изображения, но он не работает. Любая помощь будет оценена по достоинству.

ответ

0

Это не строка данных изображения. Это двоичный файл данных blob в формате JPEG, который (видимо) имеет некоторые строки в заголовке.

btoa (base64) предназначен для двоичных данных, а не для URI. Вызов encodeURIComponent на jpeg blob будет искажать его, и я удивлен, что он работает вообще.

Устранение этого звонка должно устранить вашу проблему.

Смежные вопросы