shearphoto官方论坛_HTML5裁剪头像_JS截图插件

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 11416|回复: 4

shearphoto开发文档及教程

[复制链接]

31

主题

53

帖子

379

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
379
发表于 2015-8-17 02:12:59 | 显示全部楼层 |阅读模式
                                                                    shearphoto开发文档及教程

                         开发文档作者还没来得及完善,过段时间再完善,源代码内含有注释,可以看着开发,如果不懂!请在论坛发贴 或者进官方群 461550716 向作者资询


重要:很多人问shearphoto能自由设置截框,截图比例吗?那么你看清楚:

shearphoto能自由设置截框,截图比例,设置方法源代码里面也有注释!
打开handle.js文件找到 ”proportional“设置行,
第一个参数进行设置 设置0表示不需要按比例,
如设置3/4表示截框3/4的比例。
设置完成后,也需要对shearphoto.config.php这个后端文件相应设置,同样是找到"proportional"设置截框的比例,和JS端保持一致哦!

下面是一些shearphoto的重要API接口,   设置文件:handle.js

  1.                          //██████████重要设置████████████████
  2.                
  3.                        var relativeUrl= "shearphoto_common"; //你不要在后面加斜杠,系统会自动给你加上斜杠,不信看下面!   index.html的JS引用路径自己改,很简单的说
  4.        
  5.         /*
  6.                                 relativeUrl有必要详细讲一下,这是1.4新加入的API
  7.                                 相对路径设置(后面不要有斜杠)!
  8.                             当index.html位置变动时,要填入写正确此值,否则会抱出图片无法读取,后端无法连接等情况的情况。专门为TP和YII等框架而加入的
  9.                             ----------------------------------------------------------------------------------------------------------------------
  10.                             relativeUrl 相对路径是相对什么而言呢?
  11.                             index.html 所在的目录位置   与 shearphoto/file 之间的相对目录
  12.                             这样讲好像你们不太明白?
  13.                             -----------------------------------------------------------------------------
  14.                             示例1:假如:index.htm        位于  http://xxx.com/abc/index.html
  15.                             shearphoto/file  则位于  http://xxx.com/abc/shearphoto/file
  16.                                         那么relativeUrl就要写成    relativeUrl:"shearphoto/shearphoto_common"
  17.                                         -----------------------------------------------------------------------------
  18.                                          示例2:假如:index.htm        位于  http://xxx.com/abc/shearphot/def/index.html
  19.                             shearphoto/file  则位于  http://xxx.com/abc/shearphoto/file
  20.                                         那么relativeUrl就要写成    relativeUrl:"../shearphoto_common"
  21.                                         -----------------------------------------------------------------------------
  22.                                           ,        表达能力有限,如果不懂,请到官网论坛 QQ群向作者资询       
  23.          */
  24.        
  25.                            //█████████重要设置█████████████████
  26.               relativeUrl = relativeUrl.replace(/(^\s*)|(\s*$)/g, "");//去掉相对路径的所有空格
  27.           relativeUrl === "" || (relativeUrl += "/");//在相对地址后面加斜框,不需要用户自己加
  28.                   var publicRelat= document.getElementById("relat");     //"relat"对像     
  29.               var publicRelatImg=publicRelat.getElementsByTagName("img");  //"relat"下的两张图片对像   
  30.               var Shear = new ShearPhoto;
  31.           Shear.config({
  32.                                      /*---------------用户设置部份开始-----------------------------------------------------------------------*/
  33.                                     relativeUrl:relativeUrl,  //取回相对路径,不懂原理的话,你不要改动哦,否则你又鸡巴痛了
  34.                                          
  35.                                             traverse:true,//可选 true,false 。 是否在拖动或拉伸时允许历遍全图(是否让大图动呢),
  36.                                        
  37.                 /*HTML5重点功能*/        translate3d:false,  //是否开启3D移动,CPU加速。可选true  false。默认关闭的,作者认为PC端没必要!在PC端开启后,有部份浏览器页面走位的问题。主要是各大浏览器不统一所致,手机端效果会明显!PC端没什么感觉。 原来是采用left top进行定位的,那么3D移动就是CSS3的translate3d属性。去百度一下translate3D吧
  38.                                        
  39.                 /*HTML5重点功能*/HTML5:true,//可选 true,false  是否使用HTML5进行切图 ,支持HTML5浏览器会使用HTML5进行切图,没有HTML5浏览器则采用原始的方式(先上传大图再截取),SHEARPHOTO这个方案无可挑剔了吧!
  40.                                        
  41.                 /*HTML5重点功能*/HTML5MAX:500, //默认请设0 (最大尺寸做事), HTML上传截图最大宽度, 宽度越大,HTML5截出来的图片容量越大,服务器压力就大,截图就更清淅! 设得越小 HTML5截出来的图片容量越小.但是造成一定程序的不清淅,请适量设置 当然开启HTML5切图,该设置才有效
  42.                                        
  43.             /*HTML5重点功能*/ HTML5Quality:0.9,        //截好的截图  0至1范围可选(可填小数)   HTML5切图的质量   为1时 最高        ,当然开启HTML5切图,该设置才有效,设得越高,越清淅,但文件体积越大,同上!               
  44.                                
  45.                  /*HTML5重点功能*/ HTML5FilesSize:50,      //如果是HTML5切图时,选择的图片不能超过多少,单位M,,你设大点都不怕,        ------因为HTML5ZIP会对原图进行压缩处理
  46.                                
  47.                 /*HTML5重点功能*/         HTML5Effects:true,//是否开启图片特效功能给用户  可选true false,  提示:有HTML5浏览器才会开启的!当然开启HTML5切图,该设置才有效
  48.                                        
  49.                 /*HTML5重点功能*/         HTML5ZIP:[900,0.9],//HTML5截图前载入的大图 是否压缩图片(数组成员 是数字) ,如果不压缩的话填false,在处理特效时或者拉伸时会明显出卡顿,不流畅!官方强烈建意你进行设置 ,默认填写的是[900,0.9] ,代表宽和高都不能大于900,质量是0.9(最大是1)
  50.                                
  51.                                 /*记住 preview (预览图片功能) 尽量设false*/
  52.                                
  53.                                               preview:[150],// 开启动态预览图片 (数组成员整数型,禁止含小数点 可选false 和数组)     数组内是宽度设置,没有高度设!因为高度会按比例做事 ,此设置代表预览150 大小的预览图(你可以增加多个预览图,如[100,70,50]),设置越多预览图,shearphoto性能越差!官方不建意你开启这个功能,尽可能请设为preview:false
  54.                              
  55.                            /*记住 preview 尽量设false*/
  56.                              
  57.                                                   url:relativeUrl+"php/shearphoto.php",   //后端处理地址,保证正确哦,这是常识,连这个地址都能写错,你就是菜B,已经在本版本中帮你加入相对路径,你基本不用改这里了
  58.                                 
  59.                                             scopeWidth:500,                 //可拖动范围宽  也就是"main"对象的初始大小(整数型,禁止含小数点) 宽和高的值最好能一致  
  60.                     
  61.                                            scopeHeight:500,                //可拖动范围高  也就是"main"对象的初始大小(整数型,禁止含小数点) 宽和高的值最好能一致      
  62.                     
  63.                                       proportional:[1,               <!--截框的宽高比例(宽除以高的比例值,这个设置其实就是1,对!你可以直接写1  如填3/4 那么就是0.75的比例,不设比例请设为0,注意更改比例后,后端也要进行相应设置,否则系统会给你抱出错误-->
  64.                                          
  65.                                          100,                      //必须整数!启动后的截框初始宽度(整数型,禁止含小数点)  
  66.                                        
  67.                                          133                       //比例设置后,这个高度无效,由宽和比例来决定(整数型,禁止含小数点)  
  68.                                           ],   
  69.                                   
  70.                                                Min:50,                 //截框拉伸或拖拽不能少于多少PX(整数型,禁止含小数点)  
  71.                                        
  72.                                                    Max:500,                //一开始启动时,图片的宽和高,有时候图片会很大的,必须要设置一下(整数型,禁止含小数点),尽可能和scopeWidth值 一致  
  73.                                        
  74.                                    backgroundColor:"#000",   //遮层色
  75.                                        
  76.                              backgroundOpacity:0.6, //遮层透明度-数字0-1 可选
  77.                                        
  78.                                                 Border:0,               //截框的边框大小 0代表动态边框。大于0表示静态边框,大于0时也代表静态边框的粗细值
  79.                     
  80.                                        BorderStyle:"solid",    //只作用于静态边框,截框的边框类型,其实是引入CSS的border属性,和CSS2的border属性是一样的
  81.                     
  82.                                        BorderColor:"#09F",  //只作用于静态边框,截框的边框色彩
  83.                                         /*---------------用户设置截图功能部份..还没结束----------------------页面下面还有一些细节设置,去看一下-------------------------------------------------*/
复制代码


回复

使用道具 举报

31

主题

53

帖子

379

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
379
 楼主| 发表于 2015-8-18 14:31:29 | 显示全部楼层
shearphoto.config.php          PHP 接口
  1. <?php
  2. /*.......................注意.............所有的shearphoto设置都几乎在这里.请细心品味...........................注意...文件最后修改时间2015年9月日..作者:明哥先生.........................*/
  3. define('IOURL',dirname(dirname(__FILE__)));   //锁定相对目录   

  4. define('ShearURL',IOURL.DIRECTORY_SEPARATOR); //DIRECTORY_SEPARATOR 是斜杠符,为兼容WINDOW和LINUX

  5. $ShearPhoto["config"]=array(

  6. "proportional"=>1,//比例截图,JS端也要相应设置哦,不然系统会给你抱出错误,不设比例填0,如填比例 :3/4  代表宽和高的比例是3/4(3除以4的意思懂吗,菜菜,你可直接填0.75,没错)

  7. "quality"=>85,// 截图质量,0为一般质量(质量大概75左右),  0-100可选 ! 整数型,质量超高,越清淅,缺点是文件体积越大,不是太严格追求图片高清,设0就可以,提示:PNG图片不带此效果

  8. "force_jpg"=>true,// 是否强制截好的图片是JPG格式  可选 true false

  9. "width"=>array(//自定义设置生成截图的张数,大小,在这设,看好下面!

  10.              //array(0,true),//此时的0   代表以用户取当时截取框的所截的大小为宽
  11.                         
  12.                          //array(-1,true),//此时的-1   代表以原图为基准,获得截图
  13.             
  14.                          array(150,true,"big"),//@参数1要生成的宽 (高度不用设,系统会按比例做事),    @参数2:是否为该图加水印,water参数要有水印地址才有效true或false  @参数3:图片后面添加字符串 (用以区分其他截图名称),填写字符串,不要含中文,不然能又鸡巴痛了 ,不定义的话默认为“0”
  15.             
  16.                          array(100,true,"centre"),//@参数1要生成的宽 (高度不用设,系统会按比例做事),   @参数2:是否为该图加水印,water参数要有水印地址才有效true或false  @参数3:图片后面添加字符串 (用以区分其他截图名称),填写字符串,不要含中文,不然能又鸡巴痛了,不定义的话默认为"0"
  17.             
  18.                          array(70,true,"small")//你可以继续增加多张照片
  19.                          ),

  20. "water"=>"../images/waterimg2.png",//只接受PNG水印,当然你对PHP熟练,你可以对主程序进行修改支持其他类型水印,不设就"water"=>false           

  21. "water_scope"=>100,       //图片少于多少不添加水印!没填水印地址,这里不起任何作用

  22. "temp"=>ShearURL."file".DIRECTORY_SEPARATOR."temp",  //等待截图的大图文件。就是上传图片的临时目录,截图后,图片会被删除,非HTML5切图就会用到它

  23. "tempSaveTime"=>600,//临时图片(也就是temp内的图片)保存时间,需要永久保存请设为0。单位秒

  24. "saveURL"=>ShearURL."file".DIRECTORY_SEPARATOR."shearphoto_file".DIRECTORY_SEPARATOR,//截好后的图片。储存的目录位置,后面不要加斜杠,系统会自动给补上!不要使用中文

  25. "filename"=>uniqid("shearphoto_")."_".mt_rand(100,999)."_"//截好后的图片的文件名字定义!要生成多个文件时 系统会自动在后面补上  "width"=>array()参数定义的名称,请查看上面的"width"=>array()
  26. );
  27. /*************ShearPhoto2.2免费,开源,兼容目前所有浏览器,纯原生JS和PHP编写,完美兼容linux和WINDOW服务器*********

  28.      从shearphoto 1.5直接跳跃到shearphoto 2.0,这是shearphoto重大革新。本来我是想shearphoto 1.6 、1.7、 1.8 慢慢升的,但是这样升级只会让shearphoto慢慢走向灭亡!
  29. 结果我又辛苦了一个多星期,把shearphoto 2.0升级完成!
  30. shearphoto2.0之前,我认为没必要加入HTML5,兼容IE6 7 8就够。但是直到后来!我知道这是我一个错误的决定
  31. 因为用户并没有为shearphoto 1.5埋单,原因shearphoto 1.5没有采用HTML5截取,用户觉得会增加服务器负载!而且又不是本地加载图片!我一个错误的决定!导致用户份额一直没有明显大增。

  32.    shearphoto 2.0是收集所有用户的意见开发而成的!

  33.    重大的特性就是全面支持HTML5

  34. 1:支持translate3d 硬件加速移动

  35. 2:加入图片预览功能

  36. 3:加入了压缩数码相机图片, 以及HTML5 canvas本地切图,截图
  37.    但依然继续支持IE6 7  8 哦!有人问IE6 7 8不兼容HTML5啊,你骗人吗?
  38.    先不要急!shearphoto 2.0的机制是这样的:有HTML5则使用HTML5 canvas切图,截图,JS先会截取一张最合理化的截图,然后交给后端,根据用户设置,进行压缩截图
  39.    没有HTML5的浏览器则采用先上传再截取的策略,就是原先1.5的策略。
  40.    当然有些用户如果不喜欢HTML5,也可以根据接口自行关闭

  41. 4:加HTML5图片特效,就一如美图秀秀这样的特效!shearphoto一共提供14种漂亮特效,感谢腾讯AI对图片特效提供支持
  42.    shearphoto 2.0增添很多接口,大部份是HTML5的设置!请下载源码体验


  43.   shearphoto外忧内患,已经没退路了。在WEB截图界,shearphoto必须要干个第一!.shearphoto不再局限于头像截取,shearphoto更可用于商城的商品图片编辑。
  44.   shearphoto含HTML5图片压缩功能!一张十M 二十M的图,照样能帮你压成你要的容量和尺寸,
  45. 一般情况下!商城的商品图片都是通过数码相机拍摄后,要用PHOTOshop把数码相机内几十M的图片,压缩,截取,然后才能上传到商城服务器!
  46. 这样的操作是不是太麻烦了! 如果你使用shearphoto你就快捷很多了,shearphoto你只需要直接选择图片,就会帮你进行压缩截取,上传,添加到数据库。这样的一条龙服务!
  47. shearphoto 2.0的机制是无可挑剔的!但是不排除有BUG存在,如果用户遇到BUG情况,请到论坛 或官方QQ群进行反馈,我会第一时间发布补丁!
  48. shearphoto支持PHP和JAVA,JAVA由网友所写,但是JAVA版并不是太完善,使用的是以前的shearphoto1.3!我 一直很想把NET  python nodejs  JAVA的很完善地做出来!
  49. 可惜个人能力有限,如果你喜欢shearphoto,你又会玩 NET  python nodejs  JAVA,又想为互联网做贡献,那么你可以加入shearphoto团队,把这些后端版本做出来。但shearphoto没有薪水给你!
  50. shearphoto免费开源的,没有利润可图,纯粹是抱着为互联网做贡献的心态!如果你跟我一样,请加入到shearphoto后端开发



  51. 浏览器支持:
  52. 兼容IE 6 及以上的所有浏览器

  53. 后端支持:
  54. 支持PHP5.X 至 PHP7.0或以上
  55. 支持JAVA后端(shearphoto1.3开发)

  56. 系统支持:
  57. 支持linux WINDOW服务器
  58. shearphoto采用原生JS面向对象 + 原生PHP面向对象开发,绝对不含JQ插件,对JQ情有独忠的,这个插件不合适你                                                     

  59.                                                                                                          2015  年  9月  25 日  
  60.                                                                                                          shearphoto作者:明哥先生
  61.                                                                                                          版本号:shearphoto2.2
  62.                                                                                                          shearphoto官网:www.shearphoto.com
  63.                                                                                                          shearphoto官方QQ群:461550716                                                                                                            

  64. ****************ShearPhoto2.2 免费,开源,兼容目前所有浏览器,纯原生JS和PHP编写,完美兼容linux和WINDOW服务器*******/
  65. ?>
复制代码

0

主题

1

帖子

4

积分

新手上路

Rank: 1

积分
4
发表于 2015-9-12 02:59:27 | 显示全部楼层
-页面下面还有一些细节设置?回复看看
回复 支持 反对

使用道具 举报

0

主题

2

帖子

21

积分

新手上路

Rank: 1

积分
21
发表于 2015-10-1 13:23:03 | 显示全部楼层
很有个性的年轻人  祝你成功
回复 支持 反对

使用道具 举报

0

主题

2

帖子

6

积分

新手上路

Rank: 1

积分
6
发表于 2016-3-25 00:30:37 | 显示全部楼层
想起我刚学会开发,领导让我找个上传头像插件,找了两天。。。。。没找到,不适有水印就是不好用。。作者给力
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

shearphoto新版本发布上一条 /1 下一条

QQ|Archiver|手机版|小黑屋|shearphoto官方论坛_HTML5裁剪头像_JS截图插件  

GMT+8, 2017-11-18 21:47 , Processed in 0.092212 second(s), 27 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表