/**
* photoeditor - v0.0.3 beta - 2012-05-21
* http://www.info-town.jp
*
* Copyright (c) 2012 Sawai Hiroshi
*/
// referred to the following site.
// http://www.programmingmat.jp/webhtml_lab/canvas_image.html
// http://www.programmingmat.jp/webhtml_lab/canvas_putdata.html
// http://atomicrobotdesign.com/blog/javascript/draw-a-rectangle-using-the-mouse-on-the-canvas-in-less-than-40-lines-of-javascript/
// http://himaxoff.blog111.fc2.com/blog-entry-87.html
// utils
if (!Object.create) {
(function() {
function F() {}
Object.create = function(object) {
F.prototype = object;
return new F();
};
}());
}
// photoeditor
jQuery(function($) {
// photoeditor aplication top level object
var photoeditor = {};
(function() {
var image, canvas, cxt, rect = {},
drag = false;
/**
* exception
*/
function appError(error) {
alert(error.message);
}
/**
* file open when file drag canvas
*/
// drag handler
// cancel default browser event
$('#drop').get(0).ondragover = function(event) {
return false;
};
// drop handler
// read file when file drag&drop to canvas
$('#drop').get(0).ondrop = function(event) {
var file, reader;
if (!event.dataTransfer.files.length) {
return false;
}
file = event.dataTransfer.files[0];
if (!/^image\/(png|jpeg|gif)$/.test(file.type)) {
appError({
message: 'file type error when file drag open'
});
return false;
}
reader = new FileReader();
reader.onload = function() {
image = document.createElement('img');
image.setAttribute('src', reader.result);
image.draggable = false;
$('#original').append(image);
image.onload = function() {
try {
$('#org-width').val(image.width);
$('#org-height').val(image.height);
} catch (e) {
appError({
message: 'error when load image'
});
}
};
};
// read image file
reader.readAsDataURL(file);
return false;
};
/**
* replace original
*/
$('#replace').click(function() {
$(image).attr('src', canvas.toDataURL());
});
/**
* risize image
*/
$('#resize').click(function() {
var width = $('#width').val(),
height = $('#height').val(),
checked;
width = parseInt(width, 10);
height = parseInt(height, 10);
if (!(width > 0 || height > 0)) {
appError({
message: 'input width or height plus number'
});
return false;
}
checked = $('#ratio').is(':checked');
if (!checked && !(width > 0 && height > 0)) {
appError({
message: 'check ratio or width and height input plus number'
});
return false;
}
try {
if (checked && width > 0) {
height = Math.floor(image.height * (width / image.width));
} else if (checked && height > 0) {
width = Math.floor(image.width * (height / image.height));
}
} catch (e) {
appError({
message: 'error height or width'
});
return false;
}
if ($('canvas').length === 0) {
canvas = document.createElement('canvas');
}
if ((cxt instanceof CanvasRenderingContext2D) === false) {
cxt = canvas.getContext('2d');
} else {
cxt.clearRect(0, 0, canvas.width, canvas.height);
}
canvas.width = width;
canvas.height = height;
try {
// draw image oldImageData to canvas
cxt.drawImage(image, 0, 0, width, height);
$('#canvas-container').append(canvas);
} catch (e2) {
appError({
message: 'can not draw Image when image is resize'
});
return false;
}
});
/*
* snap
*
* process image. add border. add 3px white padding
*/
$('#frame').click(function(e) {
if ($(image).length === 0) {
appError({
message: 'not original image. drop original file'
});
return false;
}
if ($('canvas').length === 0) {
canvas = document.createElement('canvas');
$('#canvas-container').append(canvas);
cxt = canvas.getContext('2d');
}
canvas.width = image.width + 10;
canvas.height = image.height + 10;
cxt.clearRect(0, 0, canvas.width, canvas.height);
cxt.fillStyle = '#EEEEEE';
cxt.fillRect(0, 0, canvas.width, canvas.height);
cxt.fillStyle = '#FFFFFF';
cxt.fillRect(1, 1, canvas.width - 2, canvas.height - 2);
cxt.drawImage(image, 5, 5);
});
/*
* rotate
*
* process image. add border. add 3px white padding
*/
$('#rotate').click(function(e) {
var degree, // 隗貞ｺｦ
radian, // 蠑ｧ蠎ｦ
cx, cy;
if (typeof canvas === 'undefined') {
appError({
message: 'not canvas'
});
return false;
}
if (cxt === 'undefined') {
appError({
message: 'not 2D context'
});
}
cxt.clearRect(0, 0, canvas.width, canvas.height);
degree = parseInt($('#degree').val(), 10);
radian = degree * (Math.PI / 180);
cx = canvas.width / 2;
cy = canvas.height / 2;
cxt.translate(cx, cy);
cxt.rotate(radian);
cxt.translate(-1 * cx, -1 * cy);
cxt.drawImage(image, 0, 0);
});
/*
* triming
*
* set size use mouse drag
*/
// draw rectangle area that draw by use mouse drag
$('#original').mousedown(function(e) {
$('#rectangle').css({
'display': 'none'
});
if (drag === false) {
rect.startX = e.pageX - $('#original').get(0).offsetLeft;
rect.startY = e.pageY - $('#original').get(0).offsetTop;
$('#rectangle').css({
'top': rect.startY,
'left': rect.startX
});
drag = true;
}
});
$('#original').mouseup(function mouseUp() {
drag = false;
});
// helper
function _drawRectangle() {
$('#rectangle').css({
'display': 'block',
'width': rect.w,
'height': rect.h
});
}
$('#original').mousemove(function(e) {
if (drag) {
rect.w = (e.pageX - this.offsetLeft) - rect.startX;
rect.h = (e.pageY - this.offsetTop) - rect.startY;
_drawRectangle();
}
});
// triming image when c is down. c key code is 67
$(window).keydown(function(e) {
if (e.keyCode === 67) { // c
$('#rectangle').css({
'display': 'none'
});
if ($('canvas').length === 0) {
canvas = document.createElement('canvas');
$('#canvas-container').append(canvas);
}
if ((cxt instanceof CanvasRenderingContext2D) === false) {
cxt = canvas.getContext('2d');
} else {
cxt.clearRect(0, 0, canvas.width, canvas.height);
}
canvas.width = rect.w;
canvas.height = rect.h;
cxt.drawImage(image, rect.startX, rect.startY, rect.w, rect.h, 0, 0, rect.w, rect.h);
}
});
}());
});
<h1>Photo</h1>
<div id="tool-container">
<div id="drop">File Drop Area</div>
<div class="panel">
オリジナル画像の情報<br>
横のサイズ: <input id="org-width" type="text" size="5" disabled="disabled">
縦のサイズ: <input id="org-height" type="text" size="5" disabled="disabled">
</div><!-- /panel -->
<div class="panel">
リサイズ<br>
横 <input id="width" size="5" type="text"> px
縦 <input type="text" id="height" size="5"> px<br>
比率固定 <input id="ratio" type="checkbox" name="ratio"><br>
<button id="resize">リサイズ</button>
</div><!-- /panel -->
<div class="panel">
<input id="degree" type="text" size="5"> 度 <button id="rotate">回転</button>
</div><!-- /panel -->
<div class="panel">
<button id="frame">フレームを付ける</button>
</div><!-- /panel -->
<div class="panel">
切り取り(オリジナルへの操作)<br>
ドラッグで範囲指定。
cで切り取り。
</div><!-- /panel -->
<div class="panel">
<button id="replace">オリジナルに設定</button>
</div><!-- /panel -->
</div><!-- /tool-container -->
<div id="image-container">
<div id="original">
<h3>オリジナル画像</h3>
<div id="rectangle"></div>
</div>
<div id="canvas-container">
<h3>編集後の画像</h3>
</div>
</div>
@charset "utf-8";
/**
* Copyright 2012 Sawai Hiroshi
* http://www.info-town.jp
*
*/
/**
font size
10 77
11 85
12 93 (was 93)
13 100
14 108 (was 107)
15 116 (was 114)
16 123.1 (was 122)
17 131 (was 129)
18 138.5 (was 136)
19 146.5 (was 144)
20 153.9 (was 152)
21 161.6 (was 159)
22 167
23 174
24 182
25 189
26 197
*/
/* -------------------------------------------------------------------
body
------------------------------------------------------------------- */
body {
line-height: 1.5;
}
button {
width: 140px;
}
/* -------------------------------------------------------------------
tool area
------------------------------------------------------------------- */
#tool-container {
float: left;
width: 28%;
padding: 3px;
margin-bottom: 10px;
background: #DDD;
border: 1px solid #BBB;
}
.panel {
padding: 8px;
margin: 3px;
background: #EFEFEF;
}
#org-width, #org-height {
background: #F4F4F4;
}
#drop {
height: 100px;
padding: 15px 8px;
margin-bottom: 10px;
background: #EFEFEF;
border: 5px dotted #DDD;
}
/* -------------------------------------------------------------------
image area
------------------------------------------------------------------- */
#image-container {
overflow: hidden;
float: right;
width: 70%;
}
#image-container h3 {
margin: 10px;
}
#original {
float: left;
width: 45%;
position: relative;
overflow: auto;
}
#rectangle {
z-index: 2;
position: absolute;
display: none;
top: 0;
left: 0;
width: 10px;
height: 10px;
border: 5px solid #999;
}
#canvas-container {
overflow: auto;
width: 45%;
float: right;
}