纯js实现头像上传预览加剪裁效果

最新推荐文章于 2023-08-30 13:57:07 发布

原创

最新推荐文章于 2023-08-30 13:57:07 发布 · 872 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #jquery #css3

效果展示：

代码展示：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>头像上传预览加剪裁效果</title>
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<style>
div.uploadButton {
   border:1px solid #555;
   width:50px;
   height:20px;
   cursor:pointer;
   background:#fff;
   border-radius:4px;
   overflow:hidden;
}
div.rangeInputBox {
   margin:30px auto;
}
input[type=file] {
   display:none;
}
input[type=file]:focus {
   outline:none;
}
input[type=range].RangeInput {
   width:220px;
   height:12px;
   padding:0;
   margin:0 10px;
   vertical-align:middle;
   background:transparent;
   -webkit-appearance:none;
   -moz-appearance:none;
   appearance:none;
}
input[type=range].RangeInput:focus {
   outline:none
}
input[type=range].RangeInput::-webkit-slider-runnable-track {
   height:5px;
   cursor:pointer;
   background:#f2f5fb;
   border-radius:2px
}
input[type=range].RangeInput::-webkit-slider-thumb {
   width:12px;
   height:12px;
   margin-top:-4px;
   cursor:pointer;
   background:#d2dbe8;
   border-radius:50%;
   -webkit-appearance:none;
   appearance:none
}
input[type=range].RangeInput::-moz-range-track {
   height:5px;
   cursor:pointer;
   background:#f2f5fb;
   border-radius:2px
}
input[type=range].RangeInput::-moz-range-thumb {
   width:12px;
   height:12px;
   cursor:pointer;
   background:#d2dbe8;
   border:none;
   border-radius:50%
}
input[type=range].RangeInput::-ms-track {