<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html5拍照上传头像裁剪代码 - 网页模板</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no, email=no" />
<link href="css/style.css" rel="stylesheet" type="text/css">
<!--[if IE]>
<script src="js/html5shiv.min.js"></script>
<![endif]-->
</head>
<body style="background:#000">
<!--头部-->
<div id="user_head">
<a id="left_ico" href="javascript:history.go(-1);">
<i class="icon iconfont"></i>
</a>
<span>个人头像</span>
<a id="s_dpage" href="javascript:void(0);">
<i class="icon iconfont"></i>
</a>
</div>
<a href="javascript:void(0);" class="logoBox" id="logoBox">
<img id="bgl" src="images/userico.jpg" width="100%">
</a>
<div class="htmleaf-container">
<div id="clipArea"></div>
<div id="view"></div>
</div>
<div class="btn-1">
<button>确认更换</button>
</div>
<div id="dpage">
<a href="javascript:void(0);">
<input type="button" name="file" class="button" value="拍照">
<input id="file" type="file" onchange="javascript:setImagePreview();" accept="image/*" multiple />
</a>
<a href="javascript:void(0);"><input type="button" name="file" class="button" value="选取照片">
<input id="file" type="file" onchange="javascript:setImagePreview();" accept="image/*" multiple /></a>
<a href="javascript:void(0);" class="qx"><button id="clipBtn">截取图片</button></a>
</div>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>
<script src="js/iscroll-zoom.js"></script>
<script src="js/hammer.js"></script>
<script src="js/jquery.photoClip.js"></script>
<script>
var obUrl = ''
//document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
$("#clipArea").photoClip({
width: 280,
height: 280,
file: "#file",
view: "#view",
ok: "#clipBtn",
loadStart: function() {
console.log("照片读取中");
},
loadComplete: function() {
console.log("照片读取完成");
},
clipFinish: function(dataURL) {
console.log(dataURL);
}
});
</script>
<script>
$(function(){
$("#logoBox,#s_dpage").click(function(){
$(".htmleaf-container").fadeIn(300);
$("#dpage").addClass("show");
})
$("#clipBtn").click(function(){
$("#logoBox").empty();
$('#logoBox').append('<img src="' + imgsource + '" align="absmiddle" style=" width:100%;">');
$(".htmleaf-container").hide();
$("#dpage").removeClass("show");
})
});
</script>
<script type="text/javascript">
$(function(){
jQuery.divselect = function(divselectid,inputselectid) {
var inputselect = $(inputselectid);
$(divselectid+" small").click(function(){
$("#divselect ul").toggle();
$(".mask").show();
});
$(divselectid+" ul li a").click(function(){
var txt = $(this).text();
$(divselectid+" small").html(txt);
var value = $(this).attr("selectid");
inputselect.val(value);
$(divselectid+" ul").hide();
$(".mask").hide();
$("#divselect small").css("color","#333")
});
};
$.divselect("#divselect","#inputselect");
});
</script>
<script type="text/javascript">
$(function(){
jQuery.divselectx = function(divselectxid,inputselectxid) {
var inputselectx = $(inputselectxid);
$(divselectxid+" small").click(function(){
$("#divselectx ul").toggle();
$(".mask").show();
});
$(divselectxid+" ul li a").click(function(){
var txt = $(this).text();
$(divselectxid+" small").html(txt);
var value = $(this).attr("selectidx");
inputselectx.val(value);
$(divselectxid+" ul").hide();
$(".mask").hide();
$("#divselectx small").css("color","#333")
});
};
$.divselectx("#divselectx","#inputselectx");
});
</script>
<script type="text/javascript">
$(function(){
jQuery.divselecty = function(divselectyid,inputselectyid) {
var inputselecty = $(inputselectyid);
$(divselectyid+" small").click(function(){
$("#divselecty ul").toggle();
$(".mask").show();
});
$(divselectyid+" ul li a").click(function(){
var txt = $(this).text();
$(divselectyid+" small").html(txt);
var value = $(this).attr("selectyid");
inputselecty.val(value);
$(divselectyid+" ul").hide();
$(".mask").hide();
$("#divselecty small").css("color","#333")
});
};
$.divselecty("#divselecty","#inputselecty");
});
</script>
<script type="text/javascript">
$(function(){
$(".mask").click(function(){
$(".mask").hide();
$(".all").hide();
})
$(".right input").blur(function () {
if ($.trim($(this).val()) == '') {
$(this).addClass("place").html();
}
else {
$(this).removeClass("place");
}
})
});
</script>
<script>
$("#file0").change(function(){
var objUrl = getObjectURL(this.files[0]) ;
obUrl = objUrl;
console.log("objUrl = "+objUrl) ;
if (objUrl) {
$("#img0").attr("src", objUrl).show();
}
else{
$("#img0").hide();
}
}) ;
function qd(){
var objUrl = getObjectURL(this.files[0]) ;
obUrl = objUrl;
console.log("objUrl = "+objUrl) ;
if (objUrl) {
$("#img0").attr("src", objUrl).show();
}
else{
$("#img0").hide();
}
}
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
</script>
<script type="text/javascript">
var subUrl = "";
$(function (){
$(".file-3").bind('change',function(){
subUrl = $(this).val()
$(".yulan").show();
$(".file-3").val("");
});
$(".file-3").each(function(){
if($(this).val()==""){
$(this).parents(".uploader").find(".filename").val("营业执照");
}
});
$(".btn-3").click(function(){
$("#img-1").attr("src", obUrl);
$(".yulan").hide();
$(".file-3").parents(".uploader").find(".filename").val(subUrl);
})
$(".btn-2").click(function(){
$(".yulan").hide();
})
});
</script>
<script type="text/javascript">
function setImagePreview() {
var preview, img_txt, localImag, file_head = document.getElementById("file_head"),
picture = file_head.value;
if (!picture.match(/.jpg|.gif|.png|.bmp/i)) return alert("您上传的图片格式不正确，请重新选择！"),
!1;
if (preview = document.getElementById("preview"), file_head.files && file_head.files[0]) preview.style.display = "block",
preview.style.width = "100px",
preview.style.height = "100px",
preview.src = window.navigator.userAgent.indexOf("Chrome") >= 1 || window.navigator.userAgent.indexOf("Safari") >= 1 ? window.webkitURL.createObjectURL(file_head.files[0]) : window.URL.createObjectURL(file_head.files[0]);
else {
file_head.select(),
file_head.blur(),
img_txt = document.selection.createRange().text,
localImag = document.getElementById("localImag"),
localImag.style.width = "100px",
localImag.style.height = "100px";
try {
localImag.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)",
localImag.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = img_txt
} catch(f) {
return alert("您上传的图片格式不正确，请重新选择！"),
!1
}
preview.style.display = "none",
document.selection.empty()
}
return document.getElementById("DivUp").style.display = "block",
!0
}
</script>
</body>
</ht
html5拍照上传头像裁剪代码.zip
版权申诉
5星 · 超过95%的资源 18 浏览量
2022-11-18
22:13:59
上传
评论
收藏 294KB ZIP 举报 
html5拍照上传头像裁剪代码.zip （17个子文件） 
html5拍照上传头像裁剪代码 jiaoben4455 css 
reset.css 2KB style.css 10KB images 
rpw_back_n.png 1KB logo_n.png 2KB
userico.jpg 47KB
index.html 8KB js jquery.min.js 82KB html5shiv.min.js 3KB iscroll-zoom.js 54KB jquery.photoClip.js 23KB hammer.js 68KB jquery-2.1.1.min.js 82KB font iconfont.eot 41KB iconfont.ttf 41KB
iconfont.svg 58KB iconfont.woff 25KB html5拍照上传头像裁剪代码.jpg 72KB资源评论
chenyp06312023-08-17发现一个宝藏资源，赶紧冲冲冲！支持大佬~
芝麻粒儿
- 粉丝: 5w+
- 资源: 2万+
最新资源
- 课程资料管理学 课件、习题与试题 周三多版本
- MATLAB检测运动车辆包括轨迹速度车道数量带GUI界面源码毕业设计.zip
- 风控：流动性覆盖率和净稳定资金率表
- 管理学-武汉大学7171-71
- Matlab的人脸考勤系统带有界面输入全身照人脸图片进行人脸扫描源码毕业设计.zip
- 基于大数据的旅游路线推荐系统.zip
- Matlab的教室人数统计系统可统计正脸人数源码毕业设计.zip
- 重磅上市公司论文实证分析筛选样本所用数据指标（2000-2022年） 是否ST或PT 金融
- 你的名字。.BD.720p.日语中字.mp4
- 重磅公司治理水平数据构造至2022（基于主成分分析方法），含最终数据及构造代码！
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
