素材牛VIP会员

ShearPhoto免费的集成头像裁剪插件

 所属分类:PHP/MySql-上传,常用实例教程

 浏览:7729次-  下载:1723次-  评论:4次-  更新时间:2019-09-09
ShearPhoto免费的集成头像裁剪插件
积分说明:注册即送15牛币,每日签到可获得5牛币,成为VIP会员可永久免积分下载!   充值积分   充值会员   更多说明»
素材描述:ShearPhoto是一款免费开源的头像上传插件,兼容目前所有浏览器,纯原生JS和PHP编写。

基础属性

  • 语言PHP
  • 数据库
  • 难易中级

详细介绍

ShearPhoto有以下特点

1、ShearPhoto 完美支持Linux Windows 服务器,国外空间等完美通过。
2、兼容IE6及所有浏览器! 
3、ShearPhoto拖动拉伸超准,超流畅。 
4、能自由设置截框比例,设置方法里面也有注释!打开handle.js文件找到 "proportional"设置行,第一个参数进行设置 设置0表示不需要按比例,如设置3/4表示截框3/4的比例, 设置完成后,也需要对shearphoto.config.php这个后端文件相应设置,同样是找到"proportional"设置截框的比例,和JS端保持一致! 
引入ShearPhoto相关组件

<link href="css/ShearPhoto.css" rel="stylesheet" type="text/css" media="all"> 
<script  type="text/javascript" src="js/ShearPhoto.js" ></script><!--拉伸,截图的核心文件--> 
<script  type="text/javascript"  src="js/move.js" ></script><!--拖拽DIV JS文件 --> 
<script  type="text/javascript"  src="js/processdata.js" ></script><!--与服务器交互数据JS文件 --> 
<script  type="text/javascript"  src="js/UpImg.js" ></script>     <!--上传截图的JS文件 --> 
<script  type="text/javascript"  src="js/webcam.js" ></script>   <!--在线拍照 --> 
<script  type="text/javascript"  src="js/handle.js" ></script>    <!--设置和处理对象方法的文件,要修改设置,请进入这个文件 --> 
HTML部分

.point消息提示,#selectImage上传按钮,#PhotoLoading相册选取按钮,#camerasImage拍摄照片按钮

<div class="point"></div> 
<div id="SelectBox"> 
    <form  name="FORM" enctype="multipart/form-data" method="post"  target="POSTiframe"   >  
        <a href="javascript:;" id="selectImage"><input type="file"  name="UpFile" /></a> 
    </form>            
    <a href="javascript:;" id="PhotoLoading"></a> 
    <a href="javascript:;" id="camerasImage"></a> 
</div>
js/handle.js(ShearPhoto配置API)
Shear.config({ 
    /*---------------用户设置部份开始-----------------------------------------------------------------------*/ 
    url: "php/shearphoto.php", 
    //后端处理地址 
    scopeWidth: 500, 
    //可拖动范围宽  也就是"main"对象的初始大小   
    scopeHeight: 500, 
    //可拖动范围高  也就是"main"对象的初始大小   
    relat: publicRelat, 
    //请查看 id:"relat"对象  
    proportional: [1, //截框的宽高比例(宽除以高的比例值,这个设置其实就是3/4,不设比例请设为0,注意更改比例后,后端也要进行相应设置,否则系统会给你抱出错误) 
    100, //启动后的截框初始宽度 
    133.33333 //比例设置后,这个高度无效,由宽和比例来决定 
    ], 
    Min: 50, 
    //截框拉伸或拖拽不能少于多少PX 
    Max: 500, 
    //一开始启动时,图片的宽和高,有时候图片会很大的,必须要设置一下 
    Border: 1, 
    //截框的边框大小 
    BorderStyle: "solid", 
    //截框的边框类型,其实是引入CSS的border属性,和入CSS的border属性是一样的 
    BorderColor: "#04B7FB", 
    //截框的边框色彩 
    /*---------------用户设置部份结束-----------------------------------------------------------------------*/ 
    scope: document.getElementById("main"), 
    //范围对象  
    ImgDom: publicRelatImg[0], 
    //截图图片对象(小)   
    ImgMain: publicRelatImg[1], 
    //截图图片对象(大) 
    black: document.getElementById("black"), 
    //黑色遮层对象 
    form: document.getElementById("smallbox"), 
    //截框对象 
    ZoomDist: document.getElementById("ZoomDist"), 
    //放大工具条,可从HTML查看此对象,不作详细解释了 
    ZoomBar: document.getElementById("ZoomBar"), 
    //放大工具条,可从HTML查看此对象 
    to: { 
        BottomRight: document.getElementById("BottomRight"), 
        //拉伸点中右 
        TopRight: document.getElementById("TopRight"), 
        //拉伸点上右,下面如此类推,一共8点进行拉伸,下面不再作解释 
        Bottomleft: document.getElementById("Bottomleft"), 
        Topleft: document.getElementById("Topleft"), 
        Topmiddle: document.getElementById("Topmiddle"), 
        leftmiddle: document.getElementById("leftmiddle"), 
        Rightmiddle: document.getElementById("Rightmiddle"), 
        Bottommiddle: document.getElementById("Bottommiddle") 
    }, 
    SelectBox: document.getElementById("SelectBox"), 
    //选择图片方式的对象 
    Shearbar: document.getElementById("Shearbar"), 
    //截图工具条对象 
    UpFun: function() { //鼠标健松开时执行函数 
        Shear.MoveDiv.DivWHFun(); //把截框现时的宽高告诉JS     
    } 
});

截图展示

讨论这个素材(4)回答他人问题或分享使用心得会奖励牛币

艺***技  
2019年09月26日

下载看看!

回复
ni***ao  
2019年09月27日

很好!

回复
wx***52  
2019年09月29日

下载看看!!

回复
wx***58  
2019年11月07日

很好,很给力~

回复
wx***58  
2019年11月07日

要得就是这个效果~

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0 已下载次数:1723
所需牛币:15 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)