cropper.js和exif.js实现头像上传缩放裁剪旋转

第cropper.js和exif.js实现头像上传缩放裁剪旋转本文实例为大家分享了cropper.js和exif.js实现头像上传缩放裁剪旋转的具体代码，供大家参考，具体内容如下

做了一个头像上传的小功能，同时处理了ios竖着拍照图片旋转的问题。cropper.js（注意：cropper压缩版的js在手机版版缩放图片会有黑屏和图片飞了的bug，所以建议引入开发版本的cropper）依赖jquery，exif是用来获取拍照信息的，用于修复ios竖着拍照旋转的问题，我用的是amazeui框架，我在文件中也引入。

这是html文件

!doctypehtml

htmllang="zh"

head

metacharset="UTF-8"

metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"

metaname="viewport"content="width=device-width,initial-scale=1.0"

titlecropper图片裁剪缩放/title

linkrel="stylesheet"href="css/amazeui.min.css"

linkrel="stylesheet"href="css/cropper.css"

linkrel="stylesheet"href="css/amazeui.cropper.css"

/head

body

div

labellogo/label

div

ahref="javascript:;"id="up-img-touch"data-am-modal="{target:'#doc-modal-1'}"

imgsrc="picture-2.jpg"id="pic_img"

inputtype="hidden"name="new_pic"id="new_pic"value=""

/a

/div

/div

!--图片上传框--

divid="doc-modal-1"

div

div

ahref="javascript:;"data-am-modal-close关闭/a

h1上传/h1

/div

div

div

div

imgalt=""src=""id="image"

/div

/div

div

div

buttontype="button"上传图片/button

inputtype="file"id="inputImage"

/div

div

spanοnclick="rotateimgleft()"左/span

spanοnclick="rotateimgright()"右/span

/div

div

buttontype="button"

id="up-btn-ok"url="admin/user/upload.action"确定/button

/div

/div

/div

/div

/div

/body

scriptsrc="js/jquery.min.js"charset="utf-8"/script

scriptsrc="js/amazeui.min.js"charset="utf-8"/script

scriptsrc="js/cropper.js"charset="utf-8"/script

scriptsrc="js/exif.js"charset="utf-8"/script

scriptsrc="js/custom_up_img.js"charset="utf-8"/script

/html

这是js文件

$(function(){

'usestrict';

//初始化

var$image=$('#image');

$image.cropper({

aspectRatio:1/1,

viewMode:1,

autoCropArea:0.8,

dragMode:'move',

cropBoxMovable:false,

cropBoxResizable:false,

zoomOnTouch:true,

zoomable:true,

movable:true,

});

var$inputImage=$('#inputImage');

varURL=window.URL||window.webkitURL;

varOrientation

varrotate_num

varblobURL;

if(URL){

$inputImage.change(function(){

varfiles=this.files;

varfile;

if(filesfiles.length){

file=files[0];

if(/^image\/\w+$/.test(file.type)){

blobURL=URL.createObjectURL(file);

$image.attr("src",blobURL)

EXIF.getData(file,function(){

EXIF.getAllTags(this);

Orientation=EXIF.getTag(this,'Orientation');

});

$image.one('built.cropper',function(){

//Revokewhenloadcomplete

URL.revokeObjectURL(blobURL);

}).cropper('reset',true).cropper('replace',blobURL);

$inputImage.val('');

}else{

window.alert('Pleasechooseanimagefile.');

}

}

});

}else{

$inputIp('disabled',true).parent().addClass('disabled');

}

$('#up-btn-ok').on('click',function(){

varimg_src=$image.attr("src");

if(img_src==""){

$('#my-alert').modal('open');

returnfalse;

}

varurl=$(this).attr("url");

varcanvas=$("#image").cropper('getCroppedCanvas');

varcv_img=document.createElement("canvas");

varctx=cv_img.getContext("2d");

varx=canvas.width/2;

vary=canvas.height/2;

cv_img.width=canvas.width;

cv_img.height=canvas.width;

ctx.clearRect(0,0,canvas.width,canvas.height);//先清掉画布上的内容

ctx.translate(x,y);//将绘图原点移到画布中点

if(Orientation==6){

ctx.rotate(Math.PI/2);

}elseif(Orientation==3){

ctx.rotate(-Math.PI/2);

}elseif(Orientation==8){

ctx.rotate(Math.PI/1);

}

ctx.translate(-x,-y);//将画布原点移动

ctx.drawImage(canvas,0,0);

vardata=cv_img.toDataURL("image/jpeg");

$("#pic_img").attr("src",data)

$('#new_pic').val($("#pic_img").attr("src"));

$('#doc-modal-1').modal('close'