canvas.toDataURL()返回结果疑似截断，224×224图片Base64长度异常求助

你的问题其实出在两个关键细节上，我帮你拆解清楚：

1. 图片加载是异步操作，你提前执行了绘制逻辑 #

当你设置img.src = "img.png"后，浏览器会异步加载这个图片资源，不会阻塞后续代码的执行。所以你紧接着调用context.drawImage(img, 0, 0)的时候，图片其实还没加载完成，这时候drawImage根本没有实际绘制任何内容，canvas还是空白状态。空白画布生成的Base64自然非常短，这就是你得到1594长度的核心原因。

2. Canvas没有设置匹配的尺寸 #

你的代码里没有给canvas设置width和height属性，canvas默认的尺寸是300×150像素。即使图片加载完成了，直接绘制也会因为画布尺寸不匹配，导致内容被缩放或者截断，生成的Base64也不符合224×224图片的预期长度。

下面是修正后的代码，完美解决了这两个问题：

var img = new Image();
// 如果你的图片来自不同域名，需要开启跨域支持（同时服务器要配置CORS头）
// img.crossOrigin = "anonymous";

// 等待图片加载完成后再执行绘制逻辑
img.addEventListener('load', function() {
    var canvas = document.createElement('canvas');
    // 显式设置canvas尺寸为目标大小224×224
    canvas.width = 224;
    canvas.height = 224;
    var context = canvas.getContext('2d');
    
    // 将图片绘制到canvas上，指定绘制尺寸
    context.drawImage(img, 0, 0, 224, 224);
    
    // 生成Base64编码
    var base64 = canvas.toDataURL();
    alert(base64.length); // 现在长度会符合224×224图片的预期
});

// 最后设置src触发图片加载
img.src = "img.png";

// 可选：添加加载失败的处理逻辑，方便排查问题
img.addEventListener('error', function() {
    alert('图片加载失败，请检查路径是否正确');
});

关键改动说明： #

• 用load事件监听器确保图片完全加载后再执行canvas操作，避免异步加载导致的绘制空内容
• 显式设置canvas的width和height，匹配你需要的224×224尺寸
• 可选添加error事件处理，快速排查图片路径错误或加载失败的问题
• 跨域场景下需开启crossOrigin配置，同时服务器要配合设置CORS响应头

现在运行这段代码，生成的Base64长度就会和224×224图片的实际编码长度一致了。

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