ウェブアプリと銘打って置きながら画像固定なのは気にしない方向で。
Jcropの公式php版をperl実装してみた。
材料
- Mojolicious
- Imager
- Jcrop
- JQuery
- スマホから適当な画像 meshi.jpg
材料調達
$ cpanm Mojolicious
$ cpanm Imager
$ wget https://github.com/tapmodo/Jcrop/tarball/v0.9.12
$ tar xvfz v0.9.12
$ mkdir -p public/{css,js}
$ cp -f tapmodo-Jcrop-1902fbc/css/* public/css/
$ cp -f tapmodo-Jcrop-1902fbc/js/* public/js/
$ ls public/
css js meshi.jpg
調理
#!/usr/bin/env perl
use Mojolicious::Lite;
use Imager;
my $image_file = "meshi.jpg";
get '/' => sub {
my $c = shift;
$c->stash(image_file => $image_file);
$c->render('index');
};
get '/entry' => sub {
my $c = shift;
my $left = $c->param('left');
my $top = $c->param('top');
my $width = $c->param('width');
my $height = $c->param('height');
my $file = app->home->rel_file("public/$image_file");
my $image = Imager->new(file => $file) or die Imager->errstr;
my $data;
my $newimg = $image->crop(left => $left, top => $top, width => $width, height => $height) or die $image->errstr;
$newimg->write(type => 'jpeg', data => \$data) or die $image->errstr;
$c->render(data => $data, format => 'jpeg');
};
app->start;
__DATA__
@@ index.html.ep
<!DOCTYPE html>
<html>
<head>
<title>crop</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.Jcrop.js"></script>
<link rel="stylesheet" href="/css/jquery.Jcrop.css" type="text/css" />
<script language="Javascript">
$(function(){
$('#cropbox').Jcrop({
aspectRatio: 0,
onSelect: updateCoords
});
});
function updateCoords(c)
{
$('#left').val(c.x);
$('#top').val(c.y);
$('#width').val(c.w);
$('#height').val(c.h);
};
function checkCoords()
{
if (parseInt($('#width').val())) return true;
alert('Please select a crop region then press submit.');
return false;
};
</script>
</head>
<body>
<img src="<%= $image_file %>" id="cropbox" />
<form action="/entry" method="get" onsubmit="return checkCoords();">
<input type="hidden" id="left" name="left" />
<input type="hidden" id="top" name="top" />
<input type="hidden" id="width" name="width" />
<input type="hidden" id="height" name="height" />
<input type="submit" value="Crop Image" />
</form>
</body>
</html>
実食
$ morbo -l http://*:80 crop.pl
公開鯖ないので公式のphp版で我慢してください。
DeepLiquid » Jcrop Image Cropping Demos
参考
cpanm で Image::Magick のインストールをする方法 - make world
http://d.hatena.ne.jp/littlebuddha/20101119/1290187054
Jcrop - Deep Liquid
http://deepliquid.com/content/Jcrop.html
Mojolicious::Liteでウェブツールを作ろう - Perl Advent Calendar Japan 2011 Casual Track
http://perl-users.jp/articles/advent-calendar/2011/casual/11
Mojolicious::LiteとImagerでモザイク画像にするウェブユーティリティサービスを作る - M.C.P.C.
http://blog.dtpwiki.jp/dtp/2011/11/mojoliciousli-1.html
バイナリデータを描画する / Mojoliciousリファレンス - サンプルコードによるPerl入門
http://d.hatena.ne.jp/perlcodesample/20110409/1306116147
注:render_dataメソッドはMojolicious 4.0で削除されました。
Perl::ImageMagickでよく使うコマンドとサンプル | くろひつじのメモ帳
http://memo.ark-under.net/memo/471
ImageMagick: PerlMagick, Perl API for ImageMagick
http://www.imagemagick.org/script/perl-magick.php
ImagerとImage::Magickのよく使うメソッドをまとめてみた - 80nikki
http://d.hatena.ne.jp/n80/20080415/1208265508
Imager::Cookbook - recipes working with Imager - metacpan.org
https://metacpan.org/pod/Imager::Cookbook
※ Image::Magickはcpanmでのインストールが難だったのでImagerへ