習作、ImageDraw

私的試み

ちょっとした習作なのですが、ブラウザ上のJPEG画像に落書きができて、それを実際の画像としてダウンロードできる仕組みを作ってみました。
（別に目新しくもなんともないよくあるやつだ）

画像の上でマウスをドラッグすると線が引けて、「create image」を押すと実際に画像が生成されます。
で、prototype.js(久しぶりに触った）とPHPのImage関数使ってます。
以下、ソース。

<?php

$scriptname = basename(__FILE__);
$imgfile = 'sample.jpg';
if(isset($_POST['position'])){

$pos = split(',', $_POST['position']);

$im = imagecreatefromjpeg($imgfile);
$black = imagecolorallocate($im,0,0,0);

for($i=0;$i<sizeof($pos);$i+=2) {
    @imagefilledrectangle($im, $pos[$i], $pos[$i+1], $pos[$i]+1, $pos[$i+1]+1, $black );
}
header('Content-Type: image/jpeg');
imagejpeg($im);
imagedestroy($im);
exit();
}

?><html>
<head>
<script type="text/javascript" src="prototype.js"></script>
<style type="text/css">
<!--
* { padding: 0; margin: 0; }
#main { padding: 10px; }
#imagearea { margin: 10px 0 0 10px; }
-->
</style>
<body>
<div id="main">
<img id="image" src="<?= $imgfile ?>" />
</div>
<br />
<a id="btn_create_image" href="#">create image</a>
</div>
<script type="text/javascript"><!--

var ImageDraw = Class.create();
ImageDraw.prototype = {
  initialize: function(eleimage, btnrealimage) {
    this.arr = [];
      this.image = eleimage;
    this.btnrealimage = btnrealimage;
    Event.observe(this.image, 'load', this.onLoadImage.bind(this));
  },
  onLoadImage: function(event) {

    var ele = document.createElement('div');
    var style = ele.style;
    var pos = Position.positionedOffset(this.image);
    style.left = pos[0];
    style.top = pos[1];
    style.width = this.image.width;
    style.height = this.image.height;
    style.zIndex = "999";
    style.position='absolute';
    document.body.appendChild(ele);

    this.ele = ele;
    this.mousestatus = false;
    Event.observe(document, 'mouseup',   this.onMouseUp.bind(this));
    Event.observe(this.ele, 'mousedown', this.onMouseDown.bind(this));
    Event.observe(this.ele, 'mousemove', this.onMouseMove.bind(this));
    
    this.createRealImageForm();
    Event.observe(this.btnrealimage, 'click', this.onPostCreateRealImage.bind(this));

  },
  onMouseDown: function(event) {
      console.log('mouse down');
    this.mousestatus = true;
    Event.stop(event);
  },
  onMouseUp: function(event) {
      console.log('mouse up');
      this.mousestatus = false;

  },
  onMouseMove: function(event) {
      if(!this.mousestatus) return;
    var obj = document.createElement('div');
    var style = obj.style;
    style.position='absolute';
    style.left = event.clientX + "px";
    style.top  = event.clientY + "px";
    style.height = style.width = "2px";
    style.backgroundColor = "black";
    style.zIndex = "999";
    document.body.appendChild(obj);
    var pos = Position.positionedOffset(this.ele);
    this.arr.push(event.clientX-pos[0],event.clientY-pos[1]);
  },
  createRealImageForm: function() {
      var obj = document.createElement('div');
    obj.innerHTML = '<form id="frm_create_real_image" method="post" action="<?= $scriptname ?>" target="_blank">' +
                    '<input type="hidden" name="image" value="sample.jpg" />' +
                    '<input type="hidden" name="position" value="" />' +
                    '</form>';
    var style = obj.style;
    style.position='absolute';
    style.left = style.top = "-100px";
    document.body.appendChild(obj);
    this.frm = $('frm_create_real_image');
    return;
  },
  onPostCreateRealImage: function(event) {
      if(!this.frm) return;
    this.frm.position.value = this.arr.join(',');
    this.frm.submit();
    Event.stop(event);
  }
}; 

obj = new ImageDraw($('image'), $('btn_create_image'));

//--></script>
</body></html>