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