aiskanix.js is JQuery Plugin n kinetic js to editing image using HTML 5
Download aiskanix.min.js (minified 5kb)
- 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
- create collage image.
- add Effect on image.
- create color setting, brightness, contrast, saturation, etc.
- Create Stamp and Text on canvas.
##How to use
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>
.aiskanix( Method, [Options] )
Method: functions
Options: An array to configure the properties of aiskanix
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]);
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
copyright 2012 by Aiska Hendra Thanks to all Contributors
Having problem with this plugin please contact me at [email protected] and we’ll help you sort it out.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent