Question

我正在获得这种格式的图片：

    ����JFIF``��C       

 $.' ",#(7),01444'9=82<.342��C          

2!!22222222222222222222222222222222222222222222222222���|"��    
���}!1AQa"q2���#B��R��$3br� 
%&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz���������������������������������������������������������������������������    
���w!1AQaq"2�B����  #3R�br�
$4�%�&'()*56789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz��������������������������������������������������������������������������?�4���)����4�㊎D,>W�}jLsIބ�Y~{鑻a��6�ҙb�'��I�Fj�+��K�R
�dhr=���4�������+R~S���Zq�>�g �5Vղ_��[�y��(,�����Ґ2�$?Z@(��K��I�|Ro��G#қ��K�Ґ��pM7|7w��I���Q@��)��J��jIeo��?�篵Z�����9��8�a����[W%�r��F2E4Es�e��/������]��i�92�Pf���݃yo��O��n���9f�]�;W�=zRt��綃ނ*}Z{ׂ�P!�̤�YEt�s�!���s���zR�EQdP�]\��b�@̫����Q������d��k��t�&�Nk�L��@f�&�>Ê�u�����������`���-�s�/    ���ʪF�p)�f�c�(aLd?p�I�I��7Rr=h��i����2=�2�4���P��'�3擨*����%ߖ�*]��`Q�ڌ�&G�+��5䈹E��Mu2F����E���jϔp�����_�qp����^�V������^�ː���̬b�'l�E/��'漛��

虽然Chrome通常会检测图像并在开发人员面板中显示预览，但它并不能对其进行管理。响应头是这个应该是浏览器的图像：

Access-Control-Allow-Credentials:true
Access-Control-Allow-Origin:http://localhost:3333
Cache-Control:private
Content-Length:2621
Content-Type:image/jpeg
Date:Wed, 05 Oct 2016 12:43:00 GMT
Server:Microsoft-IIS/8.5
X-AspNet-Version:4.0.30319
X-Powered-By:ASP.NET

这是我在打字稿中的照片请求方法：

 private photoHttpRequest(userId: string): Promise<string> {
        const photoRequest: XMLHttpRequest = new XMLHttpRequest();
        const url: string = "some url" + userId;
        photoRequest.open("GET", url, true);

        return new Promise((resolve, reject) => {
            photoRequest.onreadystatechange = () => {
                if (photoRequest.readyState === 4) {
                    if (photoRequest.status === 200) {
                        resolve(photoRequest.responseText);
                    } else {
                        reject(photoRequest.responseText);
                    }
                }
            };

            photoRequest.send("");
        });
    }
}

在此之后，我只是转换为base64：

 let photo: string = await this.photoHttpRequest("1234");
 photo = "data:image/*;base64,"+window.btoa(encodeURIComponent(photo));

并将其传递给img.src，但这不起作用。

我做错了什么？

Answer 1

将响应设置为blob

你有两种方法

将xhr＆＃39; s responseType设置为＆＃34; blob＆＃34;
使用抓取fetch(url).then(res => res.blob()).then(blob => console.log(blob))

然后使用img.src = URL.createObjectURL(blob)并用它做你想做的事

如果你根本不需要ajax就好了，因为看起来你正在做一个简单的GET请求

在html / js中显示原始JPEG

1 个答案: