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

// 母函数
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, , , w, h);
// 图像质量
if (obj.quality && obj.quality <= && obj.quality > ) {
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[];
var fmt = camera.supportedImageFormats[];
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 / ).toFixed() + "KB";
fileObj.origin.fileSize = (filesize / ).toFixed() + "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 = , 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 = ; 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 / ).toFixed() + "KB";
fileObj.origin.fileSize = (filesize / ).toFixed() + "KB";
fileObj.origin.filePath = local;
fileObj.fileName = filename;
cb(fileObj);
})
})
}
} }

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

  不喜勿喷,希望有这方面学习的朋友多指点。

上一篇:javascript系列之核心知识点(一)


下一篇:js 图片压缩上传(base64位)以及上传类型分类