网站前端,web前端,前端脚本,前端优化|时代前端

phototype 是一个基于prototype的一个处理图片的js扩展脚本，支持旋转、缩放、翻转以及一些特殊等效果。目前是GPL协议，可以点击这里 下载下面为一些例子：

原图如下：

缩放功能的代码及效果如下：

1. l_oPhoto = new Photo( ) ;
2. l_oPhoto.resize ( { width:200 } ) ;
3. document.body .appendChild ( l_oPhoto.fetch ( ) ) ;

翻转功能的代码及效果如下：

1. l_oPhoto = new Photo( ) ;
2. l_oPhoto.resize ( { width:200 } ) ;
3. l_oPhoto.flipV ( ) ; // Flip vertical, use flipH to flip horizontal
4. document.body .appendChild ( l_oImage.fetch ( ) ) ;

旋转功能的代码及效果如下：

1. l_oPhoto = new Photo( ) ;
2. l_oPhoto.resize ( { width:200 } ) ;
3. l_oPhoto.flipV ( ) ;
4. l_oPhoto.rotate ( 3 ) ; // rotate 3 degrees
5. document.body .appendChild ( l_oPhoto.fetch ( ) ) ;

模糊化功能的代码及效果如下：

1. l_oPhoto = new Photo( ) ;
2. l_oPhoto.resize ( { width:200 } ) ;
3. l_oPhoto.flipV ( ) ;
4. l_oPhoto.rotate ( 3 ) ;
5. l_oPhoto.dropShadow ( ) ;
6. l_oPhoto.makeSketchy ( ) ;
7. document.body .appendChild ( l_oPhoto.fetch ( ) ) ;

灰色调功能的代码及效果如下：

1. l_oPhoto = new Photo( ) ;
2. l_oPhoto.resize ( { width:200 } ) ;
3. l_oPhoto.flipV ( ) ;
4. l_oPhoto.rotate ( 3 ) ;
5. l_oPhoto.dropShadow ( ) ;
6. l_oPhoto.toGreyScale ( ) ;
7. document.body .appendChild ( l_oPhoto.fetch ( ) ) ;

添加文字功能的代码及效果如下：

1. l_oPhoto = new Photo( ) ;
2. l_oPhoto.resize ( { width:200 } ) ;
3. l_oPhoto.rotate ( 3 ) ;
4. l_oPhoto.dropShadow ( ) ;
5. l_oPhoto.addCaption ( ‘Get ajaxorized!’ , ’1942.ttf’ ) ;
6. document.body .appendChild ( l_oPhoto.fetch ( ) ) ;

添加图形对象功能的代码及效果如下：

1. l_oPhoto = new Photo( ) ;
2. l_oPhoto.resize ( { width:200 } ) ;
3. l_oPhoto.rotate ( 3 ) ;
4. l_oPhoto.dropShadow ( ) ;
5. l_oPhoto.addCaption ( ‘Cheers, Chuck’ , ’1942.ttf’ ) ;
6. l_oPhoto.addChuckNorris ( ) ; // every library should have this function imo
7. document.body .appendChild ( l_oPhoto.fetch ( ) ) ;

另外，Phototype支持链式方法调用。如下：

1.  
2. l_oPhoto = new Photo( ) .load ( “test.jpg” ) .dropShadow ( ) .flipH ( ) .makeSketchy ( ) ;
3. document.body .appendChild ( l_oPhoto.fetch ( ) ) ;
4.  

原文链接：

Phototype: image manipulation with Javascript