/*自定义input file*/
.file {display: block;width: 47.6vw;height: 14.2vw;background: url('images/input_bg.png') no-repeat center top;background-size: 100% 100%;overflow: hidden;text-decoration: none;text-indent: 0;text-align: center;line-height: 14.2vw;font-size: 4.2vw;font-weight: 400;color: rgba(255,255,255,1);margin: 0 auto;position: relative;
}
.file input {width: 100%;height: 100%;position: absolute;right: 0;top: 0;left: 0;bottom: 0;opacity: 0;
}
/*预览*/
.preview-contain{display: none;position: absolute;background: black;top: 0;left: 0;right: 0;bottom: 0;
}
.pic-border{position: absolute;/*top: 42vw;*/top: 40vw; left: 50%; transform: translateX(-50%);width: 85.3vw;height: 64vw;
}
#pic-border-visible{border: 0.5vw solid lightskyblue;overflow: hidden;
}
.pic-wrap{width: 100%;height: 100%;position: absolute;top: 0;left:0;right: 0;bottom: 0;background: black;
}
.pic{position: absolute;top: 50%;left: 50%;
}
.btn{width: 30.2vw;height: 13vw;background: url(images/btn_bg.png) no-repeat center top;background-size: 100% 100%;line-height: 13vw;text-align: center;font-size: 3.8vw;font-weight: bold;color: rgba(247,246,251,1);margin: 0 auto;
}
.btn_cancel{position: absolute;top: 130vw;left: 15.6vw;
}
.btn_confirm{position: absolute;top: 130vw;right: 15.6vw;
}
.preview-shade{position: absolute;top: 0;left:0;width: 100%;height: 100%;background: rgba(0,0,0,0.8);/*pointer-events:none ;*/
}
<a href="javascript:;" class="file">图片上传<input type="file" id="upload" accept="image/*" οnchange="changeImg(this)"/>
</a><div class="preview-contain"><!--底部图片--><div id="pic-border-none" class="pic-border"><div id ="pic-wrap-none" class="pic-wrap"><img id="pic-down" class="pic"/></div></div><!--遮罩顶部图片--><div class="preview-shade"><div id="pic-border-visible" class="pic-border"><div id="pic-wrap" class="pic-wrap"><img id="pic-up" class="pic"/></div></div><div class="btn btn_cancel" οnclick="goBack()">取消</div><div class="btn btn_confirm" οnclick="upload()">确认</div></div>
</div>
//图片上传
var Orientation = null;
function changeImg(file){$(".change-contain").hide()$(".preview-contain").show()var reader = new FileReader();reader.readAsDataURL(file.files[0]);var fileObj = file.files[0]; EXIF.getData(fileObj, function() { Orientation = EXIF.getTag(this, 'Orientation');console.log("Orientation===>",Orientation)});reader.onload = function(e) {compress(e.target.result);};$(".pic").css("transform","translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotate3d(0, 0, 1, 0deg)")
}
//预览
function compress(res){$(".preview-contain").show();var img = new Image();img.src = res;img.οnlοad=function(){var imgWidth = this.width,imgHeight = this.height,canvas = document.createElement("canvas"),ctx = canvas.getContext('2d');canvas.width = imgWidth;canvas.height = imgHeight;if(Orientation && Orientation != 1){//input file ios会旋转switch(Orientation){ case 6: // 旋转90度canvas.width = imgHeight; canvas.height = imgWidth; ctx.rotate(Math.PI / 2);// (0,-imgHeight) 从旋转原理图那里获得的起始点ctx.drawImage(this, 0, -imgHeight, imgWidth, imgHeight);break;case 3: // 旋转180度ctx.rotate(Math.PI); ctx.drawImage(this, -imgWidth, -imgHeight, imgWidth, imgHeight);break;case 8: // 旋转-90度canvas.width = imgHeight; canvas.height = imgWidth; ctx.rotate(3 * Math.PI / 2); ctx.drawImage(this, -imgWidth, 0, imgWidth, imgHeight);break;}}else{ctx.drawImage(this, 0, 0, imgWidth, imgHeight);}imgSrc = canvas.toDataURL("image/jpeg", 1.0);if(img.width/img.height>$("#pic-wrap-none")[0].offsetWidth/$("#pic-wrap-none")[0].offsetHeight){$(".pic").css({"width":img.width/img.height*$("#pic-wrap-none")[0].offsetHeight+"px","height":"100%","marginTop":$("#pic-wrap-none")[0].offsetHeight/-2+"px","marginLeft":img.width/img.height*$("#pic-wrap-none")[0].offsetHeight/-2+"px"})}else if(img.width/img.height<$("#pic-wrap-none")[0].offsetWidth/$("#pic-wrap-none")[0].offsetHeight){$(".pic").css({"width":"100%","height":img.height/img.width*$("#pic-wrap-none")[0].offsetWidth+"px","marginTop":img.height/img.width*$("#pic-wrap-none")[0].offsetWidth/-2+"px","marginLeft":$("#pic-wrap-none")[0].offsetWidth/-2+"px"})}else{$(".pic").css({"width":"auto","height":"auto","max-width":"100%","max-height":(img.height/$("#pic-wrap-none")[0].offsetHeight)*100+"%","marginTop":$("#pic-wrap-none")[0].offsetHeight/-2+"px","marginLeft":img.width/img.height*$("#pic-wrap-none")[0].offsetHeight/-2+"px"})}$(".pic").attr("src",imgSrc)}
}//上传
function upload(){var targetDom = $("#pic-wrap"); var copyDom = targetDom.clone(); copyDom.width(targetDom.width() + "px"); copyDom.height(targetDom.height() + "px"); $('body').append(copyDom); html2canvas(copyDom, { allowTaint: false, taintTest: false, useCORS: true,logging: false,letterRendering: true,height: targetDom.scrollHeight,width: targetDom.scrollWidth,onrendered : function(canvas) {let imgData = canvas.toDataURL('image/png',1.0);copyDom.hide()$(".preview-contain").hide();$(".label-contain").show();uploadFun(imgData) //upyungetTags()} })
}//操作事件
function move(pic){var pic=document.getElementById(pic);var mc=new Hammer.Manager(pic); var pinch=new Hammer.Pinch();var rotate=new Hammer.Rotate(); var pan=new Hammer.Pan();pinch.recognizeWith(rotate);mc.add([pinch,rotate,pan]);var pan_ex=pan_ey=rota_ex=pex3=pey3=0,pin_sl=1;mc.on("panmove", function(ev) {var pan_mx=ev.deltaX+pan_ex, pan_my=ev.deltaY+pan_ey;//设置元素变形值pic.style.webkitTransform="translate3d("+pan_mx+"px,"+pan_my+"px,0) scale3d("+pin_sl+","+pin_sl+",1) rotate3d(0,0,1,"+rota_ex+"deg)"; document.getElementById("pic-down").style.webkitTransform="translate3d("+pan_mx+"px,"+pan_my+"px,0) scale3d("+pin_sl+","+pin_sl+",1) rotate3d(0,0,1,"+rota_ex+"deg)";mc.on("panend", function(ev) {pan_ex=pan_mx;pan_ey=pan_my;}); ev.preventDefault();}); //双指拉伸旋转 mc.on("pinchstart rotatestart", function(ev) {var pinch_sa=ev.scale;var rota_sx=ev.rotation;mc.on("pinchmove rotatemove", function(ev) {pin_ml=ev.scale-pinch_sa+pin_sl; rota_mx=ev.rotation-rota_sx+rota_ex;if(pin_ml<0.5){pin_ml=0.5;}pic.style.webkitTransform="translate3d("+pan_ex+"px,"+pan_ey+"px,0) scale3d("+pin_ml+","+pin_ml+",1) rotate3d(0,0,1,"+rota_mx+"deg)";document.getElementById("pic-down").style.webkitTransform="translate3d("+pan_ex+"px,"+pan_ey+"px,0) scale3d("+pin_ml+","+pin_ml+",1) rotate3d(0,0,1,"+rota_mx+"deg)";mc.on("pinchend rotateend", function(ev) {pin_sl=pin_ml; rota_ex=rota_mx; //计算拉伸之后的区间值 if(ev.type=="rotateend"){pex3=pin_ml*pic.offsetWidth-(pic.offsetWidth); pey3=pin_ml*pic.offsetHeight-(pic.offsetHeight); } }); ev.preventDefault();}); ev.preventDefault();
}