[英]ContentType for saving image in Express/node.js
我正在將base64編碼的數據從canvas元素傳遞到一個表達處理程序,該處理程序將數據保存到png文件中
在下面的ajax調用中,應將contentType設置為什么? (使用默認值即未使用x-www-form-urlencoded給我一個無法打開的png文件)
$("#save").click(function(){
var canv = document.getElementById('imageView');
var canvData = canv.toDataURL('image/png');
console.log("the type is " + typeof canvData);
$.ajax({
type: "POST",
url: '/upload',
data: canvData,
contentType: '???',
success: function(data){
console.log(data);
}
});
});
為了完整起見,我的快遞員在這里:
// insert an image
function objToString (obj) {
var str = '';
for (var p in obj) {
if (obj.hasOwnProperty(p)) {
str += p + '::' + obj[p] + '\n';
}
}
return str;
}
var fs = require('fs');
app.post('/upload', function(req, res){
var image = req.body;
image = objToString(image);
var noHeader = image.substring(image.indexOf(',') + 1);
var decoded = new Buffer(noHeader, 'base64');
fs.writeFile('testfile.png', decoded, function(err){
res.send("without header " + noHeader + "decoded " + decoded);
});
});
您將獲得的數據URL是base64字符串,例如:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAYAAAB5fY....
規范提到canvas API中的toBlob方法可直接將數據作為原始PNG獲取。 但是,最新版本的Chrome尚未實現該功能,因此我不會按原樣使用它。
如果要獲取原始PNG數據(從而使用image/png
Content-Type),則可以使用此toBlob polyfill 。
編輯 : 仔細檢查我的代碼后,我將數據URL作為JSON發送。
在客戶端中:
$.ajax({
url: '/api/1/activities/' + self.model.id + '/attachments/' + fileName,
type: 'PUT',
contentType: 'application/json',
dataType: 'json',
data: JSON.stringify({data: canv.toDataURL('image/png'}),
success: function () { ... }
});
在服務器中:
function parseDataURL(body) {
var match = /data:([^;]+);base64,(.*)/.exec(body);
if(!match)
return null;
return {
contentType: match[1],
data: new Buffer(match[2], 'base64')
};
}
app.post('/upload', function (req, res) {
var upload = parseDataURL(req.body.data);
...
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.