javascript - 来自 Post 请求的 PNG 加载到 Canvas 中

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 或字符串。

发出 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")}));