// 母函数
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移动端 拍照上传,相册图片压缩上传等,

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

基于H5+ API手机相册图片压缩上传的更多相关文章

  1. 基于vue + axios + lrz.js 微信端图片压缩上传

    业务场景 微信端项目是基于Vux + Axios构建的,关于图片上传的业务场景有以下几点需求: 1.单张图片上传(如个人头像,实名认证等业务) 2.多张图片上传(如某类工单记录) 3.上传图片时期望能 ...

  2. 三款不错的图片压缩上传插件(webuploader+localResizeIMG4+LUploader)

    涉及到网页图片的交互,少不了图片的压缩上传,相关的插件有很多,相信大家都有用过,这里我就推荐三款,至于好处就仁者见仁喽: 1.名气最高的WebUploader,由Baidu FEX 团队开发,以H5为 ...

  3. Html5+asp.net mvc 图片压缩上传

    在做图片上传时,大图片如果没有压缩直接上传时间会非常长,因为有的图片太大,传到服务器上再压缩太慢了,而且损耗流量. 思路是将图片抽样显示在canvas上,然后用通过canvas.toDataURL方法 ...

  4. 纯原生js移动端图片压缩上传插件

    前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜. 结果呢,呵呵...诶~又全是基于 ...

  5. 分享图片压缩上传demo,可以选择一张或多张图片也可以拍摄照片

    2016-08-05更新: 下方的代码是比较OLD的了,是通过js进行图片的剪切 旋转 再生成,效率较低. 后来又整合了一个利用native.js本地接口的压缩代码 ,链接在这 .页面中有详细的说明, ...

  6. js 图片压缩上传(base64位)以及上传类型分类

    一.input file上传类型 1.指明只需要图片 <input type="file" accept='image/*'> 2.指明需要多张图片 <input ...

  7. springMVC多图片压缩上传的实现

    首先需要在配置文件中添加配置: <!--配置文件的视图解析器,用于文件上传,其中ID是固定的:multipartResolver--> <bean id="multipar ...

  8. Vue directive自定义指令+canvas实现H5图片压缩上传-Base64格式

    前言 最近优化项目-手机拍照图片太大,回显速度比较慢,使用了vue的自定义指令实现H5压缩上传base64格式的图片 canvas自定义指令 Vue.directive("canvas&qu ...

  9. 深入研究HTML5实现图片压缩上传

    上篇文章中提到移动端上传图片,我们知道现在流量还是挺贵的,手机的像素是越来越高,拍个照动不动就是好几M,伤不起.虽然客户端可以轻轻松松实现图片压缩再上传,但是我们的应用还可能在浏览器里面打开,怎么办呢 ...

随机推荐

  1. Oracle数据库当前连接数、最大连接数的查询与设置

    在开发过程中Oracle数据库有时候连得上,有时候又连不上,提示如下异常“ORA-12519: TNS:no appropriate service handler found 解决”,可能是数据库上 ...

  2. ETL 循环导入 平面文件

    http://blog.csdn.net/zlp321002/article/details/3413365 ETL设计之-Foreach 循环容器 应用场景: 批量导入某一文件夹下的所有文件.就可以 ...

  3. SQL2005恢复只有mdf文件的数据库

    我把原来的数据库分离后,直接把日志文件给干掉了.原来在SQL 2000里经常这么干,只用一个mdf就附加了.没想到sql2005居然不行.我试验了一圈 终于找到一个成功的方法.转载,供后来者参考. S ...

  4. CodeForces - 377A Maze BFS逆思维

    Maze Pavel loves grid mazes. A grid maze is an n × m rectangle maze where each cell is either empty, ...

  5. Python3.6 字典的内置方法

    1.dict.clear(self) 删除字典内所有元素 2.dict.copy(self) 返回一个字典的浅复制,拷贝父对象,不会拷贝对象的内部的子对象 3.dict.fromkeys(self,  ...

  6. C#中的explicit和implicit了解一下吧

    今天在研究公司项目框架的时候看到了下面的用法,public static implicit operator JsonData(int data);.貌似很久没用过这种隐式转换的写法了,因此重新温习一 ...

  7. React 从入门到进阶之路(七)

    之前的文章我们介绍了 React 表单详解 约束性和非约束性组件 input text checkbox radio  select  textarea  以及获取表单的内容.接下来我们将介绍 Rea ...

  8. 学习RadonDB源码(二)

    1. 为我新的一天没有放弃而喝彩 学习是一件很容易放弃的事情,因为就算是不学,我也能在现在的岗位上发光发热.可是人不就是一个热爱折腾的种群吗? 今天没有放弃不代表明天没有放弃,也许放弃的可能性大于坚持 ...

  9. C++设计模式之工厂方法模式

    来自:http://blog.csdn.net/pangshaohua/article/details/38912555 参考写的一个工厂demo 1.定义"背景风格的抽象类".& ...

  10. CodeForces599D【数学】

    题意: 给出一个x,求有多少个矩阵中满足存在x个不同的正方形. 思路: (数学渣+推理渣) #include<bits/stdc++.h> using namespace std; typ ...