base64转blob对象
/** 将base64转换为文件对象
* @param {String} base64 base64字符串
* */
var convertBase64ToBlob = function(base64){
var base64Arr = base64.split(',');
var imgtype = '';
var base64String = '';
if(base64Arr.length > 1){
//如果是图片base64,去掉头信息
base64String = base64Arr[1];
imgtype = base64Arr[0].substring(base64Arr[0].indexOf(':')+1,base64Arr[0].indexOf(';'));
}
// 将base64解码
var bytes = atob(base64String);
//var bytes = base64;
var bytesCode = new ArrayBuffer(bytes.length);
// 转换为类型化数组
var byteArray = new Uint8Array(bytesCode); // 将base64转换为ascii码
for (var i = 0; i < bytes.length; i++) {
byteArray[i] = bytes.charCodeAt(i);
} // 生成Blob对象(文件对象)
return new Blob( [bytesCode] , {type : imgtype});
};
压缩图片
/** 压缩图片
* @param {Object} file 上传对象files[0]
* @param {Object} options 压缩设置对象
* @param {Function} callback 回调函数
* @result {Object} 返回blob文件对象
* */
var compressImg = function(file,options,callback){
var self = this;
var imgname = file.name;
var imgtype = (imgname.substring(imgname.lastIndexOf('.') + 1)).toLowerCase();
if(imgtype == 'jpg' || imgtype == 'jpeg'){
imgtype = 'image/jpeg';
}else{
imgtype = 'image/png';
}
// 用FileReader读取文件
var reader = new FileReader();
// 将图片读取为base64
reader.readAsDataURL(file);
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, 0, 0, that.width, that.height); // 压缩到指定体积以下(M)
if(options.size){
var scale = 0.9;
(function f(scale){
if(base64.length / 1024 / 1024 > options.size && scale > 0){
base64 = canvas.toDataURL(imgtype, scale);
scale = scale - 0.1;
f(scale);
}else{
callback(base64); }
})(scale);
} else if(options.scale){
// 按比率压缩
base64 = canvas.toDataURL(imgtype, options.scale);
callback(base64);
} }
}
};
图片预览
/**
* 图片预览
* @param {Object} $fileInput 文件上传file
* @param {Object} $previewImg 预览图片的image元素
*/
function previewImg($fileInput, $previewImg) {
$fileInput.onchange = function ($event) {
var $target = $event.target;
if ($target.files && $target.files[0]) {
var reader = new FileReader();
reader.onload = function(evt){
$previewImg.src = evt.target.result;
}
reader.readAsDataURL($target.files[0]);
}
}
}
详细图片预览可参考地址:《搞清Image加载事件(onload)、加载状态(complete)后,实现图片的本地预览,并自适应于父元素内(完成)》
图片旋转到正确的角度(验证可行)
/**
* 将图片旋转到正确的角度
* (解决移动端上传的图片角度不正确的问题)
* (旋转后返回的是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[0]) {
// 获取图片旋转角度
getOrientation($target.files[0], function (orientation) {
var reader = new FileReader();
reader.readAsDataURL($target.files[0]);
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(0, false) != 0xFFD8) return callback(-2);
var length = view.byteLength, offset = 2;
while (offset < length) {
var marker = view.getUint16(offset, false);
offset += 2;
if (marker == 0xFFE1) {
if (view.getUint32(offset += 2, false) != 0x45786966) return callback(-1);
var little = view.getUint16(offset += 6, false) == 0x4949;
offset += view.getUint32(offset + 4, little);
var tags = view.getUint16(offset, little);
offset += 2;
for (var i = 0; i < tags; i++)
if (view.getUint16(offset + (i * 12), little) == 0x0112)
return callback(view.getUint16(offset + (i * 12) + 8, little));
}
else if ((marker & 0xFF00) != 0xFF00) break;
else offset += view.getUint16(offset, false);
}
return callback(-1);
};
}
// 将图片旋转到正确的角度
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 ([5,6,7,8].indexOf(srcOrientation) > -1) {
canvas.width = height;
canvas.height = width;
} else {
canvas.width = width;
canvas.height = height;
}
// transform context before drawing image
switch (srcOrientation) {
case 2: ctx.transform(-1, 0, 0, 1, width, 0); break;
case 3: ctx.transform(-1, 0, 0, -1, width, height ); break;
case 4: ctx.transform(1, 0, 0, -1, 0, height ); break;
case 5: ctx.transform(0, 1, 1, 0, 0, 0); break;
case 6: ctx.transform(0, 1, -1, 0, height , 0); break;
case 7: ctx.transform(0, -1, -1, 0, height , width); break;
case 8: ctx.transform(0, -1, 1, 0, 0, width); break;
default: ctx.transform(1, 0, 0, 1, 0, 0);
}
// draw image
ctx.drawImage(img, 0, 0);
// export base64
callback(canvas.toDataURL('image/jpeg'));
};
img.src = srcBase64;
};
参考地址:
file上传图片,base64转换、压缩图片、预览图片、将图片旋转到正确的角度
H5图片压缩与上传
Accessing JPEG EXIF rotation data in JavaScript on the client side
JS实现图片base64转blob对象,压缩图片,预览图片,图片旋转到正确角度的更多相关文章
-
html + js 实现图片上传,压缩,预览及图片压缩后得到Blob对象继续上传问题
先上效果 上传图片后(设置了最多上传3张图片,三张后上传按钮消失) 点击图片放大,可以使用删除和旋转按钮 (旋转功能主要是因为ios手机拍照后上传会有写图片被自动旋转,通过旋转功能可以调正) html ...
-
小程序 canvas实现图片预览,图片保存
wxml 代码: <view class="result-page"> <canvas bindtap="previewImage" canv ...
-
移动端 H5 拍照 从手机选择图片,移动端预览,图片压缩,图片预览,再上传服务器
前言:最近公司的项目在做全网营销,要做非微信浏览器的wap 站 的改版,其中涉及到的一点技术就是采用H5 选择手机相册中的图片,或者拍照,再将获取的图片进行压缩之后上传. 这个功能模块主要有这5点比较 ...
-
小程序实现图片上传,预览以及图片base64位处理
最近一段时间在做小程序项目,第一期功也完工了.需要好好总结一下经验,把项目中遇到的问题好好总结一下,遇到的问题,踩过的坑.今天写一个小程序实现图片上传,预览,以及删除,图片base64位处理.下面就是 ...
-
js实现单张图片(或者多张)的预览功能
这个是预览单张图片的,如果要预览多张图片,改下面红色标记的地方就好了 <html> <head> <meta http-equiv="Content-Typ ...
-
Thinkphp5+plupload图片上传功能,支持实时预览图片。
今天和大家分享一个国外的图片上传插件,这个插件支持分片上传大文件.其中著名的七牛云平台的jssdk就使用了puupload插件,可见这个插件还是相当牛叉的. 这个插件不仅仅支持图片上传,还支持大多数文 ...
-
基于HTML5的可预览多图片Ajax上传
一.关于图片上传什么什么的 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如f ...
-
File控件选择图片的时候在Html5下马上预览
页面HTML <div> <img src="@pic.Path" id="img" style="width:200px;heig ...
-
HTML5可预览多图片ajax上传(使用formData传递数据)
HTML5可预览多图片ajax上传(使用formData传递数据) 在介绍上传图片之前,我们简单的来了解下FormData的基本使用:介绍完成后这些基本知识后,我们会在文章最后提供一个demo,就是a ...
随机推荐
-
C# 返回Foreach集合
IEnumerable<DataRow> DetailRows() { foreach (DataRow dr in EditData.Tables[tb_ ...
-
由浅入深了解Thrift之服务模型和序列化机制
一.Thrift介绍 Thrift是一个软件框架,用来进行可扩展且跨语言的服务的开发.它结合了功能强大的软件堆栈和代码生成引擎.其允许你定义一个简单的定义文件中的数据类型和服务接口.以作为输入文件,编 ...
-
OPENCV图像变换-2
一.经典霍夫变换 霍夫变换是图像处理中的一种特征提取技术,该方法通过在一个参数空间中通过计算累计结果的局部最大值来得到一个符合该特定形状的集合,作为结果. 运用两个坐标空间之间的变换,将一个空间中具有 ...
-
JiaThis分享
<!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <meta ...
-
javascript、ruby和C性能一瞥(3) :上汇编
在博文(1)和(2)里分别用了4中方式写一个素数筛选的算法,分别是javascript in browser.node.js.ruby和c:最终的结果是c最快,node.js其次,js in b虽然也 ...
-
Jmeter简单回顾
之前公众号推文一上手就分享如何测接口, 其实忽略了一些概念性的东西, 今天来给大家拾遗补缺, 做个回顾吧. 一. JMeter介绍 jmeter能做什么,来自官网的解释: Ability to loa ...
-
整理+学习《骆昊-Java面试题全集(上)》
★可以关注微信公众号,了解更多技术和行业信息 2013年年底的时候,我看到了网上流传的一个叫做<Java面试题大全>的东西,认真的阅读了以后发现里面的很多题目是重复且没有价值的题目,还有不 ...
-
certificate expired
最近在测试802.1x,测试过程中,radius服务器端一直显示如下错误: (5) authenticate {(5) eap: Expiring EAP session with state 0 ...
-
python-计算器实现
# 开发一个简单的python计算器# 实现加减乘除及括号优先级解析# 用户输入 1 - 2 * ( (60-30 +(-40/5) * (9-2*5/3 + 7 /3*99/4*2998 +10 * ...
-
Multi-Dimensional Recurrent Neural Networks
Multi-Dimensional Recurrent Neural Networks The basic idea of MDRNNs is to replace the single recurr ...