下载使用Pillow和Django创建的图像

mnemlml8  于 2023-04-13  发布在  Go
关注(0)|答案(1)|浏览(87)

我使用Pillow从用户提供的文本输入创建图像。我使用Django和django-ninja处理数据,然后将图像发送给用户。它不会显示图像,我的服务器不会存储图像,用户将下载图像。
该过程将类似于:
用户输入文本〉用户按下载按钮〉 AJAX 发送文本到Django后端〉Django后端使用Pillow根据文本创建图像〉用户下载图像
有没有错误,我可以看到图像从预览在网络选项卡,但我无法下载图像。
这是我的 AJAX :

function downloadDoa(){
    allDoas = []
    for (let i = 0; i < userDoaAll.length; i++) {
        userCustomMadeDoa = userDoaAll[i];
        if (userCustomMadeDoa.classList.contains("customUserDoa")){
            allDoas.push(['na',userCustomMadeDoa.innerHTML])
        }
    }
    console.log(allDoas)
    $.ajax({
        url: "{% url 'api:download_doa' %}",
        data: {
            customDoasLists: JSON.stringify(allDoas),
            csrfmiddlewaretoken: '{{ csrf_token }}',
        },
        method : "post",
        dataType : "json",
        headers: {'X-CSRFToken': csrftoken},
        mode: 'same-origin', // Do not send CSRF token to another domain.
        csrfmiddlewaretoken: '{% csrf_token %}',
        success: function (response) {
            console.log(response)  
        },
    });
}

这是从我的api.py来处理用户输入:

@api.post("/download_doa",url_name="download_doa",auth=None)
def download_doa(request):
    im_io = io.BytesIO()
    text_list = json.loads(request.POST.get('customDoasLists'))
    font_path_a = "Hafs.ttf" 
    font_path_na = "Arial.ttf"
    font_size_a = 40
    font_size_na = 30
    text_color = (0, 0, 0)  # RGB color (black)
    background_color = (255, 255, 255, 255)  # RGBA color (white)
    output_image = text_to_image(text_list, font_path_a, font_size_a,font_path_na, font_size_na, text_color, background_color)
    output_image.save(im_io, 'png')
    im_io.seek(0)

    return HttpResponse(im_io,headers={'Content-Type': 'image/png',
                                       'Content-Disposition': 'attachment;filename="file_name.png"'})

这是来自网络选项卡:

我想我错过了几个步骤,因为图像被发送到前端,但它不是下载。将很高兴,如果有人可以帮助,谢谢。

eiee3dmh

eiee3dmh1#

感谢Tim Roberts指定js没有做任何事情,我做了更多的谷歌搜索并找到了答案。需要 AJAX 更改为:

$.ajax({
    url: "{% url 'api:download_doa' %}",
    data: {
        customDoasLists: JSON.stringify(allDoas),
        csrfmiddlewaretoken: '{{ csrf_token }}',
    },
    method : "post",
    headers: {'X-CSRFToken': csrftoken},
    mode: 'same-origin', // Do not send CSRF token to another domain.
    csrfmiddlewaretoken: '{% csrf_token %}',
    xhrFields:{
        responseType: 'blob'
    },
    success: function (response) {
        var link = document.createElement('a');
        link.href = URL.createObjectURL(response, {type: "image/png"})
        link.download = 'image.png';
        document.body.appendChild(link);
        link.click();
    },
});

与以前的 AJAX 不同:
1.删除了数据类型“json”,因为Django后端的响应不是JSON格式
1.添加响应类型为blob的xhr字段,以处理来自Django后端的二进制文件。
1.添加链接并单击链接下载图像
第二个和第三个更改取自here

相关问题