基于firefox实现ajax图片上传,Jcrop结合JAVA后台实现图片裁剪上传实例

本文介绍了头像裁剪上传功能,用到的技术有 
jQuery,springmvc,裁剪插件用的是jcrop(中间遇到很多坑,最终跨越)。

图片文件上传,有很多种协议的,这次主要讲的是“Content-Type:multipart/form-data;”的形式。

最后的效果如下:

图片上传步骤:

在工作中前台一些静态文件是通过FTL模版系统,前台页面通过SSI进行引用的,项目开发的时候就需要生成大量的静态SHTML文件了,本来觉得应该是后台的事情,可是自从我进这公司,这快东西就交给了前端~~我表示无语,没办法就按着习惯来吧,但我是个懒人,就想着能不能通过ajax提交呢

图片 1

1.用户选择图片

基于平时对MDN的翻阅,今天主要是FormData这个对象解决多文件上传的协议。

这里面有几个功能,第一个是支持拖拽,第二个压缩,第三个是裁剪编辑,第四个是上传和上传进度显示,下面依次介绍每个功能的实现:

2.将图片传入后台:用户选择图片的时候选择的是各种各样的,但是我们的网页显示图片大小是有限的,所以我们就要在用户选择图片之后将图片添加到后台进行压缩,压缩成我们想要的大小,之后再显示到页面才好

1. 拖拽显示图片

3.利用jcrop裁剪工具对图片进行裁剪并且实时预览

似乎一切都完美了,但是在File方法,只能在chrome级别上才能运行。图片上传没办法实现,一般普通文件可以通过Blob对象实现

拖拽读取的功能主要是要兼听html5的drag事件,这个没什么好说的,查查api就知道怎么做了,主要在于怎么读取用户拖过来的图片并把它转成base64以在本地显示。

4.点击确定按钮将裁剪用到的参数传入后台,后台图片进行剪切,之后缩放成我们需要的格式

下面通过了一些方法来实现,一个探索过程

var handler = {
init: function($container){
//需要把dragover的默认行为禁掉,不然会跳页
$container.on("dragover", function(event){
event.preventDefault();
});
$container.on("drop", function(event){
event.preventDefault();
//这里获取拖过来的图片文件,为一个File对象
var file = event.originalEvent.dataTransfer.files[0];
handler.handleDrop($(this), file);
});
}
}
varhandler={
init:function($container){
//需要把dragover的默认行为禁掉,不然会跳页
$container.on("dragover",function(event){
event.preventDefault();
});
$container.on("drop",function(event){
event.preventDefault();
//这里获取拖过来的图片文件,为一个File对象
varfile=event.originalEvent.dataTransfer.files[0];
handler.handleDrop($(this),file);
});
}
}

5.最后将图片路径传到前台进行展示

1.找了半天,URL转为File对象的方法,都失败了。。。

代码第10行获取图片文件,然后传给11行处理。

前台页面代码为:

2.HTML5 File方向

如果使用input,则监听input的change事件:

<script src="js-jcrop/jquery.min.js"></script> 
<script src="js-jcrop/jquery.Jcrop.js"></script> 
<script src="js/jquery-form.js"></script> 
<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" /> 
<style type="text/css"> 
/* 控制预览区域大小*/ 
#preview-pane .preview-container { 
 width: 110px; 
 height: 110px; 
 overflow: hidden; 
} 
#targetDiv{ 
 width: 400px; 
 height: 400px; 
 background-color:#f7fdff; 
} 
</style> 

<dl class="dialogBox D_uploadLogo"> 
  <dt class="dialogHeader"> 
    头像上传 
  </dt> 

  <dd class="dialogBody"> 
    <dl class="bisinessLogo"> 
      <dt class="title">预览</dt> 
      <dd class="img"> 
        <div id="preview-pane"> 
          <div class="preview-container"> 
           <img src="" id="target2" class="jcrop-preview" alt="未选择图片" /> 
          </div> 
         </div> 
      </dd> 
      <dd class="tc">尺寸:110*110px</dd> 
    </dl> 
    <dl class="bisinessInfo"> 
      <dt class="btnBox02"> 
        <form id="fileUp" action="/file/img/upload" method="post" enctype="multipart/form-data" target="ifm"> 
          <a class="btnGray" href="javascript:;"> 
            选择图片  
            <b class="bgR"></b> 
            <input type="file" id="file_upload" class="inputFile" name="userphoto"/> 
            <input type="hidden" id="w" name="w"/> 
            <input type="hidden" id="h" name="h"/> 
            <input type="hidden" id="x" name="x"/> 
            <input type="hidden" id="y" name="y"/> 
          </a> 
        </form> 
      </dt> 
      <dd class="info"> 

        请从本地选择一张照片,支持jpg,png格式   
        <div id="targetDiv"> 
          <img src="" id="target" width="400" height="400" alt="未选择图片"/> 
        </div> 
      </dd> 
    </dl> 
  </dd> 
  <input type="hidden" id="filePathInput" value=""/> 

  <dd class="dialogBottom"> 
    <a class="btnBlue btn_confirm" href="javascript:;" onclick="photoSummit();">确定<b class="bgR"></b></a> 
    <a class="btnGray btn_cancel" href="javascript:;" onclick="hideDialog();">取消<b class="bgR"></b></a> 
  </dd> 
</dl> 

a.通过HTML5 File的例子,开始

$container.on("change", "input[type=file]", function(event){
if(!this.value) return;
var file = this.files[0];
handler.handleDrop($(this).closest(".container"), file);
this.value = "";
});
$container.on("change","input[type=file]",function(event){
if(!this.value)return;
varfile=this.files[0];
handler.handleDrop($(this).closest(".container"),file);
this.value="";
});

1.选择图片

  

代码第3行,获取File对象,同样传给handleDrop进行处理

<img src="" id="target" width="400" height="400" alt="未选择图片"/> 

  在例子里面,打印 oFREvent.target.result
只是找到了”data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAUDBAQEAwUEBAQFBQ…”

接下来在handleDrop函数里,读取file的内容,并把它转成base64的格式:

2.提交:首先大家知道文件上传的时候用到的标签为:<input
type=”file”/>  
但是有时候我们需要用ajax提交文件并且异步提交,我们如果是用form表单提交的话就不是异步,这样我们回到页面就刷新页面,非常的不方便,但是现在ajax还不能支持文件提交的方式,这时候我们就用到了jquery-form.js,这个文件支持我们用ajax提交文件,代码为:

  原来是base64编码的数据

handleDrop: function($container, file){
var $img = $container.find("img");
handler.readImgFile(file, $img, $container);
},
handleDrop:function($container,file){
var$img= $container.find("img");
handler.readImgFile(file,$img,$container);
},
$("#fileUp").ajaxSubmit({ 
      type: "POST", 
      url:"/file/img/upload", 
      dataType: "json", 
      contentType:"application/json",  
        success: function(parameter){ 
        $("#target2").attr('src','/upload/'+parameter.fileName); 
        $("#filePathInput").val('/upload/'+parameter.fileName); 
        if($("#format").text()=="重新上传"){ 
          jcrop_api.destroy() 
        } 
        $("#format").text("重新上传"); 
        //启动jcrop支持 
        openJcrop('/upload/'+parameter.fileName); 
      }, 
      error : function(data) {  
        alert("ajax传输发生错误!!!"); 
      }  
     }); 

  看到上边的编码数据,就想到Blob对象是不是支持啊,代码如下

我的代码里面又调了个readImgFile的函数,helper的函数比较多,主要是为了拆解大模块和复用小模块。

这样就能将文件用ajax的方式提交到后台,注意这里用的是ajaxSubmit,这个方法对应jquery-form.js,后台代码为:

var fd = new FormData();
fd.append('my-file', new Blob(["data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAUDBAQEAwUEBAQFBQ..."],{type:"image/jpeg"}));
fd.append('my-file', new Blob(["data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAUDBAQEAwUEBAQFBQ..."],{type:"image/jpeg;base64"}));

在readImgFile里面读取图片文件内容:

package com.quanshi.ums.gate.view.rest.controllers; 
import java.io.IOException; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
import javax.servlet.http.HttpSession; 
import org.slf4j.Logger; 
import org.slf4j.LoggerFactory; 
import org.springframework.stereotype.Controller; 
import org.springframework.web.bind.annotation.RequestMapping; 
import org.springframework.web.bind.annotation.RequestMethod; 
import org.springframework.web.bind.annotation.RequestParam; 
import org.springframework.web.bind.annotation.ResponseBody; 
import org.springframework.web.multipart.MultipartFile; 
import com.quanshi.ums.gate.persistence.entities.Parameters; 
import com.quanshi.ums.gate.view.rest.ImgEditor; 
 /** 
 * 图像上传和修改相关类 
 * @author kunpeng.zhao 
 * 
 */ 
@Controller 
@RequestMapping(value="/file") 
public class FileEditorController { 
  ImgEditor imgEditor = new ImgEditor(); 
  public String filePathFinal = ""; 
  private Logger logger = LoggerFactory.getLogger(FileEditorController.class); 
  @RequestMapping(value="/img/cutandscale",method=RequestMethod.POST) 
  public @ResponseBody int cutAndscaleimg( 
      @RequestParam("w") int w, 
      @RequestParam("h") int h, 
      @RequestParam("x") int x, 
      @RequestParam("y") int y 
      ){ 
    imgEditor.cut(filePathFinal,filePathFinal,x,y,w,h); 
    imgEditor.scale(filePathFinal, filePathFinal, 110, 110, false); 
    return 1; 
  } 


  @RequestMapping(value="/img/upload",method=RequestMethod.POST) 
  public @ResponseBody Parameters addImage( 
     @RequestParam("userphoto") MultipartFile file, 
     HttpServletRequest request, 
     HttpServletResponse response, 
     HttpSession session 
     ){ 
   String filePath = "";  
   try { 
     //上传原图 
      filePath = imgEditor.uploadFile(file, request,session); 
      filePathFinal = filePath; 
      //将图片压缩成指定大小 
      imgEditor.zoomImage(filePath,filePath,400,400); 
    } catch (IOException e) { 
      e.printStackTrace(); 
    }  
    logger.info("filePath:" + filePath); 
    Parameters parameter = new Parameters(); 
    parameter.setFileName(imgEditor.getFileName(file,request,session)); 
   return parameter; 
  } 




} 

b..想到了base64是编码过了,通过方法解码下是不是可以

使用FileReader读取文件 JavaScript

我在这规定图片在前台展示的大小为400*400,用到的图片裁剪压缩等的工具类为:

  网上找了一段base64编码解码的例子,套了一下

readImgFile: function(file, $img, $container){
var reader = new FileReader(file);
//检验用户是否选则是图片文件
if(file.type.split("/")[0] !== "image"){
util.toast("You should choose an image file");
return;
} 
reader.onload = function(event) {
var base64 = event.target.result;
handler.compressAndUpload($img, base64, file, $container);
} 
reader.readAsDataURL(file);
}
readImgFile:function(file,$img,$container){
varreader=newFileReader(file);
//检验用户是否选则是图片文件
if(file.type.split("/")[0]!=="image"){
util.toast("You should choose an image file");
return;
} 
reader.onload=function(event){
varbase64=event.target.result;
handler.compressAndUpload($img,base64,file, $container);
} 
reader.readAsDataURL(file);
}
package com.quanshi.ums.gate.view.rest; 
import java.awt.Color; 
import java.awt.Graphics; 
import java.awt.Graphics2D; 
import java.awt.Image; 
import java.awt.Toolkit; 
import java.awt.geom.AffineTransform; 
import java.awt.image.AffineTransformOp; 
import java.awt.image.BufferedImage; 
import java.awt.image.CropImageFilter; 
import java.awt.image.FilteredImageSource; 
import java.awt.image.ImageFilter; 
import java.io.File; 
import java.io.IOException; 
import java.text.SimpleDateFormat; 
import java.util.Date; 

import javax.imageio.ImageIO; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpSession; 

import org.springframework.security.core.context.SecurityContextHolder; 
import org.springframework.web.multipart.MultipartFile; 

public class ImgEditor { 
   /** 
   * 改变图片尺寸 
   * @param srcFileName 源图片路径 
   * @param tagFileName 目的图片路径 
   * @param width 修改后的宽度 
   * @param height 修改后的高度 
   */ 
  public void zoomImage(String srcFileName,String tagFileName,int width,int height){  
     try { 
     BufferedImage bi = ImageIO.read(new File(srcFileName)); 
     BufferedImage tag=new BufferedImage(width,height, BufferedImage.TYPE_INT_RGB); 
     tag.getGraphics().drawImage(bi, 0, 0, width, height, null); 
     ImageIO.write(tag, "jpg", new File(tagFileName));//画图 
     } catch (IOException e) { 
     e.printStackTrace(); 
     } 
  } 



  /** 
   * 缩放图像(按高度和宽度缩放) 
   * @param srcImageFile 源图像文件地址 
   * @param result 缩放后的图像地址 
   * @param height 缩放后的高度 
   * @param width 缩放后的宽度 
   * @param bb 比例不对时是否需要补白:true为补白; false为不补白; 
   */ 
  public void scale(String srcImageFile, String result, int height, int width, boolean bb) { 
    try { 
      double ratio = 0.0; // 缩放比例 
      File f = new File(srcImageFile); 
      BufferedImage bi = ImageIO.read(f); 
      Image itemp = bi.getScaledInstance(width, height, bi.SCALE_SMOOTH); 
      // 计算比例 
      if ((bi.getHeight() > height) || (bi.getWidth() > width)) { 
        if (bi.getHeight() > bi.getWidth()) { 
          ratio = (new Integer(height)).doubleValue() 
              / bi.getHeight(); 
        } else { 
          ratio = (new Integer(width)).doubleValue() / bi.getWidth(); 
        } 
        AffineTransformOp op = new AffineTransformOp(AffineTransform 
            .getScaleInstance(ratio, ratio), null); 
        itemp = op.filter(bi, null); 
      } 
      if (bb) {//补白 
        BufferedImage image = new BufferedImage(width, height, 
            BufferedImage.TYPE_INT_RGB); 
        Graphics2D g = image.createGraphics(); 
        g.setColor(Color.white); 
        g.fillRect(0, 0, width, height); 
        if (width == itemp.getWidth(null)) 
          g.drawImage(itemp, 0, (height - itemp.getHeight(null)) / 2, 
              itemp.getWidth(null), itemp.getHeight(null), 
              Color.white, null); 
        else 
          g.drawImage(itemp, (width - itemp.getWidth(null)) / 2, 0, 
              itemp.getWidth(null), itemp.getHeight(null), 
              Color.white, null); 
        g.dispose(); 
        itemp = image; 
      } 
      ImageIO.write((BufferedImage) itemp, "JPEG", new File(result)); 
    } catch (IOException e) { 
      e.printStackTrace(); 
    } 
  } 


  /** 
   * 图像切割(按指定起点坐标和宽高切割) 
   * @param srcImageFile 源图像地址 
   * @param result 切片后的图像地址 
   * @param x 目标切片起点坐标X 
   * @param y 目标切片起点坐标Y 
   * @param width 目标切片宽度 
   * @param height 目标切片高度 
   */ 
  public void cut(String srcImageFile, String result, 
      int x, int y, int width, int height) { 
    try { 
      // 读取源图像 
      BufferedImage bi = ImageIO.read(new File(srcImageFile)); 
      int srcWidth = bi.getHeight(); // 源图宽度 
      int srcHeight = bi.getWidth(); // 源图高度 
      if (srcWidth > 0 && srcHeight > 0) { 
        Image image = bi.getScaledInstance(srcWidth, srcHeight, 
            Image.SCALE_DEFAULT); 
        // 四个参数分别为图像起点坐标和宽高 
        // 即: CropImageFilter(int x,int y,int width,int height) 
        ImageFilter cropFilter = new CropImageFilter(x, y, width, height); 
        Image img = Toolkit.getDefaultToolkit().createImage( 
            new FilteredImageSource(image.getSource(), 
                cropFilter)); 
        BufferedImage tag = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB); 
        Graphics g = tag.getGraphics(); 
        g.drawImage(img, 0, 0, width, height, null); // 绘制切割后的图 
        g.dispose(); 
        // 输出为文件 
        ImageIO.write(tag, "JPEG", new File(result)); 
      } 
    } catch (Exception e) { 
      e.printStackTrace(); 
    } 
  } 
  //获得文件名字 
  public String getFileName(MultipartFile file, HttpServletRequest request,HttpSession session){ 
    String FILE_PATH = session.getServletContext().getRealPath("/") + "upload"; 
    String fileName = file.getOriginalFilename();  
    String[] suffixNameArr = fileName.split("\\."); 
    String suffixName = suffixNameArr[suffixNameArr.length-1]; 
    String userName = SecurityContextHolder.getContext().getAuthentication().getName(); 

    return getTime() + userName+"."+suffixName; 
  } 
  //文件上传,返回文件路径 
  public String uploadFile(MultipartFile file, HttpServletRequest request,HttpSession session) throws IOException { 
    String FILE_PATH = session.getServletContext().getRealPath("/") + "upload"; 
    String fileName = getFileName(file,request,session); 
    File tempFile = new File(FILE_PATH, fileName);  

    if (!tempFile.getParentFile().exists()) {  
      tempFile.getParentFile().mkdir();  
    }  
    if (!tempFile.exists()) {  
      tempFile.createNewFile();  
    }  
    file.transferTo(tempFile); //将上传文件写到服务器上指定的文件。 

    return FILE_PATH + "\\" + tempFile.getName();  
  }  

  /* public static File getFile(String fileName) {  
    return new File(FILE_PATH, fileName);  
  } */  

  public String getTime(){ 
    Date date = new Date(); 
    SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");//设置日期格式 
    String nowTime = df.format(date).toString(); 
    return nowTime; 
  } 
} 
fd.append('my-file', new Blob([new Base64().decode('/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAUDBAQEAwUEBAQFBQ...')],{type:"image/jpeg"}));

这里是通过FileReader读取文件内容,调的是readAsDataURL,这个api能够把二进制图片内容转成base64的格式,读取完之后会触发onload事件,在onload里面进行显示和上传:

这样就将图片要裁剪的图片路径返回页面展示

抓包发现,正常传输文件和ajax数据不一样,那肯定是失败了

//获取图片base64内容
var base64 = event.target.result;
//如果图片大于1MB,将body置半透明
if(file.size > ONE_MB){
$("body").css("opacity", 0.5);
}
//因为这里图片太大会被卡一下,整个页面会不可操作
$img.attr("src", baseUrl);
//还原
if(file.size > ONE_MB){
$("body").css("opacity", 1);
}
//然后再调一个压缩和上传的函数
handler.compressAndUpload($img, file, $container);
//获取图片base64内容
varbase64=event.target.result;
//如果图片大于1MB,将body置半透明
if(file.size>ONE_MB){
$("body").css("opacity",0.5);
}
//因为这里图片太大会被卡一下,整个页面会不可操作
$img.attr("src",baseUrl);
//还原
if(file.size>ONE_MB){
$("body").css("opacity",1);
}
//然后再调一个压缩和上传的函数
handler.compressAndUpload($img,file,$container);

3.之后就是图片裁剪了,图片裁剪功能我找了好多插件,最后锁定jcrop,也是因为它的demo打动了我(太好看了),之后就是导入文件,在我这里,我在页面接收后台返回来的图片路径之后启用jcrop,也就是openJcrop()方法,这样就可以加载jcrop插件了,具体大家想进一步了解这个裁剪工具,请到官网细细的研究,我就不再做过多的谈论了。

3.浏览器页面级别为了安全,看来选择文件的操作是要自己手动下了

如果图片有几个Mb的,在上面第8行展示的时候被卡一下,笔者曾尝试使用web
worker多线程解决,但是由于多线程没有window对象,更不能操作dom,所以不能很好地解决这个问题。采取了一个补偿措施:通过把页面变虚告诉用户现在在处理之中,页面不可操作,稍等一会

大家注意,在这里有个大坑,真的是大坑,就是重新选择图片的时候,被jcrop加载过的img的src是不能被修改的,这个当初卡了我好长时间,被jcrop加载一次jcrop就会生成一个自己的编辑对象(我自己的理解),这时候就和原来的img没有关系了,直到最后细细研究api才找到了一个方法,唯一的方法就是将这个jcrop销毁,就是jcrop_api.destroy(),这个有很大的学问,我就提示一点,就是将jcrop_api声明为全局变量,下面贴出js代码(和上边的html是在一个文件下):

这里还会有一个问题,就是ios系统拍摄的照片,如果不是横着拍的,展示出来的照片旋转角度会有问题,如下一张竖着拍的照片,读出来是这样的:

<script type="text/javascript"> 

   $(function(){ 
    var jcrop_api; 
   }); 

   $("#file_upload").change(function() { 
     $("#msg").text(''); 
     var oFile = $(this)[0].files[0]; 
     //判断上传文件大小 
     if (oFile.size > 1*1024*1024) { 
       $("#msg").text('你选择了太大的文件,请选择一个1M以下的图像文件').css('color','red'); 
       $(this).val(""); 
       return; 
     } 

     //判断类型 
     var filepath=$(this).val(); 
     var extStart=filepath.lastIndexOf("."); 
     var ext=filepath.substring(extStart,filepath.length).toUpperCase(); 
     if(ext!=".JPEG"&&ext!=".PNG"&&ext!=".JPG"){ 
      $("#msg").text('请选择一个有效的图像文件(jpg,png是允许的)').css('color','red'); 
        $(this).val(""); 
        return; 
     } 

    $("#fileUp").ajaxSubmit({ 
      type: "POST", 
      url:"/file/img/upload", 
      dataType: "json", 
      contentType:"application/json",  
      success: function(parameter){ 
        $("#target2").attr('src','/upload/'+parameter.fileName); 
        $("#filePathInput").val('/upload/'+parameter.fileName); 
        if($("#format").text()=="重新上传"){ 
          jcrop_api.destroy() 
        } 
        $("#format").text("重新上传"); 
        //启动jcrop支持 
        openJcrop('/upload/'+parameter.fileName); 
      }, 
      error : function(data) {  
        alert("ajax传输发生错误!!!"); 
      }  
     }); 
  }); 
   function photoSummit(){ 

     //alert($("#w").val()+","+$("#h").val()+","+$("#x").val()+","+$("#y").val()); 
     //$("#fileUp").attr("action", "/file/img/upload").submit(); 
     if($("#w").val()>0 && $("#h").val()>0){ 
      $("#fileUp").ajaxSubmit({ 
        type: "POST", 
        url:"/file/img/cutandscale", 
        dataType: "json", 
        contentType:"application/json",  
        success: function(data){ 
           $("#msg").text('上传头像成功!!!').css('color','red'); 
           //alert($("#filePathInput").val()); 
           window.parent.back($("#filePathInput").val()); 
        },  
        error : function(data) {  
          alert("ajax传输发生错误!!!"); 
        }  
      }); 
     }else{ 
      $("#msg").text('请用鼠标截取图片').css('color','red'); 
     }  
   } 
   //启动jcrop 
  function openJcrop(imgPath){ 
    //启动jcrop支持 
        var boundx,boundy, 
        xsize = $('#preview-pane .preview-container').width(), 
        ysize = $('#preview-pane .preview-container').height(); 

        $('#target').Jcrop({ 
         minSize: [110, 110], 
         onChange: updatePreview, 
         onSelect: updatePreview, 
         aspectRatio: xsize / ysize 
        },function(){ 
         // Use the API to get the real image size 
         var bounds = this.getBounds(); 
         boundx = bounds[0]; 
         boundy = bounds[1]; 
         jcrop_api = this; 
        }); 
        jcrop_api.setImage(imgPath); 
        function updatePreview(c) 
        { 
         if (parseInt(c.w) > 0) 
         { 
          var rx = xsize / c.w; 
          var ry = ysize / c.h; 

          $('#preview-pane .preview-container img').css({ 
           width: Math.round(rx * boundx) + 'px', 
           height: Math.round(ry * boundy) + 'px', 
           marginLeft: '-' + Math.round(rx * c.x) + 'px', 
           marginTop: '-' + Math.round(ry * c.y) + 'px' 
          }); 
          $("#w").val(c.w); 
          $("#h").val(c.h); 
          $("#x").val(c.x); 
          $("#y").val(c.y); 
         } 
         }; 
  } 


</script> 

复制代码 代码如下:

图片 2

这样我们就完成了编辑功能,之后我们点击提交就会将w,h,x,y参数传到后台。

fd.append(‘my-file’,document.querySelector(Selector).files[0])

即不管你怎么拍,ios实际存的图片都是横着放的,因此需要用户自己手动去旋转。旋转的角度放在了exif的数据结构里面,把这个读出来就知道它的旋转角度了,用一个EXIF的库读取:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

其实一开始还是被File api给误导了,一直以为是页面级别的

读取exif的信息

您可能感兴趣的文章:

  • JavaWeb实现裁剪图片上传完整代码
  • Java如何实现图片裁剪预览功能
  • java裁剪图片并保存的示例分享
  • 使用Java代码在Android中实现图片裁剪功能
  • Java图片裁剪和生成缩略图的实例方法
  • Java实现图片与Base64编码互转
  • Java实现图片上传到服务器并把上传的图片读取出来
  • 详解Java中使用ImageIO类对图片进行压缩的方法
  • java实现文件上传下载和图片压缩代码示例
  • java实现的图片裁剪功能示例

忽然发现,最后一个地址里面最上面就是用的这种方法。。看来还是看东西不认真,走了些弯路。

readImgFile: function(file, $img, $container){
EXIF.getData(file, function(){
var orientation = this.exifdata.Orientation,
rotateDeg = 0;
//如果不是ios拍的照片或者是横拍的,则不用处理,直接读取
if(typeof orientation === "undefined" || orientation === 1){ 
//原本的readImgFile,添加一个rotateDeg的参数
handler.doReadImgFile(file, $img, $container, rotateDeg);
} 
//否则用canvas旋转一下
else{
rotateDeg = orientation === 6 ? 90*Math.PI/180 : 
orientation === 8 ? -90*Math.PI/180 :
orientation === 3 ? 180*Math.PI/180 : 0;
handler.doReadImgFile(file, $img, $container, rotateDeg);
} 
});
}

readImgFile:function(file,$img,$container){
EXIF.getData(file,function(){
varorientation=this.exifdata.Orientation,
rotateDeg=0;
//如果不是ios拍的照片或者是横拍的,则不用处理,直接读取
if(typeoforientation==="undefined"||orientation===1){
//原本的readImgFile,添加一个rotateDeg的参数
handler.doReadImgFile(file,$img,$container,rotateDeg);
} 
//否则用canvas旋转一下
else{
rotateDeg=orientation===6?90*Math.PI/180:
orientation===8?-90*Math.PI/180:
orientation===3?180*Math.PI/180:0;
handler.doReadImgFile(file,$img,$container,rotateDeg);
} 
});
}

后记,通过向油猴插件那样,加入函数,支持chrome级别的File方法,我们就可以方便的上传照片了。

知道角度之后,就可以用canvas处理了,在下面的压缩图片进行说明,因为压缩也要用到canvas

以上所述就是本文的全部内容了,希望大家能够喜欢。

2. 压缩图片

您可能感兴趣的文章:

  • PHP+jQuery+Ajax实现多图片上传效果
  • asp.net+ajaxfileupload.js
    实现文件异步上传代码分享
  • ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
  • 自己动手打造ajax图片上传(网上没有的)
  • 使用ajaxfileupload.js实现ajax上传文件php版
  • PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁
  • 使用AjaxFileUpload.js实现异步文件上传示例
  • Ajax上传实现根据服务器端返回数据进行js处理的方法

压缩图片可以借助canvas,canvas可以很方便地实现压缩,其原理是把一张图片画到一个小的画布,然后再把这个画布的内容导出base64,就能够拿到一张被压小的图片了:

//设定图片最大压缩宽度为1500px
var maxWidth = 1500;
var resultImg = handler.compress($img[0], maxWidth, file.type);
//设定图片最大压缩宽度为1500px
varmaxWidth=1500;
varresultImg=handler.compress($img[0],maxWidth,file.type);

compress函数进行压缩,在这个函数里首先创建一个canvas对象,然后计算这个画布的大小:

compress: function(img, maxWidth, mimeType){
//创建一个canvas对象
var cvs = document.createElement('canvas');
var width = img.naturalWidth,
height = img.naturalHeight,
imgRatio = width / height;
//如果图片维度超过了给定的maxWidth 1500,
//为了保持图片宽高比,计算画布的大小
if(width > maxWidth){
width = maxWidth;
height = width / imgRatio;
} 
cvs.width = width;
cvs.height = height;
}
compress:function(img,maxWidth,mimeType){
//创建一个canvas对象
varcvs=document.createElement('canvas');
varwidth=img.naturalWidth,
height=img.naturalHeight,
imgRatio=width/height;
//如果图片维度超过了给定的maxWidth 1500,
//为了保持图片宽高比,计算画布的大小
if(width>maxWidth){
width=maxWidth;
height=width/imgRatio;
} 
cvs.width=width;
cvs.height=height;
}

接下来把大的图片画到一个小的画布上,再导出:

//把大图片画到一个小画布
var ctx = cvs.getContext("2d").drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, width, height);
//图片质量进行适当压缩
var quality = width >= 1500 ? 0.5 :
width > 600 ? 0.6 : 1;
//导出图片为base64
var newImageData = cvs.toDataURL(mimeType, quality);
var resultImg = new Image();
resultImg.src = newImageData;
return resultImg;
//把大图片画到一个小画布
varctx=cvs.getContext("2d").drawImage(img,0,0,img.naturalWidth,img.naturalHeight,0,0,width,height);
//图片质量进行适当压缩
varquality=width>=1500?0.5:
width>600?0.6:1;
//导出图片为base64
varnewImageData=cvs.toDataURL(mimeType,quality);
varresultImg=newImage();
resultImg.src=newImageData;
returnresultImg;

最后一行返回了一个被压缩过的小图片,就可对这个图片进行裁剪了。

在说明裁剪之前,由于第二点提到ios拍的照片需要旋转一下,在压缩的时候可以一起处理。也就是说,如果需要旋转的话,那么画在canvas上面就把它旋转好了:

var ctx = cvs.getContext("2d");
var destX = 0,
destY = 0;
if(rotateDeg){
ctx.translate(cvs.width / 2, cvs.height / 2);
ctx.rotate(rotateDeg);
destX = -width / 2,
destY = -height / 2;
}
ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, destX, destY, width, height);
varctx=cvs.getContext("2d");
vardestX=0,
destY=0;
if(rotateDeg){
ctx.translate(cvs.width/2,cvs.height/2);
ctx.rotate(rotateDeg);
destX=-width/2,
destY=-height/2;
}
ctx.drawImage(img,0,0,img.naturalWidth,img.naturalHeight,destX,destY,width,height);

这样就解决了ios图片旋转的问题,得到一张旋转和压缩调节过的图片之后,再用它进行裁剪和编辑

3. 裁剪图片

裁剪图片,上网找到了一个插件cropper,这个插件还是挺强大,支持裁剪、旋转、翻转,但是它并没有对图片真正的处理,只是记录了用户做了哪些变换,然后你自己再去处理。可以把变换的数据传给后端,让后端去处理。这里我们在前端处理,因为我们不用去兼容IE8。

如下,我把一张图片,旋转了一下,同时翻转了一下:

图片 3

它的输出是:

{
height: 319.2000000000001,
rotate: 45,
scaleX: -1,
scaleY: 1,
width: 319.2000000000001
x: 193.2462838120872
y: 193.2462838120872
}
{
height:319.2000000000001,
rotate:45,
scaleX:-1,
scaleY:1,
width:319.2000000000001
x:193.2462838120872
y:193.2462838120872
}

通过这些信息就知道了:图片被左右翻转了一下,同时顺时针转了45度,还知道裁剪选框的位置和大小。通过这些完整的信息就可以做一对一的处理。

在展示的时候,插件使用的是img标签,设置它的css的transform属性进行变换。真正的处理还是要借助canvas,这里分三步说明:

1.
假设用户没有进行旋转和翻转,只是选了简单地选了下区域裁剪了一下,那就简单很多。最简单的办法就是创建一个canvas,它的大小就是选框的大小,然后根据起点x、y和宽高把图片相应的位置画到这个画布,再导出图片就可以了。由于考虑到需要翻转,所以用第二种方法,创建一个和图片一样大小的canvas,把图片原封不动地画上去,然后把选中区域的数据imageData存起来,重新设置画布的大小为选中框的大小,再把imageData画上去,最后再导出就可以了:

var cvs = document.createElement('canvas');
var img = $img[0];
var width = img.naturalWidth,
height = img.naturalHeight;
cvs.width = width;
cvs.height = height; 
var ctx = cvs.getContext("2d");
var destX = 0,
destY = 0;
ctx.drawImage(img, destX, destY);
//把选中框里的图片内容存起来
var imageData = ctx.getImageData(cropOptions.x, cropOptions.y, cropOptions.width, cropOptions.height);
cvs.width = cropOptions.width;
cvs.height = cropOptions.height;
//然后再画上去
ctx.putImageData(imageData, 0, 0);
varcvs=document.createElement('canvas');
varimg=$img[0];
varwidth=img.naturalWidth,
height=img.naturalHeight;
cvs.width=width;
cvs.height=height;
varctx=cvs.getContext("2d");
vardestX=0,
destY=0;
ctx.drawImage(img,destX,destY);
//把选中框里的图片内容存起来
varimageData=ctx.getImageData(cropOptions.x,cropOptions.y,cropOptions.width,cropOptions.height);
cvs.width=cropOptions.width;
cvs.height=cropOptions.height;
//然后再画上去
ctx.putImageData(imageData,0,0);

代码14行,通过插件给的数据,保存选中区域的图片数据,18行再把它画上去

2.
如果用户做了翻转,用上面的结构很容易可以实现,只需要在第11行drawImage之前对画布做一下翻转变化:

canvas flip实现 JavaScript

//fip
if(cropOptions.scaleX === -1 || cropOptions.scaleY === -1){
destX = cropOptions.scaleX === -1 ? width * -1 : 0; // Set x position to -100% if flip horizontal
destY = cropOptions.scaleY === -1 ? height * -1 : 0; // Set y position to -100% if flip vertical
ctx.scale(cropOptions.scaleX, cropOptions.scaleY);
}

ctx.drawImage(img, destX, destY);

//fip
if(cropOptions.scaleX===-1||cropOptions.scaleY===-1){
destX=cropOptions.scaleX===-1?width*-1:0; // Set x position to -100% if flip horizontal
destY=cropOptions.scaleY===-1?height*-1:0; // Set y position to -100% if flip vertical
ctx.scale(cropOptions.scaleX,cropOptions.scaleY);
}

ctx.drawImage(img,destX,destY);

其它的都不用变,就可以实现上下左右翻转了,难点在于既要翻转又要旋转

3.
两种变换叠加没办法直接通过变化canvas的坐标,一次性drawImage上去。还是有两种办法,第一种是用imageData进行数学变换,计算一遍得到imageData里面,从第一行到最后一行每个像素新的rgba值是多少,然后再画上去;第二种办法,就是创建第二个canvas,第一个canvas作翻转,把它的结果画到第二个canvas,然后再旋转,最后导到。由于第二种办法相对比较简单,我们采取第二种办法:

同上,在第一个canvas画完之后:

实现旋转、翻转结合 JavaScript

ctx.drawImage(img, destX, destY);
//rotate
if(cropOptions.rotate !== 0){
var newCanvas = document.createElement("canvas"),
deg = cropOptions.rotate / 180 * Math.PI;
//旋转之后,导致画布变大,需要计算一下
newCanvas.width = Math.abs(width * Math.cos(deg)) + Math.abs(height * Math.sin(deg));
newCanvas.height = Math.abs(width * Math.sin(deg)) + Math.abs(height * Math.cos(deg));
var newContext = newCanvas.getContext("2d");
newContext.save();
newContext.translate(newCanvas.width / 2, newCanvas.height / 2);
newContext.rotate(deg);
destX = -width / 2,
destY = -height / 2;
//将第一个canvas的内容在经旋转后的坐标系画上来
newContext.drawImage(cvs, destX, destY);
newContext.restore();
ctx = newContext;
cvs = newCanvas;
}
ctx.drawImage(img,destX,destY);
//rotate
if(cropOptions.rotate!==0){
varnewCanvas=document.createElement("canvas"),
deg=cropOptions.rotate/180*Math.PI;
//旋转之后,导致画布变大,需要计算一下
newCanvas.width=Math.abs(width*Math.cos(deg))+Math.abs(height*Math.sin(deg));
newCanvas.height=Math.abs(width*Math.sin(deg))+Math.abs(height*Math.cos(deg));
varnewContext=newCanvas.getContext("2d");
newContext.save();
newContext.translate(newCanvas.width/2,newCanvas.height/2);
newContext.rotate(deg);
destX=-width/2,
destY=-height/2;
//将第一个canvas的内容在经旋转后的坐标系画上来
newContext.drawImage(cvs,destX,destY);
newContext.restore();
ctx=newContext;
cvs=newCanvas;
}

将第二步的代码插入第一步,再将第三步的代码插入第二步,就是一个完整的处理过程了。

最后再介绍下上传

  1. 文件上传和上传进度

文件上传只能通过表单提交的形式,编码方式为multipart/form-data,这个我在《三种上传文件不刷新页面的方法讨论:iframe/FormData/FileReader》已做详细讨论,可以通过写一个form标签进行提交,但也可以模拟表单提交的格式,表单提交的格式在那篇文章已提及。

首先创建一个ajax请求:

JavaScript

var xhr = new XMLHttpRequest();
xhr.open('POST', upload_url, true);
var boundary = 'someboundary';
xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary);
varxhr=newXMLHttpRequest();
xhr.open('POST',upload_url,true);
varboundary='someboundary';
xhr.setRequestHeader('Content-Type','multipart/form-data; boundary='+boundary);

并设置编码方式,然后拼表单格式的数据进行上传:

ajax上传 JavaScript

var data = img.src;
data = data.replace('data:' + file.type + ';base64,', '');
xhr.sendAsBinary([
//name=data
'--' + boundary,
'Content-Disposition: form-data; name="data"; filename="' + file.name + '"',
'Content-Type: ' + file.type, '',
atob(data), '--' + boundary,
//name=docName
'--' + boundary,
'Content-Disposition: form-data; name="docName"', '',
file.name,
'--' + boundary + '--'
].join('\r\n'));

vardata=img.src;
data=data.replace('data:'+file.type+';base64,','');
xhr.sendAsBinary([
//name=data
'--'+boundary,
'Content-Disposition: form-data; name="data"; filename="'+file.name+'"',
'Content-Type: '+file.type,'',
atob(data),'--'+boundary,
//name=docName
'--'+boundary,
'Content-Disposition: form-data; name="docName"','',
file.name,
'--'+boundary+'--'
].join('\r\n'));

表单数据不同的字段是用boundary的随机字符串分隔的。拼好之后用sendAsBinary发出去,在调这个函数之前先监听下它的事件,包括

1) 上传的进度:

上传进度 JavaScript

xhr.upload.onprogress = function(event){
if(event.lengthComputable) {
duringCallback((event.loaded / event.total) * 100);
}
};
xhr.upload.onprogress=function(event){
if(event.lengthComputable){
duringCallback((event.loaded/event.total)*100);
}
};

这里凋duringCallback的回调函数,给这个回调函数传了当前进度的参数,用这个参数就可以设置进度条的过程了。进度条可以自己实现,或者直接上网找一个,随便一搜就有了。

2) 成功和失败:

成功和失败回调 JavaScript

xhr.onreadystatechange = function() {
if (this.readyState == 4){
if (this.status == 200) {
successCallback(this.responseText);
}else if (this.status >= 400) {
if (errorCallback && errorCallback instanceof Function) {
errorCallback(this.responseText);
} 
} 
}
};
xhr.onreadystatechange=function(){
if(this.readyState==4){
if(this.status==200){
successCallback(this.responseText);
}elseif(this.status>=400){
if(errorCallback&& errorCallback instanceofFunction){
errorCallback(this.responseText);
} 
} 
}
};

这个上传功能参考了一个JIC插件

至此整个功能就拆解说明完了,上面的代码可以兼容到IE10,FileReader的api到IE10才兼容,问题应该不大,因为微软都已经放弃了IE11以下的浏览器,为啥我们还要去兼容呢。

这个东西一来减少了后端的压力,二来不用和后端来回交互,对用户来说还是比较好的,除了上面说的一个地方会被卡一下之外。核心代码已在上面说明,完整代码和demo就不再放出来了。

以上所述是小编给大家介绍的WEB前端实现裁剪上传图片功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

  • JavaWeb实现裁剪图片上传完整代码
  • jQuery实现图片上传和裁剪插件Croppie
  • ASP.NET简单好用功能齐全图片上传工具类(水印、缩略图、裁剪等)
  • jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
  • .net实现裁剪网站上传图片的方法
  • php+js实现图片的上传、裁剪、预览、提交示例