Canvasで作成したpng画像をファイル出力する際のメモ
Canvasを画像化
toDataURLメソッドで
//canvasのidがmycanvasだとして(jquery)
var imgdata=$("#mycanvas").toDataURL
//ajaxで渡す
$.ajax({
url:"saveimg",
data:{img:imgdata,filename,:"hoge.png"}
}).then(function(res){
console.log(res);
});
ファイルに出力する
saveimg.js
var express = require('express');
var router = express.Router();
var fs = require("fs");
/* GET users listing. */
router.post('/', function(req, res, next) {
var base64Data = req.body.img.replace(/^data:image\/png;base64,/, "");
fs.writeFile(req.body.path,base64Data,'base64',function(err){
console.log(err);
res.send(req.body.path+"書き込み完了");
})
});
module.exports = router;
ポイント
1.受け取った画像データのヘッダから上記文字列を削除する
var base64 = req.body.img.replace(/^data:image\/png;base64,/, "");
2.書き込み時に'base64'オプションを指定する
fs.writeFile(req.body.filename,base64Data,'base64',function(err){
これを指定しないと、開けない画像ファイルになってしまいます。
以上。