Question

我有一个图片的网址，当我将img的src设置为时，img会更改为网址上的图片。

我想将此图像作为字符串下载，以便将其存储在本地存储中。

所以我使用XMLHttpRequest获取图像数据，这将返回如下所示的数据：

�T��ǁ�Y�k����De,�GV��<A:V��TɕH'�:A�
a��.e��E�ʓu�|���ʘ�*GN�'��қ��u�� ��c��]�
                                       �.N���RH!�O�m�Aa���Զ�0U @Pɬ��:�շ���
p�;2��Z���H����¯��P�un>�u�uj��+�쨯
��Z��֦DW>U����.U:V�{�&(My��kύO�S�������e��ԃ����w�
1��j2�Ŭo�@����>ɛP���:E�o}\O���r ��Ύ�
           ob�P|b��/e�\@����k>��?mr<�ƭ�0~����f����\�i�^���ޟj��ٙI&=��B���N��(�N��C�kO�o3e�az�G
                                                                                            �|�����AO�A�6�2
�H�^�5��$�Ѭ
\��|x�+�0 ͤ,n�|������B����
                         w4ɞG�Q!�"�yb@�[A��\m)��߂�dA�h�.��6����q�αA0�bO��20*�LVX�<`Rv�W�6�f'hF���V���n`̌v�7�Ν��OI|���Ԙ�uoqk���n����g��a��ӗ>���Ԏt��

我不确定这些数据的格式是什么。它可能是基于某些Google搜索的Base64但不是100％肯定。这就是我在console.log时获得的内容。图像数据字符串的长度为109095.当我记录此字符串时控制台冻结，无法弄清楚原因。

然后我尝试在javascript中设置img的src，如下所示：

x.src = "data:image/jpg;base64," + imageData;

它不起作用。

Answer 1

如果您需要图片的dataURI版本，最好的方法是将XHR.responseType设置为"blob"，并使用FileReader读取生成的响应blob：

var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = function(){
  var reader = new FileReader();
  reader.onload = function(){
     img.src = this.result;
     result.textContent = this.result;
    };
  reader.readAsDataURL(this.response);
  };
xhr.open('GET', 'https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png');
xhr.send();

<img id="img"/>
<p id="result"></p>

当然，您必须拨打同一个来源或打开服务器（例如维基媒体）。

Answer 2

您应首先将图像转换为base64。

试试此链接

How to convert image into base64 string using javascript

如何在Javascript中将一串数据转换为图像？

2 个答案: