保存到磁盘时，base64 编码的图像已损坏答案

【问题标题】：base64 encoded image is corrupted when saved to disk保存到磁盘时，base64 编码的图像已损坏
【发布时间】：2015-08-13 00:08:07
【问题描述】：

我将 base64 剪贴板图像发布到服务器（节点），并将 base64 保存到磁盘。由于某种原因，图像已损坏。

发帖的客户端逻辑：

function sendData($http, clipboardImage) {
    // $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
    // var imgData = JSON.stringify(clipboardImage);
    //var data = {"imgdata" : clipboardImage}; 
    var url = "http://localhost:3000/pad/img/";

    $http({
        method: 'POST',
        url: url,
        data: "data=" + clipboardImage
    });
}

$("[ng-model='html']").delegate("p", "paste", function(event) {
    var items = (event.clipboardData || event.originalEvent.clipboardData).items;
    console.log(JSON.stringify(items)); // will give you the mime types
    // find pasted image among pasted items
    var blob = null;
    for (var i = 0; i < items.length; i++) {
        if (items[i].type.indexOf("image") === 0) {
            blob = items[i].getAsFile();
        }
    }
    // load image if there is a pasted image
    if (blob !== null) {
        var reader = new FileReader();
        reader.onload = function(e) {
            sendData($http, e.target.result);
        };
        reader.readAsDataURL(blob);
    }
});

服务器逻辑：

app.post("/pad/img/", function(req, res) {
    var imgB64Data = req.body.data;
    var decodedImg = decodeBase64Image(imgB64Data);
    var imageBuffer = decodedImg.data;
    var type = decodedImg.type;
    var extension = mime.extension(type);
    var fileName = "image." + extension;
    try {
        fs.writeFile(fileName, imageBuffer, function(err) {
            console.log(err);
        });
    } catch (err) {
        console.error(err);
    }
});

function decodeBase64Image(dataString) {
    var matches = dataString.match(/^data:([A-Za-z-+\/]+);base64,(.+)$/),
        response = {};

    if (matches.length !== 3) {
        return new Error('Invalid input string');
    }

    response.type = matches[1];
    response.data = new Buffer(matches[2], 'base64');

    return response;
}

图像已成功保存，但似乎已损坏。您能否指出可能缺少的内容？

【问题讨论】：

在将其转换为缓冲区之前，您是否检查了 base64 编码字符串 (matches[2])？我不确定readAsDataURL 返回的是什么类型的base64，你可能需要先在客户端url encode 它。如果是 URL 保存变体，可能需要在服务器端进行转换。
我猜这是发布数据的问题。 $http({ method: 'POST', url: url, data: { data : clipboardImage } });

标签： javascript angularjs node.js http

【解决方案1】：

您是否尝试在调用fs.writeFile 时显式设置文件编码？

try {
    fs.writeFile(fileName, imageBuffer, {encoding:'utf8'}, function(err) {
        console.log(err);
    });
} catch (err) {
    console.error(err);
}

NodeJS 文档：fs.writeFile(filename, data\[, options\], callback)

【讨论】：

我认为这与我发布数据的方式有关。我最初将它作为字符串发布。我修改为对象及其现在的工作。