系列文章
关于前端上传文件全面基础扫盲贴(零)
关于前端上传文件全面基础扫盲贴(一) ----- XMLHttpRequest
关于前端上传文件全面基础扫盲贴(二) ----- File
关于前端上传文件全面基础扫盲贴(三) ----- FormData
关于前端上传文件全面基础扫盲贴(四) ----- FileReader
关于前端上传文件全面基础扫盲贴(五) ----- H5拖拽事件
关于前端上传文件全面基础扫盲贴(六) ----- 图片上传,旋转,重绘,预览等实战(附DEMO)
图片上传,旋转,重绘,预览等实战
距离我上次写的系列文章好像都过了半年了,废话不多说,先来展示一下技术思路
一、获取用户照片数据
- 获取用户摄像头图片,不是所有手机支持,并且部分手机会有旋转角度的问题；
- Input控件获取照片文件。
二、编辑合成照片
- 使用canvas编辑压缩,重设尺寸比例；
- 转成base64输出预览。
三、保存并上传照片
提交base64数据到服务器需要服务器支持,我跳过了。
基本结构
因为一般手机像素都很高,所以把原始图片尺寸限制在300里;
原始图片
![]()
修改图片
![]()
想要上传图片,就要用type="file"获得文件信息,其中下面几个重要属性,（在pc浏览器打开文件要很久,所以可以选择性屏蔽）
| 属性 | 描述 |
|---|---|
| accept | 表示可以选择的文件MIME类型，多个MIME类型用英文逗号分开 |
| multiple | 是否可以选择多个文件，多个文件时其value值为第一个文件的虚拟路径 |
| capture | 表示，可以捕获到系统默认的设备，比如：camera--照相机；camcorder--摄像机；microphone--录音 |
通过监听input变化触发方法
window.onload = function () {
var dom = document.getElementById('file');
dom.addEventListener('change', function (e) {});
}Exif.js
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
大家且看且珍惜吧,我可能后续还会研究手势旋转处理之类更加复杂的东西,但也说不好,毕竟还是太懒散了.
循例还是得加上一句,因为都没有很深入测试过,所以肯定会有些隐藏的问题,欢迎大家指出最好还有答案咯