html5移动端图片剪切上传 以及修改file标签样式
第一步引入 jquery
样式（自己可以调整）：
.file_upload_box {
display: inline-block;
width: 60px;
height: 60px;
position: relative;
overflow: hidden;
margin-top:20px;
margin-bottom:20px;
margin-left:20px;
order:2;
}
.file_upload_box input[type=file] {
position: absolute;
left: 0;
top: 0;
width: 100%;
line-height: 58px;
opacity: 0;
cursor: pointer;
}
.file_upload_box span {
display: inline-block;
width: 100%;
line-height: 45px;
text-align: center;
color: #FFF;
font-weight: 700;
text-decoration: none;
background-image:url("/templates/v2/tpls/cloudzhouyi/car/images/load_picture.png");
background-repeat:no-repeat;
width:58px;
height:58px;
}
.load-div-div{
width:80px;
height:60px;
// border:1px solid #ccc;
margin-top:18px;
margin-left:20px;
margin-bottom:10px;
}
.load-div-div img{
width:80px;
height:60px;
}
.load-div{
width:240px;
height:180px;
border:1px solid #00acff;
overflow:hidden;
margin-bottom:10px;
}
.img-div-img{
margin:0;
transform:none;
}
.cut-cut{
display: flex;
display: -webkit-flex; /* Safari */
justify-content:center;
margin-top:20%;
}
.cut-img{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
display: flex;
display: -webkit-flex; /* Safari */
justify-content:center;
z-index:100;
background-color:#dadada;
opacity:1;
flex-direction:column;
}
.cut-save{
margin-top:30px;
text-align:center;
}
.info-class-car{
display: flex;
display: -webkit-flex; /* Safari */
width:100%;
flex-wrap:wrap;
border-bottom:1px solid #dadada;
text-align:center;
}
.info-b-car{
height:30px;
line-height:30px;
margin-left:30px;
font-size:12px;
color:#dadada;
order:3;
margin-top:35px;
}
.info-b-car-save{
height:30px;
line-height:30px;
margin-left:30px;
font-size:12px;
color:black;
order:3;
margin-top:35px;
background-color:#00acff;
padding-top:5px;
padding-bottom:5px;
padding-left:20px;
padding-right:20px;
border-radius:5px;
}
.info-c-car{
text-align:center;
justify-content:center;
order:2;
}
接下来 html文件：
请上传车辆图片
接下来：js
//手势移动
function move(ele, x, y){
ele.css({
'-webkit-transform' : 'translate3d(' + x + 'px, ' + y + 'px, 0)',
'transform' : 'translate3d(' + x + 'px, ' + y + 'px, 0)'
});
}
//裁剪图片
function imageData($img,width,height,img,x,y,scale) {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = width ;
canvas.height = height;
ctx.drawImage(img, -x*scale, -y*scale, width*scale, height*scale, 0, 0, width, height);
return canvas.toDataURL();
}
function loadPicture(){ //上传图片信息
$("#file_upload_img input").on("change",function(){
$("#load-car").children().remove();
if($("#imgCrop-div")) $("#imgCrop-div").remove(); //更换图片
if($("#imgCrop")) $("#imgCrop").remove();
var fr = new FileReader();
var file = this.files[0];
if(!/image\/\w+/.test(file.type)){
alert(file.name + "不是图片文件！");
return;
}
fr.readAsDataURL(file);
console.log(file);
fr.onload = function(){
var src=fr.result;
$("body").append("
"
"
);
var $imgCrop = $("#imgCrop");
var $img = $imgCrop.find("img");
var img = $img[0];
var width = parseInt($imgCrop.css("width"));
var height = parseInt($imgCrop.css("height"));
var startX,startY,scale = 1;
var x = 0,y = 0;
var widthInit = img.width;
if(img.width>img.height){
img.height = height*1.1;
}else{
img.width = width*1.1;
}
scale = widthInit/img.width;
move($img, x, y);
img.addEventListener("touchstart",function(e){
startX = e.targetTouches[0].pageX;
startY = e.targetTouches[0].pageY;
return;
});
img.addEventListener("touchmove",function(e){
e.preventDefault();
e.stopPropagation();
var changeX = e.changedTouches[0].pageX - startX + x;
var changeY = e.changedTouches[0].pageY - startY + y;
move($(this), changeX, changeY);
return;
});
img.addEventListener("touchend",function(e){
var changeX = e.changedTouches[0].pageX - startX + x;
var changeY = e.changedTouches[0].pageY - startY + y;
x = x + e.changedTouches[0].pageX - startX;
y = y + e.changedTouches[0].pageY - startY;
move($(this), changeX, changeY);
return;
});
$("#save").on("click",function(){ //图片保存
var url = imageData($img,width,height,img,x,y,scale);
if($("#imgCrop-div")) $("#imgCrop-div").remove(); //裁剪更换图片
$("#file_upload").append("
"
"
);
console.log("======"+$("#file").val());
console.log(url);
alert(url); //请查看图片提交格式 这里是最终得到的图片地址和文件内容
});
};
});
}
感谢http://www.cnblogs.com/yifengBlog/p/5265598.html的参考