躓いている部分のみ実装してみました。
ヒントとして見てください。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="jquery-2.1.4.min.js"></script>
<script>
function draw() {
// ここは動画をコマ抽出したロジックに読み替えてください。
var canvas = document.getElementById('koma');
if ( ! canvas || ! canvas.getContext ) {
return false;
}
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(120, 20);
ctx.lineTo(120, 120);
ctx.lineTo(20, 120);
ctx.closePath();
ctx.stroke();
}
function setExpiresAtAndCommt(f) {
var ret = confirm("送信します。よろしいですか?");
if(ret == false) return false;
var canvas = document.getElementById('koma');
var base64Data = canvas.toDataURL().split(',')[1];
var data = window.atob(base64Data);
var buff = new ArrayBuffer(data.length);
var arr = new Uint8Array(buff);
for( var i = 0; i < data.length; i++){
arr[i] = data.charCodeAt(i);
}
var blob = new Blob([arr], {type: 'image/png'});
var formData = new FormData();
formData.append('imagedata', blob);
formData.append('name', f.name.value);
formData.append('expiresAt', new Date(Date.now() + 86400000).toISOString());
$.ajax({
type: 'POST',
url: 'https://yabumi.cc/api/images.json',
cache: false,
data: formData,
contentType: false,
processData: false,
success: function(data, textStatus){
$("#kekka").html(data.url);
},
error: function(XMLHttpRequest, textStatus, errorThrown){
alert('Error! ' + textStatus + ' / ' + errorThrown);
}
});
return false;
}
</script>
</head>
<body onload="draw();">
<form name="f" method="post" onsubmit="return setExpiresAtAndCommt(this);">
ファイル名:<input type="text" name="name" value="" />
<input type="submit"/>
</form>
<canvas id="koma" width="140" height="140"></canvas>
<div id="kekka"></div>
</body>
</html>
開発のコツとしては、
・HTTP Headersなどのプラグインをブラウザに適用させて
『期待通り』のリクエストとなっているかチェック
・自身の環境にサーバ(XAMPPとか)を準備し、
やはり『期待通り』のデータが来ているかチェック
ちなみに、実装に流用したサイト
http://am-yu.net/2014/03/09/canvas-blob/
http://www.html5.jp/canvas/how.html
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/09/21 07:00