Arsip

Archive for November, 2012

Aiskanix Image Editor using Jquery and Kinetic JS

2 November 2012 6 komentar

Features

  • Fit in Image to canvas
  • Rotate image clock wise and counter clock wise
  • Change display orientation to potrait and landscape.
  • Zoom and scale image.
  • Move image

Future Features

  • create collage image.
  • add Effect on image.
  • create color setting, brightness, contrast, saturation, etc.
  • Create Stamp and Text on canvas.

How to use

Installation

To use the aiskanix component, include the jQuery library and the kineticjs source file into your HTML document:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.1.js"></script>
<script type="text/javascript" src="js/jquery.aiskanix.js"></script>

[HTML]

<body>
    <div id="aiskanix_canvas"></div>
</body>

[Javascript]

<script type="text/javascript">
    $(function () {
        $('#aiskanix_canvas').aiskanix({ width: 300, height: 450 });
    });
</script>

Configuration

.aiskanix( Method, [Options] )

Method: functions
Options: An array to configure the properties of aiskanix

Methods

show_pic( config )
Show picture to canvas.

$('#aiskanix_canvas').aiskanix('show_pic', { images_url: 'img/1.jpg', draggable: true });

fit_in()
fit in image to canvas.

$('#aiskanix_canvas').aiskanix('fit_in');

fill_in()
Fill in image to canvas.

$('#aiskanix_canvas').aiskanix('fill_in');

move( x, y )
Move image to plus x and plus y by pixel.

// move left 5 pixel
$('#aiskanix_canvas').aiskanix('move', -5, 0);

// move right 5 pixel
$('#aiskanix_canvas').aiskanix('move', 5, 0);

// move up 5 pixel
$('#aiskanix_canvas').aiskanix('move', 0, -5);

// move down 5 pixel
$('#aiskanix_canvas').aiskanix('move', 0, 5);

rotate( cw )
Rotate image 90 degree clock wise or counter clock wise.

//Rotate image to 90 degree clock wise
$('#aiskanix_canvas').aiskanix('rotate', true);

//Rotate image to 90 degree counter clock wise
$('#aiskanix_canvas').aiskanix('rotate', false);

rotate_deg( deg )
Rotate image by degree of rotation.

//Rotate image to 45 degree
$('#aiskanix_canvas').aiskanix('rotate_deg', [45]);

Options

width: null (Required)
type: number
Width of canvas.
default : null

height: null (Required)
type: number
Height of canvas.
default : null

images_url: null (Required)
type: string
url of images.
default : null

x: 0
type: number
Horizontal Position of image.
default : 0

y: 0
type: number
Vertical Position of image.
default : 0

offset: { x: 0, y: 0 }
type: object
Offset Position of image.
default : { x: 0, y: 0 }

draggable: true
type: bool
image can be draggable.
default : true

potrait: true
type: bool
image orientation, potrait if true and Landscape if false.
default : true

rotation: 0
type: int
Rotation anggle (in degree) of image.
default : 0

scale: 1
type: float
Scale of image, default is 1, same as original image size scale.
default : 1

auto_fill_in: true
type: bool
If true, image is automatic Fill in when it draw.
default : true

auto_orientation: true
type: bool
If true, canvas is automaticly set to default orientation of image.
default : true

Kategori:Tidak Dikategorikan