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隕∫エ縺ァ縺ェ縺蛟、繧ゆク邱偵↓騾∽ソ。縺吶k蝣エ
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繧帝∽ソ。縺吶k蝣エ蜷医ッ竊薙′蠢隕
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縺九iBase64縺ョ繝繝シ繧ソ驛ィ蛻縺ョ縺ソ繧貞叙蠕
縲縲data = window.atob(base64Data), base64蠖「蠑上ョ譁蟄怜励r繝繧ウ繝シ繝
縲縲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!