IOS web网页图片上传问题

用html5编写图片裁切上传,在iphone手机上可能会遇到图片方向错误问题,在此把解决方法和大家分享一下,
用到了html5的 FileReader和Canvas,如果还没有接触的同学,先了解一下其方法。

 //此方法为file input元素的change事件
 function change(){
  var file = this.files[0];
  var orientation;
  //EXIF js 可以读取图片的元信息 https://github.com/exif-js/exif-js
  EXIF.getData(file,function(){
    orientation=EXIF.getTag(this,‘Orientation‘);
  });
  var reader = new FileReader();
  reader.onload = function(e) {
    getImgData(this.result,orientation,function(data){
      //这里可以使用校正后的图片data了
    });
  }
  reader.readAsDataURL(file);
}
// @param {string} img 图片的base64
// @param {int} dir exif获取的方向信息
// @param {function} next 回调方法,返回校正方向后的base64
function getImgData(img,dir,next){
 var image=new Image();
 image.onload=function(){
  var degree=0,drawWidth,drawHeight,width,height;
  drawWidth=this.naturalWidth;
  drawHeight=this.naturalHeight;
  //以下改变一下图片大小
  var maxSide = Math.max(drawWidth, drawHeight);
  if (maxSide > 1024) {
    var minSide = Math.min(drawWidth, drawHeight);
    minSide = minSide / maxSide * 1024;
    maxSide = 1024;
    if (drawWidth > drawHeight) {
      drawWidth = maxSide;
      drawHeight = minSide;
    } else {
      drawWidth = minSide;
      drawHeight = maxSide;
    }
  }
  var canvas=document.createElement(‘canvas‘);
  canvas.width=width=drawWidth;
  canvas.height=height=drawHeight;
  var context=canvas.getContext(‘2d‘);
  //判断图片方向,重置canvas大小,确定旋转角度,iphone默认的是home键在右方的横屏拍摄方式
  switch(dir){
    //iphone横屏拍摄,此时home键在左侧
    case 3:
      degree=180;
      drawWidth=-width;
      drawHeight=-height;
      break;
    //iphone竖屏拍摄,此时home键在下方(正常拿手机的方向)
    case 6:
      canvas.width=height;
      canvas.height=width;
      degree=90;
      drawWidth=width;
      drawHeight=-height;
      break;
    //iphone竖屏拍摄,此时home键在上方
    case 8:
      canvas.width=height;
      canvas.height=width;
      degree=270;
      drawWidth=-width;
      drawHeight=height;
      break;
  }
  //使用canvas旋转校正
  context.rotate(degree*Math.PI/180);
  context.drawImage(this,0,0,drawWidth,drawHeight);
  //返回校正图片
  next(canvas.toDataURL("image/jpeg",.8));
 }
 image.src=img;
}
时间: 2024-11-08 22:18:37

IOS web网页图片上传问题的相关文章

java web开发 图片上传功能

基本思路在于,配置路径,然后用java I/O的api将图片上传到该目录下. String photoPath =    ServletActionContext.getServletContext().getRealPath("/user/photo/" + username); 这句是获取服务器下的目录+username 而username通过session获取. 这是一个图片上传action的方法: public String execute() throws Exception

web端 图片上传

需要插件:ajaxfileupload.js  commons-fileupload-1.3.1.jarweb端: <form id="saveForm" method="post" enctype="multipart/form-data"> <label>广告图片:</label><input type="file" id="image1" name="

【juincen】Web中图片上传处理 jQuery+Ajax+SpringMVC

今天做项目有个需求,页面上需要上传一个图片,之前解决了一次,没有记下来. 在前台用户先选择一张图片,然后可以预览,再上传,我是这样解决的. 预览: html里面有一个普通的input标签,id:uploadFile <input type="file" id="uploadFile" /> 还有一个可以预览的img标签,这个img现在并没有src属性,id:imgpreview <img width="100" height=&

Asp.Net Web Api 图片上传

public string UploadFile()        {            if (Request.Content.IsMimeMultipartContent())            {                //Save file                MultipartFormDataStreamProvider provider = new MultipartFormDataStreamProvider(HttpContext.Current.Ser

一个简单的安卓+Servlet图片上传例子

例子比较 简单,服务端为Java Web Servlet,doPost方法中接收图片并保存,然后将保存的图片名返回给客户端,关键代码: @SuppressWarnings("deprecation") public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { request.setCharacterEncoding(

从web编辑器 UEditor 中单独提取图片上传,包含多图片单图片上传以及在线涂鸦功能

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.(抄的...) UEditor是非常好用的富文本web编辑器,而且全中文API和注释,方便学习和使用.特别是图片上传查看及涂鸦功能极为喜欢,但是有很多情况我们并不需要Web编辑器,而只需要图片上传.那么问题来了,提取图片上传哪家强..... 网上有很多图片上传的控件.插件.但都不是那么的完美,有的只有一张图片上传不包含批量上传,有的没有图片查看

部署新浪SAE web.py Session及图片上传等问题注意事项

1.以下几条代码解决编码问题 import sysreload(sys)sys.setdefaultencoding('utf-8') 2.图片上传问题 需要开通sina的Storage服务,随便建个什么Domain,注意HTML代码,那个enctype属性一定要写,两个上传图片的控件叫avatar和photo <form action="details" method="post" enctype="multipart/form-data"

Web Service(1):用Web Service实现客户端图片上传到网站

由于项目需要,通过本地客户端,把图片上传到网站.通过webservice. 这是客户端代码: 1 private void btnimg_Click(object sender, EventArgs e) 2 { 3 this.yanzheng(); 4 mylocalhost.MySoapHeader myheader = new mylocalhost.MySoapHeader();///这是soapheader 5 mylocalhost.MyWebService myService =

IOS开发-图片上传

目前IOS端开发,图片上传到服务器分为两种,一种是直接上到服务器,一种是借助第三方储存(减少服务器压力). 一.直接上传到服务器 1 /** 2 * 代码演示 3 */ 4 //*******UIImagePNGRepresentation(UIImage* image) 要比UIImageJPEGRepresentation(UIImage* image, 1.0) 返回的图片数据量大很多,但从视角角度看,图片的质量没有明显的降低,所以在读取图片数据内容时,可以先使用UIImageJPEGRe