ShearPhoto免费的集成头像插件

ShearPhoto是一款免费开源的头像上传插件，兼容目前所有浏览器，纯原生JS和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>    <!--设置和处理对象方法的文件，要修改设置，请进入这个文件 -->
<style type="text/css">

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    
    }
});

对拍照感兴趣的可点击查看基于jQuery+PHP在线拍照