Question

这是一个非常具体的问题，我还没有找到其他人问过它。

基本上我有一个servlet接受一些参数并返回一个PNG图像。我知道servlet有效，因为如果我用给定的参数打开页面本身，就会成功创建和下载文件。我需要一些方法来获取这个生成的PNG并将其加载到HTML5 Canvas中。

我没有权限更改servlet，它必须是POST请求，因为它不是我设计的。我的代码本质上只是一个jQuery post请求，但现在是：

$.post("../dgexport?format=png",
{
    data: localStorage.getItem("dg::export"),
    responseType: "blob",
},
function(res){
    loadCanvas(res);
});

function loadCanvas(image) {
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    // load image
    context.drawImage(image, 0, 0); 
}

当我打开控制台并查看POST请求的数据响应时，它在控制台中看起来像：

�PNG↵↵IHDR��lD�V    pHYs�� IDATx��~---���088'���� IDAT��?��q%�

（这不是全部，但我希望它足以暗示任何愿意帮助的人）

任何帮助将不胜感激！我尝试了很多不同的方法，我真的很难接受这个方法。

Answer 1

您无法使用jQuery ajax执行键入请求，请参阅here
此外，您必须将图像元素传递给context.drawImage而不是blob或字符串。

发布获取图像的帖子请求似乎是糟糕的设计，但可以使用原始XMLHttpRequest完成。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if (this.readyState == 4 && this.status == 200){
        var img = document.getElementById('img');
        var url = window.URL || window.webkitURL;
        img.onload = function(){
            loadCanvas(this);
        }
        img.src = url.createObjectURL(this.response);
    }
}
xhr.open('POST', "../dgexport?format=png");
xhr.responseType = 'blob';
xhr.send($.param({data: localStorage.getItem("dg::export")}));

Answer 2

看起来传递到您的成功功能的res似乎没有作为预期的 Blob 返回，这意味着您可能需要将其转换为一个

function (res) {
    if (res instanceof Blob) // function invoked as expected
        return loadCanvas(res);
    if (typeof res === 'string') // function invoked with String
        return loadCanvas(new Blob([res], {type: 'image/png'});
    console.warn('Unexpected Response:', res); // anything else
}

PNG从Post Request加载到Canvas

2 个答案: