2008年5月11日 23:09

お絵かき掲示板的テスト

スポンサードリンク

急にcanvas要素をつかってお絵かきを投稿できるものを作ってみたくなったので、とりあえずテスト。FirefoxとOperaで動作確認しました。いろんなエラーチェックは省く。

HTML側で描画したストロークデータを、テキストボックスに入れて送信して、PerlのImage::Magickで描画して画像にしてみました。HTML部は、http://ponderer.org/download/canvas_demo/ を参考にしました。

canvas要素テスト [labo.dtpwiki.jp]

Filename: index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="Content-Type"
      content="text/html; charset=UTF-8" />
    <title>canvas要素テスト</title>
    <style type="text/css">
    canvas {
      border: 1px solid #ccc;
    }
    </style>
    <script type="text/javascript">
    if (typeof $ != 'function') {
      $ = function(id) {
        return document.getElementById( id )
      }
    }
    function textbox(f) {
      $('stroke').value += f + "; ";
      return;
    }
    function draw_thumb() {
    }
    function transform_event_coord(e) {
      return {
        x: e.clientX - 10,
        y: e.clientY - 10
      };
    }
    var drawing = false;
    var lastpos = { 
          x:-1,
          y:-1
        };
    function on_mousedown(e) {
      drawing = true;
      lastpos = transform_event_coord(e);
      textbox('start');
    }
    function on_mousemove(e) {
      if (!drawing) return;
      var pos    = transform_event_coord(e);
      var canvas = $("canvas");
      var ctx    = canvas.getContext("2d");
      ctx.strokeStyle = "rgba(200,0,0,0.6)";
      ctx.lineWidth = 4.0;
      ctx.beginPath();
      ctx.moveTo(lastpos.x, lastpos.y);
      ctx.lineTo(pos.x, pos.y);
      ctx.closePath();
      ctx.stroke();
      lastpos = pos;
      textbox( pos.x+','+pos.y );
    }
    function on_mouseup(e) {
      drawing = false;
      textbox('end');
      draw_thumb();
    }
    function init() {
      var canvas = $("canvas");
      addEventListener("mousedown", on_mousedown, false);
      addEventListener("mousemove", on_mousemove, false);
      addEventListener("mouseup"  , on_mouseup  , false);
      draw_thumb();
    }
    </script>
  </head>
  <body onload="init()">
    <canvas id="canvas" width="450" height="450"></canvas>
    <br />
    <form method="post" action="image.cgi">
      <input type="text" name="stroke" id="stroke" style="width:100%;" />
      <input type="submit" name="subimt" />
    </form>
  </body>
</html>

Filename: image.cgi

#!/usr/bin/perl
use strict;
use warnings;
use CGI;
use Image::Magick;
use utf8;
 
my $q = CGI->new();
 
my @stroke;
if ( $q->param('stroke') ) {
  @stroke = split 'end; start;',
                  'end; '.$q->param('stroke').'start;'
}
 
my $img = Image::Magick->new;
$img->Set(size=>'450x450'); # カンバスサイズ 
$img->ReadImage('xc:#ccc'); # バック白 
 
foreach my $item (@stroke) {
  $item =~s/ //g;
  if ( $item ne q() ) {
    $item =~ s/;/ /g;
    $img->Draw( primitive   => 'polyline',
                points      => $item,
                stroke      => '#DD5500',
                strokewidth => 4,
    );
  }
}
 
print $q->header( -type => 'image/jpeg' );
binmode STDOUT;
print $img->Write('jpeg:-');
 
exit;

テキストボックス内に入るストロークデータをスマートに設計できるのが真の計算機工学の技術者なんだろうな。

2008.05.11 23:09 投稿　大野義貴 [Web] | 固定リンク |