// 母函数
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. Linux 终端显示 Git 当前所在分支

    function git_branch { branch="`git branch 2>/dev/null | grep "^\*" | sed -e " ...

  2. 创建calico网络报错client response is invalid json

    使用docker创建calico网络失败. # docker network create --driver calico --ipam-driver calico-ipam testcalico E ...

  3. NLP | 自然语言处理 - 语言模型(Language Modeling)

    转:http://blog.csdn.net/lanxu_yy/article/details/29918015 为什么需要语言模型? 想象“语音识别”这样的场景,机器通过一定的算法将语音转换为文字, ...

  4. 类似懒加载的js功能

    <!-- 显示15条数据 --> <ul class="list" pagesize="15"> <li> <div ...

  5. ubuntu--vim 技巧

    本文介绍了vi (vim)的基本使用方法,但对于普通用户来说基本上够了! vi编辑器是所有Unix及Linux系统下标准的编 辑器,它的强大不逊色于任何最新的文本编辑器,这里只是简单地介绍一下它的用法 ...

  6. vim opencv

    http://blog.csdn.net/fdl19881/article/details/7275203 ctags .vim: http://www.vim.org/scripts/script. ...

  7. 一道关于chm设计ctf钓鱼的一些思考

    版权声明:本文为博主的原创文章,未经博主同意不得转载 题目:flag就是文件指向的地址 文件: 作为一名web狗的出题人,这道ctf有点意思不是在于因为它难,而是相对于一些代码审计以及一些杂项题来说, ...

  8. jquery登录的异步验证

    //定义一个json var validate = { username : false, pwd : false, pwded : false, verify : false, loginUsern ...

  9. Linux which 查找命令

    在学习 兄弟连 linux教学视频 的时候,我将所学的 linux 命令记录在我的博客中,方便自己查阅. 权限管理命令: which 基础的命令 命令名称:which 命令的所在路径:/usr/bin ...

  10. SpringCloud之旅第一篇-微服务概念

    一.单体架构的问题 微服务为什么会出现?在学习Springboot的时候知道Springboot极大的简化了我们的开发,我们可以快速的进行业务开发,Springboot单体应用在项目的开发初期能够满足 ...