关于前端上传文件全面基础扫盲贴(六) ----- 图片上传,旋转,重绘,预览等实战(附DEMO)

摘要：二编辑合成照片使用编辑压缩重设尺寸比例转成输出预览。三保存并上传照片提交数据到服务器需要服务器支持我跳过了。数据主要来自拍摄的照片，多用于移动端开发，端也会用到，此插件兼容主流浏览器，以下不支持。

关于前端上传文件全面基础扫盲贴(零)
关于前端上传文件全面基础扫盲贴(一) ----- XMLHttpRequest
关于前端上传文件全面基础扫盲贴(二) ----- File
关于前端上传文件全面基础扫盲贴(三) ----- FormData
关于前端上传文件全面基础扫盲贴(四) ----- FileReader
关于前端上传文件全面基础扫盲贴(五) ----- H5拖拽事件
关于前端上传文件全面基础扫盲贴(六) ----- 图片上传,旋转,重绘,预览等实战(附DEMO)

距离我上次写的系列文章好像都过了半年了,废话不多说,先来展示一下技术思路

一、获取用户照片数据

获取用户摄像头图片,不是所有手机支持,并且部分手机会有旋转角度的问题；

Input控件获取照片文件。

二、编辑合成照片

使用canvas编辑压缩,重设尺寸比例；

转成base64输出预览。

三、保存并上传照片
提交base64数据到服务器需要服务器支持,我跳过了。

因为一般手机像素都很高,所以把原始图片尺寸限制在300里;

  
    
    
    
    
    
    
    
    
    
    
    
  

  
    

      
      

      
原始图片
      

      
修改图片
      
    

    
  

想要上传图片,就要用type="file"获得文件信息,其中下面几个重要属性,（在pc浏览器打开文件要很久,所以可以选择性屏蔽）

通过监听input变化触发方法

window.onload = function () {
  var dom = document.getElementById("file");
  dom.addEventListener("change", function (e) {});
}

Exif.js 提供了 JavaScript 读取图像的原始数据的功能扩展，例如：拍照方向、相机设备型号、拍摄时间、ISO 感光度、GPS 地理位置等数据。
EXIF 数据主要来自拍摄的照片，多用于移动端开发，PC 端也会用到，此插件兼容主流浏览器，IE10 以下不支持。

为了不让用户等待太久,我们可以在一系列操作之前先展示获取的图片,可以直接从本地先读取出原始数据,然后在页面上展示出来,下面用到的知识点之前已经写过就不再重复了,可以前往浏览文章
关于前端上传文件全面基础扫盲贴(二) ----- File
关于前端上传文件全面基础扫盲贴(四) ----- FileReader

var file = e.target.files[0],
  //旋转角度
  orientation = null,
  fReader = new FileReader();

//限制大小格式
if (!filtration(file)) {
  return false;
}

上面的filtration(file)是我抽离出去的过滤函数

filtration: function(file, extend) {
  var extend = extend || {},
    settings = {
      size: extend.size || 5 * 1024 * 1024,
      reg: extend.reg || /image/w+/
    };

  if (file.size > settings.size || !settings.reg.test(file.type)) {
    alert(extend.msg || ("上传格式非图片类型或上传图片超过" + settings.size / 1024 / 1024 + "M"))
    return false;
  }
  return true;
},

接下来要获取图片信息了,解决部分手机会有旋转角度的问题的前提（可能链接格式问题,生成文章之后没带链接,只能自己复制粘贴访问地址了）
中文文档: http://code.ciaoca.com/javasc...
Demo: http://code.ciaoca.com/javasc...

EXIF.getData(file, function () {
  orientation = EXIF.getTag(this, "Orientation");
  console.log("旋转角度: ", orientation);
});

我们已经拿到原始数据,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.然后新建img对象加载资源

//转码完成
fReader.onload = function (e) {
  //加载图片
  var img = new Image();
  img.src = e.target.result;
  img.onload = function () { }
}

//执行
fReader.readAsDataURL(file);

接着我们使用canvas画布重新设定尺寸重绘达到压缩的功能,我只用到基础使用方法,详情(Canvas API)

var canvas = document.createElement("canvas"),
  ctx = canvas.getContext("2d"),
  nSize = resetSize(this, 300, 300, 1, 600);

canvas.width = nSize.width;
canvas.height = nSize.height;
ctx.drawImage(this, 0, 0, nSize.width, nSize.height);

上面的resetSize是我自定义的一个方法,可以设置高宽比例最大范围值,可能有点繁琐,因为我想控制的功能比较多,中间容易发生冲突,我暂时是后面设置能覆盖前面设置(注意:这里的this是上文的data: URL格式)

resetSize: function(img, width, height, ratio, max) {
  var w = img.naturalWidth,
    h = img.naturalHeight,
    width = width || w,
    height = height || h;

  console.log("图片宽高: ", w, h, "入参: ", width, height, ratio, max);

  if (w != width) w = width;
  if (h != height) h = height;
  if (ratio && w / h != ratio) w = h * ratio;

  //限制最大值范围
  if (max) {
    if (w > max && w >= h) {
      h = Math.ceil(h * max / w);
      w = max;
    } else if (h > max && h >= w) {
      w = Math.ceil(w * max / h);
      h = max;
    }
  }
  console.log("重设宽高: ", w, h);
  return { width: w, height: h }
},

接下来就是比较复杂的图形操作了,只要掌握了中心点位置就还好理解,详情(HTML 5 Canvas 参考手册)
上面拿到的orientation不是真的旋转角度,只是给一个值代表拍摄方向,
最后返回新图片展示的 data URI,这里水比较深,我测试了jpg和png是没问题,但是gif什么的就输出一个静态图,详情(toDataURL)

var canvas = document.createElement("canvas"),
  ctx = canvas.getContext("2d"),
  nSize = picProcess.resetSize(this, 600, 400);

switch (+ orientation) {
  case 3:
    canvas.width = nSize.width;
    canvas.height = nSize.height;
    ctx.rotate(180 * Math.PI / 180);
    ctx.drawImage(this, -nSize.width, -nSize.height, nSize.width, nSize.height);
    break;
  case 6:
    canvas.width = nSize.height;
    canvas.height = nSize.width;
    ctx.rotate(90 * Math.PI / 180);
    ctx.drawImage(this, 0, -nSize.height, nSize.width, nSize.height);
    break;
  case 8:
    canvas.width = nSize.height;
    canvas.height = nSize.width;
    ctx.rotate(270 * Math.PI / 180);
    ctx.drawImage(this, -nSize.width, 0, nSize.width, nSize.height);
    break;
  default:
    canvas.width = nSize.width;
    canvas.height = nSize.height;
    ctx.drawImage(this, 0, 0, nSize.width, nSize.height);
    break;
}

return canvas.toDataURL(file.type, 0.8);

现在回看上面,我们已经实现了获取图片,重绘图片,读取本地图片,剩下就是预览了,我简单实现一个支持id和class的方法,也能判断出img和div智能设置展示方式

preview: function(selector, url) {
  var isId = /^#w+/ig.test(selector),
    isClass = /^.w+/ig.test(selector),
    name = selector.slice(1),
    dom = null;

  //选择器类型
  if (isId) {
    dom = document.getElementById(name);
  } else if (isClass) {
    dom = document.getElementsByClassName(name)[0];
  } else {
    alert("选择器传参不支持!");
    return false;
  }

  //判断类型
  if (dom.nodeName == "IMG") {
    dom.src = url;
  } else {
    dom.style.backgroundImage = "url(" + url + ")";
  };
}

然后我们在监听方法里调用就好了.为了更加直观的看到代码效果,我简单写了一个demo版本,可以直接下载本地运行,不依赖任何环境实战Demo

大家且看且珍惜吧,我可能后续还会研究手势旋转处理之类更加复杂的东西,但也说不好,毕竟还是太懒散了.
循例还是得加上一句,因为都没有很深入测试过,所以肯定会有些隐藏的问题,欢迎大家指出最好还有答案咯