2011/03/03
ほぼ HTML5 だけでサムネイル作成
Flashでも同じようなことはできますが、HTML5だとiPhoneやiPadでも動作したり、
flv以外の動画もキャプったりできるはず。
PNG作成→BASE64で送信までがHTML、受信して保存のみPHPという感じ。
flv以外の動画もキャプったりできるはず。
PNG作成→BASE64で送信までがHTML、受信して保存のみPHPという感じ。
html, js
// required
// jquery-1.5.1.min.js
// jquery.json-2.2.min.js
var Application = {
post:function(action,data,callback){
$.post('api.php?api='+action,data,callback);
},
saveImage:function(f,d,c ){
this.post('saveImage',$.toJSON({'filename':f,'data':d}),c);
}
};
function isSafari(){
if(navigator.userAgent.match(/Chrome/i)) return false;
if(navigator.userAgent.match(/Safari/i)) return true;
return false;
}
$(document).ready(main);
function main(){
var img = new Image();
img.src = '0107/Library204.png';
img.onload = function() {
var thumbHeight = 100;
var thumbWidth = Math.round(img.width*thumbHeight/img.height);
var thumb = document.createElement('canvas');
thumb.id = 'canvas0';
thumb.width = thumbWidth;
thumb.height = thumbHeight;
document.body.appendChild(thumb);
if(isSafari()){
//Safariは勝手にキレイに縮小される
var buffer = img;
}else{
//それ以外のブラウザは一手間
buffer = document.createElement('canvas');
buffer.id = 'canvas2';
buffer.width = thumbWidth*2;
buffer.height = thumbHeight*2;
buffer.getContext('2d').drawImage(img,0,0,buffer.width,buffer.height);
}
thumb.getContext('2d').drawImage(buffer, 0, 0,thumbWidth,thumbHeight);
var s = thumb.toDataURL().split(',').pop();
Application.saveImage('img/test.png',s,function(data){
console.log(data)
});
}
}
api.php
<?php
$start = microTime(true)*1000;
switch($_GET['api']){
case 'saveImage':saveImage();break;
}
function response($item){
echo json_encode(array(
'cost' => microTime(true)*1000-$GLOBALS['start'],
'content' => $item
));
}
function saveImage(){
$data = json_decode(file_get_contents('php://input'));
if(file_put_contents($data->filename,base64_decode($data->data))===false){
response(false);
}else{
response(true);
}
}