来自 Post 的 PNG 请求加载到 Canvas

Question

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

基本上我有一个接受一些参数和 returns PNG 图像的 servlet。我知道 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

看起来传递给您的成功函数的 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
}

Answer 2

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

发出 post 获取图像的请求似乎是糟糕的设计，但可以使用原始 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")}));

来自 Post 的 PNG 请求加载到 Canvas

PNG from Post Request loading into Canvas

javascript

ajax

jquery

canvas

http-post