<!doctype html><html><head><meta charset="utf-8"><title>html5拍照上传头像裁剪代码 - DD博客</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_take" type="file" class="file" onchange="javascript:setImagePreview('file_take');" accept="image/*" multiple /> </a> <a href="javascript:void(0);"><input type="button" name="file" class="button" value="选取照片"> <input id="file_album" type="file" class="file" onchange="javascript:setImagePreview('file_album');" 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 setImagePreview(fileId) {var preview, img_txt, localImag, file_head = document.getElementById(fileId),picture = file_head.value;if (!picture.match(/.jpg|.gif|.png|.bmp/i)) return alert("您上传的图片格式不正确，请重新选择！"),!1; preview = document.getElementById("preview"); if (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("dpage").style.display = "block",!0}</script></body></html>
评论