JavaScript canvas要素を画像として保存

html

<input type="text" name="name" />

<canvas id="snapshot"</canvas>

JavaScript

POSTデータ
var form_data = new FormData($('form')[0]);

form_data.append('canvas_data', getBlob($('#snapshot')[0].toDataURL()), 'canvas_data.png');

canvas要素でない値も一緒に送信する場
form_data.append('name', $('input[name="name"]').val());

$.ajax({
 laravelの場合トークンを付与
 headers: {
  'X-CSRF-TOKEN': $('input[name="_token"]').val()
 },
 type: 'POST',
 url: '/パス',
 data: form_data,
 formdataを送信する場合は↓が必要
 contentType: false,
 processData: false,
}).done(function (data) {
 console.log(`data:${data}`);
}).fail(function (XMLHttpRequest, textStatus, errorThrown) {
 console.log(`XMLHttpRequest:${XMLHttpRequest.status}`);
 console.log(`textStatus:${textStatus}`);
 console.log(`errorThrown :${errorThrown.message}`);
});

function getBlob(canvas){

 var base64Data = canvas.split(',')[1], Data URLからBase64のデータ部分のみを取得
  data = window.atob(base64Data), base64形式の文字列をデコード
  buff = new ArrayBuffer(data.length),
  arr = new Uint8Array(buff),
  blob, i, dataLen;

 blobの生成
 for( i = 0, dataLen = data.length; i < dataLen; i++){
  arr[i] = data.charCodeAt(i);
 }

 return new Blob([arr], {type: 'image/png'});
}

Follow me!