Python 实现AJAX获取图片

import PIL.Image as Image
import matplotlib.pyplot as plt
from scipy.misc import imread,imsave
import base64
from io import BytesIO
import os


# 图片路径
base_path = os.path.join(
            os.path.abspath(os.path.join(os.path.dirname(os.path.dirname(os.path.realpath(__file__))), "../")),
            'static/img/auto_logo/timg.jpg')
# 作为一个暂时保存图片的路径
 new_path = os.path.join(
         os.path.abspath(os.path.join(os.path.dirname(os.path.dirname(os.path.realpath(__file__))), "../")),
            'static/img/auto_logo/new.jpg')

# 使用scipy.misc.image读取图片，array1是一个ndarray
 array1 = imread(base_path)
  
# 保存到暂存区      其实可以省略，直接打开
 plt.imsave(new_path,array1)
 # 打开暂存区图片       
 photo = Image.open(new_path)
# 生成对象
output_buffer1 = BytesIO()

photo.save(output_buffer1,format='PNG')

f1 = output_buffer1.getvalue()
     

b64 = base64.b64encode(f1)

ret = {'label': label, 'word_cloud': 'data:image/png;base64,' + bytes.decode(b64)}

return ret

前端代码
html

$.ajax({
                url: "{{ url_for('all_impress.get_WordCloud') }}",
                type: 'POST',
                data: {
                    brand_ids: $('#selBrand').val(),
                    type_ids: $('#selProdType').val().join(','),
                    date_range: $('#reservation').val(),
                    logo:$('#select2-s-container').html()
                },
                success: function (data) {

                    $("#tabs").html('');
                    $("#tabcontents").html('');
                    var class_active = '';
                    for (var i = 0; i < data.length; i++) {

                        if (i == 0) {
                            class_active = 'active'
                        } else {
                            class_active = '';
                        }

                        $("#tabs").append('<li  class="' + class_active + '"><a href="#tab_' + i + '" data-toggle="tab">' + data[i].label + '</a></li>');
                        $("#tabcontents").append('  <div class="tab-pane ' + class_active + '" id="tab_' + i + '"><div class="box-body" style="text-align: center"><img id="imgWordCloud' + i + '" style="width:800px;height:600px;"/></div>\
                                        <div class="box-body">\
                                    </div>\
                                    </div>');
                       // 注意：需要动态添加src属性
                        $("#imgWordCloud" + i).attr('src', data[i].word_cloud);
                       
                    }

                }
            });