HTML Canvas无法绘制大尺寸BMP图片的问题求助

各位大佬好，我现在碰到一个棘手的问题：我想裁剪一张大尺寸的BMP图片，把裁剪后的部分绘制到HTML Canvas中，之后还要在上面画一些线条。结果线条能正常画出来，但图片死活显示不出来！

先给大家看一下我简化后的测试代码：

display.html #

<!DOCTYPE html>
<head>
    <title>Test</title>
    <script src="display.js" type="text/javascript"></script>
</head>
<body>
    <div>
        <input type="button" id="submit_traj" value="OK" onclick="displayTraj();"/>
        <br>
    </div>
    <div>
        <canvas id="myCanvas" style="border: 1px solid black;background-repeat: no-repeat;">Canvas is not supported.</canvas>
    </div>
</body>
</html>

display.js #

function displayTraj(){
    var map = new Image();
    map.src = "../db/France11.bmp";
    map.onload = draw;
}

let draw = ( e ) => {
    var canvas = document.getElementById('myCanvas');
    canvas.width = 1000;
    canvas.height = 1000;
    canvas.getContext('2d').drawImage(e.target, 0, 0, 1000, 1000, 0, 0, 1000, 1000 );
}

目前的现象： #

页面上的Canvas始终是空白的，但浏览器的Network面板里明明显示这张BMP已经成功下载了，而且Elements面板里Canvas的尺寸也确实被设置成了1000x1000，说明draw函数是执行过的。

我已经尝试过的方法： #

• 调整裁剪的尺寸参数，没用；
• 换成小尺寸的随机PNG图片，能正常显示在Canvas上；
• 把整张BMP直接放到<img>标签里，能显示但页面直接变得无比巨大，根本没法用；
• 我已经用了map.onload来等待图片加载完成，甚至试过用window.addEventListener来监听加载状态，还是没效果；
• 后来我把原BMP图片缩放到5196x5196的尺寸，不管是显示整张图还是裁剪部分都正常了——这说明问题应该出在原图片的尺寸太大，drawImage函数处理不了？

尝试过的替代方案： #

我还试过用createImageBitmap来处理，代码如下：

async function drawCanvas() {
    const canvas = document.getElementById("myCanvas"),
          ctx = canvas.getContext("2d"),
          image = new Image();
    image.src = "./France.bmp";
    await image.decode(); // 等待图片解码
    try{
        image.onload = () => {
            Promise.all([
                // 从原图裁剪出一块区域
                createImageBitmap(image, 0, 0, 32, 32)
            ]).then((sprites) => {
                // 绘制到Canvas
                ctx.drawImage(sprites[0], 0, 0);
            });
        };
    } catch (error){
        console.log("Error is ", error);
    }
}

结果await image.decode()直接报了Invalid encoded image data错误；如果去掉await image.decode()，createImageBitmap又会因为图片还没加载完成报Object unusable，用了Promise也没解决这个问题。

现在我能想到的唯一办法就是用外部Python脚本预先生成需要的裁剪区域图片，再放到Canvas里，但还是想问问各位，有没有前端层面的解决方案？

内容来源于stack exchange