home > 投稿 > ほぼ HTML5 だけでサムネイル作成
2011/03/03

ほぼ HTML5 だけでサムネイル作成


Flashでも同じようなことはできますが、HTML5だとiPhoneやiPadでも動作したり、
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);
	}
}

トラックバックURL

http://faces2.bascule.co.jp/mt/mt-tb.cgi/609

コメントを投稿

(コメントには承認が必要になることがあります。承認されるまではコメントは表示されません。)