如何使用JavaScript将HTTP API返回的BMP图像绘制到HTML Canvas

你的代码核心错误有两个：

• 混淆了XHR对象属性和请求头：responseType是XMLHttpRequest的原生实例属性，不需要通过setRequestHeader设置，你写的setRequestHeader('Response-Type', 'image/bmp')是完全无效的错误写法
• 没有指定响应的解析格式：XHR默认会把返回内容按文本格式解析，二进制的BMP数据被强制转码为文本就会损坏，必须提前指定responseType = 'blob'让浏览器直接返回二进制Blob对象，不需要手动用new Blob二次包装

修正后的完整代码 #

function refresh() {
    var request = new XMLHttpRequest();
    request.open('POST', 'imgview');
    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    // 核心修改：直接设置xhr的responseType属性为blob，不要用请求头设置
    request.responseType = 'blob';
    request.onload = function(event) {
        if (request.status >= 200 && request.status < 300) {
            // 直接用返回的blob，不需要自己重新构造
            var blob = request.response;
            var imageURL = window.URL.createObjectURL(blob);

            var image = new Image();
            image.crossOrigin = "Anonymous";
            image.onload = function() {
                console.log(image.width);
                document.body.appendChild(image);
                var canvas = document.getElementById("canvas");
                // 可以提前把canvas尺寸设置为图片实际尺寸，避免拉伸
                canvas.width = image.width;
                canvas.height = image.height;
                var context = canvas.getContext('2d');
                context.drawImage(image, 0, 0);
                // 用完释放对象URL，避免内存泄漏
                window.URL.revokeObjectURL(imageURL);
            }
            image.src = imageURL;
        } else {
            // 错误处理逻辑
        }
    };
    request.send(requestText);
}

额外优化点 #

• 绘制前主动把canvas的宽高设置为图片的实际宽高，避免图片被拉伸变形
• 图片加载完成后调用window.URL.revokeObjectURL释放临时URL占用的内存，避免内存泄漏

内容的提问来源于stack exchange，提问作者Max Flow