从 ajax 响应中设置图像源

Question

我想在我的页面中使用从 ajax 调用响应中收到的图像设置一个图像源，但是当我使用响应设置图像源时，我得到一个损坏的图像图标。

下面是ajax调用

$.ajax({
                        url: '<%=request.getContextPath() %>/rest/tasks/file/'+temp_taskID+'?fileType=JPG' + 
                             '&fileName='+imgNames[i],
                        headers: {
                             'apiKey':'1xxxx3-dde5-4eec-b3ee-2xxxx507xxe8',
                             'ID':ID
                        },
                        type: "GET"
                    })
                    .done  (function(data, textStatus, jqXHR) {
                        $("#img_carousel").attr("src", "data:image/jpeg;base64," + data);                  
                    })
                    .fail  (function(jqXHR, textStatus, errorThrown) {});

错误

Answer 1

找到了我的问题的解决方案

必须添加 mime 类型

mimeType: "text/plain; charset=x-user-defined",

和

$("#img_carousel").attr('src', 'data:image/jpeg;base64,' + base64Encode(data));

function base64Encode(str) {
                var CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
                var out = "", i = 0, len = str.length, c1, c2, c3;
                while (i < len) {
                    c1 = str.charCodeAt(i++) & 0xff;
                    if (i == len) {
                        out += CHARS.charAt(c1 >> 2);
                        out += CHARS.charAt((c1 & 0x3) << 4);
                        out += "==";
                        break;
                    }
                    c2 = str.charCodeAt(i++);
                    if (i == len) {
                        out += CHARS.charAt(c1 >> 2);
                        out += CHARS.charAt(((c1 & 0x3)<< 4) | ((c2 & 0xF0) >> 4));
                        out += CHARS.charAt((c2 & 0xF) << 2);
                        out += "=";
                        break;
                    }
                    c3 = str.charCodeAt(i++);
                    out += CHARS.charAt(c1 >> 2);
                    out += CHARS.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
                    out += CHARS.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6));
                    out += CHARS.charAt(c3 & 0x3F);
                }
                return out;
            }

从 ajax 响应中设置图像源

Set Image src from ajax response

ajax

jquery

base64

image