拍照保存和对照片的旋转 放大 缩小 （支持鼠标滚轮），和放大之后可以拖动照片，查看、以及删除重拍
本效果是针对于摄像头拍照保存的效果，适用于高拍仪，摄像头，查看拍过之后的照片的状态效果，没有封装，只写了效果，多话不说，直接上代码，当然可以自己琢磨代码复原整个效果：
(function () {
var imaP={
init:function () {
var video = document.getElementById('video'),
canvas = document.getElementById('canvas'),
snap = document.getElementById('tack'),
img = document.getElementById('img'),
vendorUrl = window.URL || window.webkitURL,
i=0,
deg=0,
ii=1,
yy=1,
imgWidth=630,
imgHeight=480;
//得出前端放大或者缩小时候的原始状态
xzjg=function () {
if((deg/90)%2==0){
imgWidth=630;
imgHeight=480;
}else {
imgWidth=480;
imgHeight=366;
}
}
//获取初始的位置 保留值 还原
var oldLeft=$('.pig_img_icon').css('left');
var oldtop=$('.pig_img_icon').css('top');
var max=function(w,h){
ii=ii+0.11;
yy=yy+0.11;
if(ii>2){
ii=2;
}
if(yy>2){
yy=2;
}
var newWidth=w*ii;
var newHeight=h*yy;
$('.pig_img_icon').css({
width:newWidth+'px',
height:newHeight+'px',
})
},
min=function (w,h) {
ii=ii-0.11;
yy=yy-0.11;
if(ii<1){
ii=1;
}
if(yy<1){
yy=1;
}
var newWidth=w*ii;
var newHeight=h*yy;
//缩小到原始大小的时候恢复原位
if(ii==1||yy==1){
$('.pig_img_icon').css({
left:oldLeft,
top:oldtop,
})
}
$('.pig_img_icon').css({
width:newWidth+'px',
height:newHeight+'px',
})
};
//禁止图片拖动
document.getElementById('pig_img_icon').onmousedown = function(e){
e.preventDefault()
};
//图片的拖动处理
$('#pig_img_icon').mousedown(function (event) {
if(ii==1||yy==1){
return false;
}
var isMove = true;
var down={
x:event.pageX,
y:event.pageY,
}
var obj = $('.pig_img_icon');
var left=parseInt(obj.css('left'));
var top=parseInt(obj.css('top'));
$(document).mousemove(function (event) {
if(isMove == false){return false;}
var newX=down.x-event.pageX;
var newY=down.y-event.pageY;
var Newleft=left-newX;
var Newtop=top-newY;
if (isMove) {
obj.css({
left:Newleft,
top:Newtop,
});
}
}
).mouseup(
function () {
isMove = false;
}
);
});
//提示弹窗
function modalText(text) {
//自己封装的弹窗插件
$pg.popup({
text:text,//显示的文本
bgColor:"#f5f5f5", //背景皮肤
btnClass:'reBtn',//确定按钮的类值
btnBgColor:'#4f94cd',//按钮的颜色
btnToggle:{
btnDetermine:true,//确定按钮是否显示
btnCancel:false,//取消按钮是否显示
},
btnColor:'#fff',//按钮的字体颜色
determine:function(){},//确定按钮执行的方法
timeOut:0.8,//定时关闭 true为不关闭 或者不设置为不关闭
});
}
//图片的复原原位
var img={
fuyuan:function () {
//复原图片
ii=1,yy=1;
$('#pig_img>img').animate({
width:'630px',
height:'480px',
marginLeft:'-315px',
marginTop:'-240px',
left:'50%',
top:'50%'
},100)
},
xuanzhuan:function () {
//旋转后图片的样式
ii=1,yy=1;
$('#pig_img>img').animate({
width:'480px',
height:'366px',
marginLeft:'-240px',
marginTop:'-183px',
left:'50%',
top:'50%'
},100)
}
}
//媒体对象
navigator.getMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
navigator.getMedia({
video: true, //使用摄像头对象
audio: false //不适用音频
}, function(strem){
video.src = vendorUrl.createObjectURL(strem);
video.play();
}, function(error) {
//error.code
alert("未知的错误！");
});
snap.addEventListener('click', function(){ i++;
var liImgHtml="<li>" +
"<p class='imgText'>图 "+i+"</p>" +
"<img class='img"+ i+"'/>" +
"<span>X</span>" +
"</li>";
// return liImgHtml;
$('#hsm_imgList').append(liImgHtml);
//绘制canvas图形
canvas.getContext('2d').drawImage(video, 0, 0, 691, 550);
//把canvas图像转为img图片
$(".img"+i).attr('src',canvas.toDataURL("image/png"));
})
// 鼠标移入显示删除 对图片的各种操作
$('#hsm_imgList').on('mousemove','li',function () {
$(this).children('span').show();
}).on('mouseout','li',function () {
$(this).children('span').hide();
}).on('click','span',function () {
var _this=this;
$pg.popup({
text:"确定删除吗？",//显示的文本
bgColor:"#f5f5f5", //背景皮肤
btnClass:'reBtn',//确定按钮的类值 必传
btnBgColor:'#4f94cd',//按钮的颜色
btnToggle:{
btnDetermine:true,//确定按钮是否显示
btnCancel:true,//取消按钮是否显示
},
btnColor:'#fff',//按钮的字体颜色
determine:function(){
$(_this).parent('li').remove();
//关闭右边打开的模态
$('#pig_img').hide();
},//确定按钮执行的方法
});
}).on('click','img',function () {
var imgSrc=$(this).attr('src');
var imgText=$(this).siblings('.imgText').text();
$('#pig_img').show();
$('#pig_img').children('img').attr('src',imgSrc);
$('#pig_img').children('.pig_img_text').text(imgText);
$('#pig_img>img').css({
transform:'rotate(0deg)',
});
img.fuyuan();
deg=0;
})
$('#pig_img').on('click','span',function () {
$('#pig_img').hide();
})
// 操作区域的按钮
$('.hsm_r_operation').on('click','.TurnLeft',function () {
//左旋转按钮
deg=deg+90;
//如果没有选中图片那么则不操作给出提示
if($('#pig_img').is(':hidden')){
modalText("没有选中的图片");
return false;
}else {
$('#pig_img>img').css({
transform:'rotate('+deg+'deg)',
})
if((deg/90)%2!=0){
img.xuanzhuan();
}else {
img.fuyuan();
}
}
}).on('click','.TurnRight',function () {
//右旋转按钮
deg=deg-90;
//如果没有选中图片那么则不操作给出提示
if($('#pig_img').is(':hidden')){
modalText("没有选中的图片");
return false;
}else {
$('#pig_img>img').css({
transform:'rotate('+deg+'deg)',
})
if((deg/90)%2!=0){
img.xuanzhuan();
}else {
img.fuyuan();
}
}
})
//点击放大按钮的时候
$('.amplification').click(function () {
//如果没有选中图片那么则不操作给出提示
if($('#pig_img').is(':hidden')){
modalText("没有选中的图片");
return false;
}else {
xzjg();
max(imgWidth,imgHeight);
}
});
//缩小按钮
$('.narrow').click(function () {
//如果没有选中图片那么则不操作给出提示
if($('#pig_img').is(':hidden')){
modalText("没有选中的图片");
return false;
}else {
xzjg();
min(imgWidth,imgHeight);
}
});
//滚轮事件
var scrollFunc=function(e){
e=e || window.event;
if(e.wheelDelta){//IE/Opera/Chrome
if($('#pig_img').css('display')=='block'){
if(e.wheelDelta==120){
xzjg();
max(imgWidth,imgHeight);
}else {
xzjg();
min(imgWidth,imgHeight);
}
}
return false;
}else if(e.detail){//Firefox
}
}
/*注册事件*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
},
}
imaP.init();
})(jQuery)
有时间可以关注一下我的博客，有好的意见也希望大家多交流，技术在于讨论中进步：http://www.cnblogs.com/laiqiangjin
