ShearPhoto是一款免费开源的头像上传插件,兼容目前所有浏览器,纯原生JS和PHP编写。
0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值
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在线拍照
友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群