资讯频道 → Web前端
阅读更多

6顶
1踩

Web前端

原创新闻 Phototype：处理图片的JS脚本

2008-05-27 10:33 by 见习记者 numenzq 评论(4) 有7872人浏览
脚本

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

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

6
顶
1
踩
评论 共 4 条 请登录后发表评论
4 楼 niCe 2008-05-28 08:20
js其实还是很强大的
3 楼 shake863 2008-05-27 14:35
也吓俺一跳
2 楼 毕竟红尘 2008-05-27 12:46
刚吓我一跳...
以为
纯js都能这样了。
不过，如果如果只是让js发送图片处理请求，然后后台来处理图片，过程还是相当正常的。
之前看那个大牛，用js实现的超级玛丽，图片声音都用编码成js，也挺吃惊。
1 楼 welefen 2008-05-27 11:45
主要的工作还是ＰＨＰ来做的

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • Tom DeMarco：软件工程这个概念已过时？

    在过去的40年里，我们一直在折磨着自己——我们始终无法在预算之内按时完成一个软件项目。但是，正如我前面暗示的那样，这也绝不应该成为最高的目标。实际上，更重要的目标是“改革”——创建能够改变世界、或者让一个公司脱胎换骨或改变其运营方式的软件。

  • “程序员文化”之正名

    “程序员文化”之正名 （本文首发于《中华读书报》8月6日号）熊节　　我总是很愿意把“程序员”和“文化”这两个词组合在一起使用。不独是我，我相信每个程序员都希望有一种属于自己的文化。上至帝王将相，下至贩夫走卒，多年传统的职业分工和社会地位划分使这些人群都有属于自己的文化。但程序员（或者说，软件开发者），这个信息浪潮催生的新兴人群

  • 程序员的文化

    程序员的文化 零、 计数 程序员的计数是从零开始的，非程序员一般是从1开始计数的。从零开始计数的习惯 开始于机器语言和汇编语言的时代。为了方便计算偏移量，从零开始是合理的。C语言 继承了从零开始计数的历史传统。 一、helloworld 不管是哪个编程语言，首先举的编程示例一定是Hello world，这成了编程语言的举例子的潜规则。 非程序员听到helloworld 就只是一个helloworld，但是对于程序员来说，大家的第一个反应是 这就是编程语言的开门见山的例子了。 二、二进制 程序员在计算机

  • 软件开发方法述评（转）

    转载自：http://www.mscto.com/pm/2009012317242.html         60年代中期开始爆发了众所周知的软件危机。为了克服这一危机，在1968、1969年连续召开的两次著名的NATO会议上提出了软件工程这一术语，并在以后不断发展、完善。与此同时，软件研究人员也在不断探索新的软件开发方法。至今已形成八类软件开发方法。     一、Parnas方法

  • 程序员的“工匠精神”

    在如今的AI数字化时代，程序员作为技术革新的推动者，其职业素养不仅关系到个人职业发展，也影响着整个行业的健康发展。本文将探讨程序员应具备的专业精神，即“工匠精神”，工匠精神是指对工作的专注、创新、敬业和精益求精的态度，这些品质对于程序员来说至关重要，除此之外，还会分享一些程序员对技术执着追求的故事，以此来阐述程序员在职业生涯中应如何坚持和提升自己的专业素养。

  • 【历史上的今天】8 月 20 日：传奇程序员诞生日

    8 月 20 日，有着对软件工程产生重要影响的人出生，也有着为后世电子游戏带来革命的人出生，这一天的历史事件也同样在影响着过去、现在和未来。

  • 最后期限(Tom DeMarco) 汤普金斯先生的日记本 摘录

    最后期限(Tom DeMarco) 汤普金斯先生的日记本 摘录Q 兕丢疋没有魔法 整理 记录数25/111（选自 《最后期限》） □       优秀管理的四大要素▫            选择正确的人。▫            为他们分配正确的工作。▫            保持他们的积极性。▫            帮助团队凝聚起来并保持团队

  • 访谈录：与《最后期限》作者Tom DeMarco的一次面议

    //////////////////////////////////////////////////////////////////////////////////////////An interview with Tom DeMarco访谈录：与《最后期限》作者Tom DeMarco的一次面议////////////////////////////////////////////////

  • 数据流图（DFD）的概念

    数据流图（DFD）是描述数据流程的图形工具，数据流图从数据传递和加工的角度，以图形的方式刻画数据流从输入到输出的移动变换过程。数据流图是系统逻辑模型的图形表示，从数据的传递与加工角度，来刻画数据流从输入到输出的移动变化过程，直接支持系统的功能建模。 下面放出一张实例： 一般来说，数据流图由以下图形构成： 数据流图 - Yourdon / DeMarco符号的英文名可能更容易理解： 数据流程图包括： a．指明数据存在的数据符号，这些数据符号也可指明该数据所使用的媒体； b．指明对数据执行的处理的处理符号

  • 中国程序员的文化模式

    本文的中国程序员指的是在中国大陆境内（不包含港澳台和其他华语地区）的软件开发人员，他们通常会被划分为初级程序员、高级程序员、系统分析员和项目经理。他们的年龄通常在20-40，20—30岁程序员占总人数的80%以上，而其中26岁以下的又占一大半。收入水平在国内属于中等偏上，文化水平较高。    由于是在大陆地区，他们普遍是无神论者，无信仰；绝大多数为工科出身，主要来自计算机、自动控制、电子、应用

  • 程序员的温情管理文化

    程序员的温情管理文化作者：virushuo 发表于 2008-01-10 01:01 最后更新于 2008-01-10 01:01版权声明：可以任意转载，转载时请务必以超链接形式标明文章原始出处和作者信息及本声明。http://blog.devep.net/virushuo/2008/01/10/programmer-warmth-manage.html 今天戴飞和我聊起来为什

  • 程序员都有些什么企业文化？

    企业文化：优秀且适合企业发展的企业文化能为企业带来不可估量的积极影响。但是现在很多企业已经演变成了，给中数据大战了。每天被各种表沉陷其中。 今天我在看一个帖子在抱怨：程序员每天写日报，每周写周报。结果被很多网友吐槽！   让hr检查日报，没有写的直接开除，这个公司的领导是不懂劳动法吗？这样开除人是要给当事人翻倍赔偿的，而且仲裁百分百通过。多少人盼着捞一笔呢！如果公司钱多，可以任性的！...

  • 品The Tao Of Programming－享受程序员文化

    《编程之道》是一本另类的计算机图书，它没有教你编程技巧，也没有教你开发工具和方法，而是用富有哲理的故事和短小精悍的语句来启发我们的思考。 程序的源头来自西方科学，而“道”来自东方哲学。这本书颇有东方古典的韵味， 我猜想作者反复读过中国的老子和庄子，以老庄关于“道”学说为中心的学术流派—“道家”深深地影响了中国几千年的文化思想。 从编程之“道”我不由得想起庄子的一个脍炙人口的故事，庖丁解牛...

  • 程序员文化难道只是一种奢望？

    经过4年的奋斗，公司逐渐向软件转型，不得不佩服老板的眼光，在当时系统集成热火朝天时就开始做准备，并且把宝押在我们几个刚毕业的毛头小子身上。七十年代末出生的人还算是理想主义者，于是我们很容易地被老板鼓动，甚至到现在为止我从未和老板谈过我的薪水，因为我觉得如果你跟随一个人，如果连这方面都无法相互信任，那么还是走人吧。还好，虽然现在的薪水不是当地的最高水平，但我也很满意了，不...

  • 论程序员的“侠客文化”

    第一次明确提出侠客文化的是老卢先生。如果把程序员比作侠客的话，那么由程序员组成的团队，就是一个侠客的团队，这个团队的文化，就是“侠客文化”。问题是，这些侠客们应该如何管理呢？ 一个研发的项目组承担的职责是生产出产品。但是，...

  • 需求分析之需求分析方法——结构化分析方法【转】

    结构化分析方法 结构化开发方法(Structured Developing Method)是现有的软件开发方法中最成熟，应用最广泛的方法，主要特点是快速、自然和方便。结构化开发方法由结构化分析方法(SA法)、结构化设计方法(SD 法)及结构化程序设计方法(SP 法)构成的。 结构化分析(Structured Analysis，简称SA 法)方法是面向数据流的需求分析方法，是70 年代末由You

  • 细数程序员出身的互联网大佬，你会是下一个他吗？

    很多小伙伴都老是会碰到疑问，其实还是基础没打扎实，这些题如果你不看答案你能知道多少呢？如果还有很多不知道就证明基础没打扎实，如果你还在入门纠结，如果你还在苦恼怎么入门！小编有个建议，可以加小编弄的一个C语言交流基地，大家可以进入交流基地：565122788，里面新手入门资料，可以说从零到项目实战，都是可以免费获取的，还有程序员大牛为各位免费解答问题，热心肠的小伙伴也是蛮多的。不失为是一个交流的的好...

Global site tag (gtag.js) - Google Analytics