IE11特定问题：超大图片无法在HTML5 Canvas正常绘制

这绝对是IE对大尺寸Canvas内存限制导致的坑，我之前也踩过类似的雷——尤其是IE11及更早版本，单个进程的内存配额卡得特别死，像你这张8386x2229的超大图，加载后一次性绘制会让内存占用瞬间冲高，一旦超过IE的阈值就会抛出那个“存储不足”的错误，再加上IE的内存回收机制不稳定，才会出现时好时坏的情况。

给你几个实用的解决思路，按优先级排序：

1. 分块绘制图片（最推荐，不损失画质） #

把大图片拆成多个小区域分批次绘制，每次只处理一部分内容，避免一次性加载绘制整个大图的内存压力。你可以根据IE的实际情况调整分块大小，先试试1000px宽的块，不行再缩小：

_paintImage: function(base64Value){ 
    var canvas = $(".image-measure-canvas")[0]; 
    var ctx = canvas.getContext("2d"); 
    var img = new Image(); 
    img.onload = function(){ 
        const imgWidth = this.width;
        const imgHeight = this.height;
        // 先设置Canvas和原图尺寸一致
        canvas.width = imgWidth;
        canvas.height = imgHeight;
        
        // 定义每块的宽度，可根据IE内存情况调整
        const chunkWidth = 1000;
        const totalChunks = Math.ceil(imgWidth / chunkWidth);
        
        // 循环绘制每个区块
        for(let i = 0; i < totalChunks; i++){
            const startX = i * chunkWidth;
            // 最后一块可能不足chunkWidth，取剩余宽度
            const drawWidth = Math.min(chunkWidth, imgWidth - startX);
            // 绘制当前块到Canvas对应位置
            ctx.drawImage(this, startX, 0, drawWidth, imgHeight, startX, 0, drawWidth, imgHeight);
        }
    }; 
    img.src = base64Value;
}

2. 按需缩放图片（如果业务允许） #

如果弹窗不需要显示100%的原图尺寸，可以先把图片缩放到适配弹窗的大小，再绘制到Canvas。这样Canvas的尺寸会小很多，内存占用也会大幅降低：

_paintImage: function(base64Value){ 
    var canvas = $(".image-measure-canvas")[0]; 
    var ctx = canvas.getContext("2d"); 
    var img = new Image(); 
    img.onload = function(){ 
        const maxPopupWidth = 1200; // 假设弹窗最大宽度
        const maxPopupHeight = 800; // 假设弹窗最大高度
        
        // 计算缩放比例，取宽高中较小的那个比例，避免超出弹窗
        const scale = Math.min(maxPopupWidth / this.width, maxPopupHeight / this.height);
        const scaledWidth = Math.floor(this.width * scale);
        const scaledHeight = Math.floor(this.height * scale);
        
        // 设置Canvas为缩放后的尺寸
        canvas.width = scaledWidth;
        canvas.height = scaledHeight;
        
        // 绘制缩放后的图片
        ctx.drawImage(this, 0, 0, scaledWidth, scaledHeight);
    }; 
    img.src = base64Value;
}

3. 强制内存回收（应急方案） #

IE的垃圾回收机制比较被动，你可以在绘制前手动清理旧资源，甚至主动触发回收（虽然不推荐在生产环境频繁使用，但应急时能救场）：

_paintImage: function(base64Value){ 
    var canvas = $(".image-measure-canvas")[0]; 
    var ctx = canvas.getContext("2d"); 
    // 先清理Canvas之前的内容
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // 重置Canvas尺寸，强制释放内存
    canvas.width = 1;
    canvas.height = 1;
    
    var img = new Image(); 
    img.onload = function(){ 
        // ... 这里放绘制逻辑（分块或缩放）
        
        // 绘制完成后，主动触发IE垃圾回收
        if (window.CollectGarbage) {
            window.CollectGarbage();
        }
    }; 
    img.src = base64Value;
}

另外注意：原代码里的img.src = imageValue应该是笔误，改成base64Value才能正确加载图片哦～

内容的提问来源于stack exchange，提问作者Behram Buhariwala