// 母函数
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 下Input系统应用编程实战

    作者:杨源鑫(也是我们的校园代理) 经授权转载于公众号嵌入式开发圈,有些许修改. 什么是input子系统?不管是什么操作系统,都有一个程序用于管理各种输入设备,哪些是输入设备?比如,电脑键盘.鼠标,智 ...

  2. Sense2vec with spaCy and Gensim

    如果你在2015年做过文本分析项目,那么你大概率用的是word2vec模型.Sense2vec是基于word2vec的一个新模型,你可以利用它来获取更详细的.与上下文相关的词向量.本文主要介绍该模型的 ...

  3. Python复习 基础知识

     动态语言:变量类型不固定称之为动态语言 什么是动态语言呢? 可以简单的理解为直接被解释执行的语言称为动态语言. 而需要编译环境将程序转换为其它的编码再执行的语言称为静态语言. 当前静态语言有:jav ...

  4. 从使用os.system)在python命令(重定向标准输入输出

    从使用os.system)在python命令(重定向标准输入输出 python 标准输出stdout stdio os.system通常我可以通过改变sys.stdout的值在python更改标准输出 ...

  5. 纯java config配置Spring MVC实例

    1.首先创建一个Maven工程,项目结构如下: pom.xml添加Spring和servlet依赖,配置如下 <project xmlns="http://maven.apache.o ...

  6. LeetCode: 485 Max Consecutive Ones(easy)

    题目: Given a binary array, find the maximum number of consecutive 1s in this array. Example 1: Input: ...

  7. 算法学习--Day4

    今天写了两章题目,仍然是比较基础的内容.感觉时间好紧张,怕来不及,所以以后要加快速度了. 今天写的最多的是查找类题目,关键是二分查找的掌握. 题目描述 输入一个数n,然后输入n个数值各不相同,再输入一 ...

  8. CodeForces 586D【BFS】

    题意: s是这个人开始位置:连续相同大写字母是 Each of the k trains,相应的火车具有相应的字母: '.' 代表空: 有个人在最左列,上面有连续字母代表的火车,火车从左边出去的话,会 ...

  9. js对象 数组Array详解 (参照MDN官网:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find)

    一:数组的创建方式: 1.采用直接量创建 var arr = [];//创建一个空数组 var arr2 = [1,2,3];//创建一个有三个元素的数组 2.采用构造函数创建 a.var arr1 ...

  10. perl 操作文件指针

    之前使用perl 脚本写了一个读取文件的小工具,但是由于当时使用的Tie 的方式,在处理大文件时,效率并不十分理想,所以在网上搜索了perl 如何操作文件指针的文章,自己也学习一下,本博客就是学习过程 ...