您的位置:首页 > Web前端 > HTML5

基于H5+ API手机相册图片压缩上传

2015-08-31 16:19 603 查看
// 母函数
function App(){}
/**
* 图片压缩,默认同比例压缩
* @param {Object} path
*         pc端传入的路径可以为相对路径,但是在移动端上必须传入的路径是照相图片储存的绝对路径
* @param {Object} obj
*         obj 对象 有 width, height, quality(0-1)
* @param {Object} callback
*         回调函数有一个参数,base64的字符串数据
*/
App.prototype.dealImage = function(path, obj, callback) {
var img = new Image();
img.src = path;
img.onload = function() {
var that = this;
// 默认按比例压缩
var w = that.width,
h = that.height,
scale = w / h;
w = obj.width || w;
h = obj.height || (w / scale);
var quality = 0.7; // 默认图片质量为0.7

//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');

// 创建属性节点
var anw = document.createAttribute("width");
anw.nodeValue = w;
var anh = document.createAttribute("height");
anh.nodeValue = h;
canvas.setAttributeNode(anw);
canvas.setAttributeNode(anh);

ctx.drawImage(that, 0, 0, w, h);
// 图像质量
if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
quality = obj.quality;
}
// quality值越小,所绘制出的图像越模糊
var base64 = canvas.toDataURL('image/jpeg', quality);
// 回调函数返回base64的值
callback(base64);
}
}

/**
* 获取图片后处理回调处理数据
* @param {Object} delobj
*         需要处理的对象参数
* @param {Object} cb
*         回调函数返回需要处理的数据,包括源文件大小,处理后的文件大小,文件名
*/
App.prototype.delPhotoMsg = function (delobj, cb){
var camera = plus.camera.getCamera();
var res = camera.supportedImageResolutions[0];
var fmt = camera.supportedImageFormats[0];
var _this = this;
var fileObj = {
origin : {},
now : {}
};         // 回调对象接口
// 获取摄像头进行拍照
camera.captureImage(function(path) {
plus.io.requestFileSystem(plus.io.PRIVATE_WWW, function(fs){
fs.root.getFile(path, {create: true}, function(fileEntry){
fileEntry.file(function(file){
//                    console.log("原始文件大小:" + file.size / 1024 +"KB   filename:"+file.name);
origin(file.size, file.name);
})
})
})

function origin(filesize, filename){
// 移动端图片压缩处理
plus.io.resolveLocalFileSystemURL(path, function(entry) {
var local = entry.toLocalURL();        // 获取本地地址
// 图片压缩处理
_this.dealImage(local, delobj, function(base) {
fileObj.now.base64Char = base;
fileObj.now.base64Length = base.length;
fileObj.now.fileSize = (base.length / 1024).toFixed(2) + "KB";
fileObj.origin.fileSize = (filesize / 1024).toFixed(2) + "KB";
fileObj.origin.filePath = local;
fileObj.fileName = filename;
cb(fileObj);
})
})
}
}, function(err) {
console.log("获取相片错误:" + err.message);
}, {
resolution: res,
format: fmt
})
}

/**
*
* @param {Object} del
*         需要直接处理的参数对象
*             例如: "{width : 100, height: 100, quality : 0.5}"
*                 默认处理按比例处理,只要设置width或height,quality默认0.7
* @param {Object} options
*         图片处理的属性  处理文件格式 multiple 选择多张文件进行批量处理
*             例如:{filter : "image", multiple : true}
* @param {Object} callback
*         回调函数返回相应的参数
*             返回对象数组,包括原始文件大小等内容
*             例如:obj[0].origin.fileSize, obj[0].now.fileSize,obj[0].now.filePath等
*/
App.prototype.delGalleryImg = function (del, options, callback){
var _this = this;
var fileObj = {
now : {},
origin : {}
}
plus.gallery.pick(function(eve){
if(options.multiple){
delmultiple(eve);        // 多张照片处理回调函数
} else {
delsingle(eve);        // 单张图片处理回调函数
}
},function(err){
console.log(err.message)
}, {
filter : options.filter || "image",
multiple : options.multiple || false
})

// 处理多张图片
function delmultiple(eve){
for(var i = 0, len = eve.files.length; i < len; i++){
//            console.log(i +" : "+ eve.files[i])
(function(i, len){        // 因为此处为异步操作,需要自动执行函数传入index的值到函数中进行自动执行
retValue(eve.files[i], function(filepro){
//                    console.log(JSON.stringify(filepro))
inner(i, len, filepro);
})

})(i, len)
}

var cbobj = [];            // 暂存json字符串话的字符数组
function inner(index, len, result){
//            console.log(index +"  "+ JSON.stringify(result));
cbobj.push(JSON.stringify(result));                    // 此处如果直接将对象push到数值中,会存在相同的对象元素(不知为什么),所以进行了一个
if(cbobj.length == len){
var tempobj = [];        // 解析字符串 后回调该对象数组
for(var i = 0; i < len; i++){    // 遍历所有的文件进行字符串解析
var obj = JSON.parse(cbobj[i])
tempobj[i] = obj;
}
callback(tempobj);        // 回调数组对象
}
}
}
// 处理单张图片
function delsingle(path){
// 调用内部函数回调函数进行外部单一图片选择处理属性回调
retValue(path, function(filepro){
callback(filepro);
});
}

function retValue(path, cb){
plus.io.requestFileSystem(plus.io.PRIVATE_WWW, function(fs){
fs.root.getFile(path, {create: true}, function(fileEntry){
fileEntry.file(function(file){
//                    console.log("原始文件大小:" + file.size / 1024 +"KB   filename:"+file.name);
origin(file.size, file.name);
})
})
})
// 回调函数
function origin(filesize, filename){
// 移动端图片压缩处理
plus.io.resolveLocalFileSystemURL(path, function(entry) {
var local = entry.toLocalURL();        // 获取本地地址
// 图片压缩处理
_this.dealImage(local, del, function(base) {
fileObj.now.base64Char = base;
fileObj.now.base64Length = base.length;
fileObj.now.fileSize = (base.length / 1024).toFixed(2) + "KB";
fileObj.origin.fileSize = (filesize / 1024).toFixed(2) + "KB";
fileObj.origin.filePath = local;
fileObj.fileName = filename;
cb(fileObj);
})
})
}
}

}


本例子是基于HBuilder开发,当遇到APP移动端 拍照上传,相册图片压缩上传等,

  不喜勿喷,希望有这方面学习的朋友多指点。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: