使用Base64字符串在Canvas绘图并适配图片尺寸失败求助

我帮你梳理下这个问题的常见原因和解决方案，你遇到的情况大概率是图片加载异步处理不当或者Canvas尺寸设置的误区导致的：

核心问题分析 #

1. 图片加载是异步操作：你可能在图片还没完全加载完成时就尝试绘制或调整Canvas尺寸，这时候图片的宽高还未就绪，自然无法正常工作。
2. Canvas尺寸设置混淆：很多人会把Canvas的CSS样式尺寸和实际绘图缓冲区尺寸搞混，只改style.width/height会导致图片拉伸变形，必须设置Canvas元素的width/height属性。
3. Base64格式不完整：如果后端传递的Base64字符串没有包含完整的Data URI前缀（比如data:image/png;base64,），图片会加载失败。

修正后的完整代码示例 #

ASPX 部分（补全你的代码片段） #

<script src="../Scripts/MapGenerator/MapGeneraterScript.js"></script>
<asp:HiddenField ID="hiddenFieldMapBaseString" value="" runat="server" />
<asp:HiddenField ID="hiddenFieldCanvasWidth" value="" runat="server" />
<asp:HiddenField ID="hiddenFieldCanvasHeight" value="" runat="server" />
<canvas id="canvasMasterMap"></canvas>

JavaScript 部分（MapGeneraterScript.js） #

// 页面加载完成后执行
window.addEventListener('load', function() {
    // 获取页面上的元素
    const base64Input = document.getElementById('hiddenFieldMapBaseString');
    const canvas = document.getElementById('canvasMasterMap');
    const ctx = canvas.getContext('2d');

    // 获取Base64字符串，确保格式完整
    let base64Data = base64Input.value;
    // 如果没有Data URI前缀，自动补充（根据实际图片格式调整，比如jpg/webp）
    if (!base64Data.startsWith('data:image/')) {
        base64Data = `data:image/png;base64,${base64Data}`;
    }

    // 创建图片对象
    const mapImage = new Image();
    // 图片加载完成后的回调（关键！必须在这里处理绘制和尺寸调整）
    mapImage.onload = function() {
        // 设置Canvas的实际绘图分辨率（这是核心，不是CSS样式）
        canvas.width = mapImage.width;
        canvas.height = mapImage.height;
        // 可选：同步设置CSS样式，让Canvas在页面上显示正确大小
        canvas.style.width = `${mapImage.width}px`;
        canvas.style.height = `${mapImage.height}px`;

        // 将图片绘制到Canvas左上角
        ctx.drawImage(mapImage, 0, 0);
    };

    // 图片加载失败的错误处理
    mapImage.onerror = function() {
        console.error('图片加载失败，请检查Base64字符串是否正确');
    };

    // 最后设置图片源，触发加载
    mapImage.src = base64Data;
});

额外检查点 #

• 确认后端传递到hiddenFieldMapBaseString的Base64字符串没有被截断或编码错误。
• 如果你想用后端传递的宽高值（hiddenFieldCanvasWidth/hiddenFieldCanvasHeight），可以在onload里替换成这些值，但建议优先使用mapImage.width和mapImage.height，避免后端传递的尺寸和实际图片不符。
• 检查浏览器控制台是否有报错信息，比如Base64格式错误等。

内容的提问来源于stack exchange，提问作者Wajahat Gul