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’});
}