如何使用sharp.js读取Base64格式的图片输入？

核心问题分析 #

你的代码存在两个关键错误：

• 直接将带data:image/png;base64,前缀的字符串传入Buffer.from()，默认会以UTF-8编码解析，生成的不是正确的图片二进制数据
• 即使移除前缀，仍未指定Buffer.from()的第二个参数为base64，导致解析方式错误，sharp无法识别图片格式

修正后的代码 #

const sharp = require('sharp');

// 提取纯Base64编码部分，去掉data URI前缀
const base64Data = 'iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9' +
    'kT1Iw0AcxV9TtaIVB4OIOGSoThZEizhqFYpQIdQKrTqYj35Bk4YkxcVRcC04+LFYdXBx1tXBVRAE'+
    'P0DcBSdFFynxf0mhRYwHx/14d+9x9w7g6mVFszomAE23zVQiLmSyq0LoFV3oxSB4xCTFMuZEMQnf'+
    '8XWPAFvvoizL/9yfo0/NWQoQEIhnFcO0iTeIpzdtg/E+Ma8UJZX4nHjcpAsSPzJd9viNccFljmXy'+
    'Zjo1T8wTC4U2lttYKZoacYw4omo65XMZj1XGW4y1clVp3pO9MJzTV5aZTnMECSxiCSIEyKiihDJs'+
    'RGnVSbGQov24j3/Y9YvkkslVgkKOBVSgQXL9YH/wu1srPzXpJYXjQOeL43yMAqFdoFFznO9jx2mc'+
    'AMFn4Epv+St1YOaT9FpLixwB/dvAxXVLk/eAyx1g6MmQTMmVgjS5fB54P6NvygIDt0DPmtdbcx+n'+
    'D0CaukreAAeHwFiBstd93t3d3tu/Z5r9/QCL53Kx9rcTpAAAAAlwSFlzAAAuIwAALiMBeKU/dgAA'+
    'AAd0SU1FB+kGCxYVLLgYx34AAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAA'+
    'R0lEQVQY03WQOQ7AQAwCB5T/f5kUObRkHRoXHEYoQMIIydfhB76tu0ICDt5wqaTJQ7eDpY2Hh0tT'+
    'l2/r4S/XChc3h4+zSMAJo6AbF2z7fuQAAAAASUVORK5CYII=';

// 指定base64编码生成正确的图片Buffer
const inputBuffer = Buffer.from(base64Data, 'base64');

sharp(inputBuffer)
    .resize(100, 100)
    .toFile('output.jpeg', (err, info) => {
        if (err) {
            console.error('处理错误:', err);
        } else {
            console.log('处理完成:', info);
        }
    });

关键修正点 #

• 提取纯Base64内容：必须剥离data:image/png;base64,这类data URI前缀，只保留编码后的图片数据
• 指定Buffer编码格式：调用Buffer.from(base64Str, 'base64')明确告诉Node.js要解析的是Base64编码的字符串，生成正确的二进制Buffer

验证方法 #

如果不确定Buffer是否正确，可以先将生成的Buffer写入文件验证：

const fs = require('fs');
fs.writeFileSync('test.png', inputBuffer);

打开test.png如果能正常显示，说明Buffer生成正确，再传入sharp处理就不会有格式问题了

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