Posted at

vue.js で canvas 画像を サーバーに 保存

canvasで生成した画像をサーバーに保存したい。

例えば vue-chart.js などで生成した画像ね。

canvas タグ 0 個目のものを保存。

ゴミテキストを削除して送る


graph.vue


methods: {

// グラフを 画像にして保存
saveCanvas(){
var canvas = document.getElementsByTagName('canvas')[0].toDataURL();
canvas = canvas.replace(/^data:image\/png;base64,/, '');

let dataform = new FormData();

dataform.append('canvas',canvas);
dataform.append('fortuneresult_id',5);

axios.post('/fortuneresult/upload/', dataform).then(e => {

console.log("成功");
}).catch((error) => {
console.log("エラー");
});

},


サーバー側


fortuneresultController.php


public function upload(Request $request)
{

// /var/www/html/uranaibako.com/public/tmp/example.png
$filename = public_path().'/tmp/example.png';
$fp = fopen($filename, 'w');
fwrite($fp,base64_decode($request->canvas));
fclose($fp);

Log::debug(public_path().'/tmp/example.png');

}


これで保存される。

あとは、好きにしてっ♪