/**
* 将base64转换为文件对象
* (即用文件上传输入框上传文件得到的对象)
* @param {String} base64 base64字符串
*/
function convertBase64UrlToBlob(base64){
var base64Arr = base64.split(',');
if(base64Arr.length > ){
//如果是图片base64,去掉头信息
base64 = base64Arr[];
}
// 将base64解码
var bytes = atob(base64);
var bytesCode = new ArrayBuffer(bytes.length);
// 将base64转换为ascii码
for (var i = ; i < bytes.length; i++) {
bytesCode[i] = bytes.charCodeAt(i);
}
// 转换为类型化数组
var byteArray = new Uint8Array(bytesCode);
// 生成Blob对象(文件对象)
return new Blob( [byteArray] , {type : 'image/png'});
}
/**
* 压缩图片
* (压缩后返回的是base64,可以参照本目录下的convertBase64ToBlob.js,将base64还原为file input读取得到的文件对象)
* @param {Dom Object} $fileInput 文件上传输入框
* @param {Function} callback 压缩完成后的回调函数
* @return {Object} options 指定压缩到指定体积以下或按比率压缩,不指定不会压缩
*/
function compressImg($fileInput, callback, options) {
options = options || {};
// 绑定change事件
$fileInput.onchange = function ($event) {
var $target = $event.target;
if ($target.files && $target.files[]) {
// 用FileReader读取文件
var reader = new FileReader();
// 将图片读取为base64
reader.readAsDataURL($fileInput.files[]);
reader.onload = function(evt){
var base64 = evt.target.result;
// 创建图片对象
var img = new Image();
// 用图片对象加载读入的base64
img.src = base64;
img.onload = function () {
var that = this,
canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');
canvas.setAttribute('width', that.width);
canvas.setAttribute('height', that.height);
// 将图片画入canvas
ctx.drawImage(that, , , that.width, that.height);
// 压缩到指定体积以下(M)
if(options.size){
var scale = 0.9;
while (base64.length / / > options.size) {
// 用canvas的toDataURL方法实现压缩
base64 = canvas.toDataURL('image/jpeg', scale);
// 降低压缩比率,直到压缩结果小于指定大小
scale = scale - 0.1;
}
} else if(options.scale){
// 按比率压缩
base64 = canvas.toDataURL('image/jpeg', options.scale);
}
callback(base64);
}
}
}
}
}
/**
* 上传之前预览图片
* @param {Dom Object} $fileInput 文件上传输入框
* @param {Dom Object} $previewImg 预览图片的image元素
*/
function previewImg($fileInput, $previewImg) {
$fileInput.onchange = function ($event) {
var $target = $event.target;
if ($target.files && $target.files[]) {
var reader = new FileReader();
reader.readAsDataURL($target.files[]);
reader.onload = function(evt){
var base64 = evt.target.result;
$previewImg.setAttribute('src', base64);
}
}
}
}
/**
* 将图片旋转到正确的角度
* (解决移动端上传的图片角度不正确的问题)
* (旋转后返回的是base64,可以参照本目录下的convertBase64ToBlob.js,将base64还原为file input读取得到的文件对象)
* @param {Dom Object} $fileInput 文件上传输入框
* @param {Function} callback 旋转完成后的回调函数
*/
function resetImgOrientation($fileInput, callback) {
// 绑定change事件
$fileInput.onchange = function ($event) {
var $target = $event.target;
if ($target.files && $target.files[]) {
// 获取图片旋转角度
getOrientation($target.files[], function (orientation) {
var reader = new FileReader();
reader.readAsDataURL($target.files[]);
reader.onload = function(evt){
var base64 = evt.target.result;
// 将图片旋转到正确的角度
resetOrientation(base64, orientation, function (resultBase64) {
callback(resultBase64);
});
}
});
}
}
} // 获取图片旋转的角度
function getOrientation(file, callback) {
var reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function(e) {
var view = new DataView(e.target.result);
if (view.getUint16(, false) != 0xFFD8) return callback(-);
var length = view.byteLength, offset = ;
while (offset < length) {
var marker = view.getUint16(offset, false);
offset += ;
if (marker == 0xFFE1) {
if (view.getUint32(offset += , false) != 0x45786966) return callback(-);
var little = view.getUint16(offset += , false) == 0x4949;
offset += view.getUint32(offset + , little);
var tags = view.getUint16(offset, little);
offset += ;
for (var i = ; i < tags; i++)
if (view.getUint16(offset + (i * ), little) == 0x0112)
return callback(view.getUint16(offset + (i * ) + , little));
}
else if ((marker & 0xFF00) != 0xFF00) break;
else offset += view.getUint16(offset, false);
}
return callback(-);
};
}
// 将图片旋转到正确的角度
function resetOrientation(srcBase64, srcOrientation, callback) {
var img = new Image();
img.onload = function() {
var width = img.width,
height = img.height,
canvas = document.createElement('canvas'),
ctx = canvas.getContext("2d");
// set proper canvas dimensions before transform & export
if ([,,,].indexOf(srcOrientation) > -) {
canvas.width = height;
canvas.height = width;
} else {
canvas.width = width;
canvas.height = height;
}
// transform context before drawing image
switch (srcOrientation) {
case : ctx.transform(-, , , , width, ); break;
case : ctx.transform(-, , , -, width, height ); break;
case : ctx.transform(, , , -, , height ); break;
case : ctx.transform(, , , , , ); break;
case : ctx.transform(, , -, , height , ); break;
case : ctx.transform(, -, -, , height , width); break;
case : ctx.transform(, -, , , , width); break;
default: ctx.transform(, , , , , );
}
// draw image
ctx.drawImage(img, , );
// export base64
callback(canvas.toDataURL('image/jpeg'));
};
img.src = srcBase64;
};

file上传图片,base64转换、压缩图片、预览图片、将图片旋转到正确的角度的更多相关文章

  1. WPF图片预览之移动、旋转、缩放

    原文:WPF图片预览之移动.旋转.缩放 RT,这个功能比较常见,但凡涉及到图片预览的都跑不了,在说自己的实现方式前,介绍一个好用的控件:Extended.Toolkit中的Zoombox,感兴趣的同学 ...

  2. Java带图片预览功能的图片上传兼容火狐ie

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. js实现移动端图片预览:手势缩放, 手势拖动,双击放大...

    .katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...

  4. vue常用插件之图片预览

    v-viewer(1.4.2) 非常实用的图片预览插件,支持旋转.缩放.翻转等操作 一.npm安装 npm i v-viewer -S 二.全局引入(main.js中) import 'viewerj ...

  5. Wx-小程序-图片预览、保存

    点击图片预览 长按图片保存 点击按钮保存到手机相册 view: <!--wxml--> <text>点击图片预览.长按保存图片.点击按钮保存到系统相册</text> ...

  6. jquery解决file上传图片+图片预览

    js解决file上传图片+图片预览 demo案例中代码为js原生控制,可以根据项目的需求修改为jquery操作 <!DOCTYPE html><html lang="en& ...

  7. 一段上传图片预览JS脚本,Input file图片预览的实现

    在深圳做项目的时候,需要一个用户上传头像预览的功能!是在网上找了好多,都不太满意.要么是flash的,要么是Ajax上传后返回图片路径的,要么压根就是不能用的.幸运的是在这个项目以前有人写过一个图片预 ...

  8. html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6+及标准浏览器

    以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...

  9. H5图片预览、压缩、上传

    目标实现: 1.选择图片, 前端预览效果 2.图片大于1.2M的时候, 对图片进行压缩 3.以表单的形式上传图片 4.图片删除 预览效果图: 代码说明: 1.input:file选择图片 <!- ...

随机推荐

  1. PHP删除当前目录及其目录下的所有文件

    使用PHP遍历一个目录下的所有目录及文件,并删除该目录及其目录下的所有子目录和文件,本次代码通过递归的方式来实现. 用到的函数: scandir($path) 遍历一个目录下所有文件并返回数组. un ...

  2. MySQL结构

    MySQL属于关系型数据库管理系统(RDBMS),使用RDBMS时,最常见的系统结构就是客户端/服务器类型(C/S类型)这种结构. 服务器指的是用来接收其他程序发出的请求,并对该请求进行相应处理的程序 ...

  3. 使用本地缓存快还是使用redis缓存好?

    使用本地缓存快还是使用redis缓存好? Redis早已家喻户晓,其性能自不必多说. 但是总有些时候,我们想把性能再提升一点,想着redis是个远程服务,性能也许不够,于是想用本地缓存试试!想法是不错 ...

  4. shell脚本中if的“-e,-d,-f”

    文件表达式-e filename 如果 filename存在,则为真-d filename 如果 filename为目录,则为真 -f filename 如果 filename为常规文件,则为真-L ...

  5. IT老人,给后辈的十一点建议

    我已经在IT业打拼9年了,从完全自学成为技术团队leader到PM也确实总结了不少的经验,自己也经常跟学弟学妹聊天,分享职场经验,当老家有人报考计算机或者从事相关工作时也会咨询我的意见,我很明白IT人 ...

  6. asp.net core mvc上传大文件解决方案

    默认上传文件大小不超过30M 第一个问题: IIS 10.0 详细错误 - 404.13 - Not Found 请求筛选模块被配置为拒绝超过请求内容长度的请求. 服务器上的请求筛选被配置为拒绝该请求 ...

  7. yii学习笔记--url解析

    在通过yiic命令生成了一个app之后,我们通过浏览器访问会看到这样的一个页面.   点击home时,url为:http://localhost/blog/index.php?r=site/index ...

  8. Java并发编程-再谈 AbstractQueuedSynchronizer 1 :独占模式

    关于AbstractQueuedSynchronizer JDK1.5之后引入了并发包java.util.concurrent,大大提高了Java程序的并发性能.关于java.util.concurr ...

  9. [机器学习]回归--Decision Tree Regression

    CART决策树又称分类回归树,当数据集的因变量为连续性数值时,该树算法就是一个回归树,可以用叶节点观察的均值作为预测值:当数据集的因变量为离散型数值时,该树算法就是一个分类树,可以很好的解决分类问题. ...

  10. Python从入门到精通系列文章总目录

    Python最新全套课程(8月中旬开的课),共四个月.所有课件,项目源码,课后习题和答案都包括在内. 包括:Python实战项目引入.Python基础.爬虫基础.爬虫库.Scrapy爬虫框架.动态页面 ...