基于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, 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移动端 拍照上传,相册图片压缩上传等,

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

时间: 2024-11-10 00:42:00

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

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

在做图片上传时,大图片如果没有压缩直接上传时间会非常长,因为有的图片太大,传到服务器上再压缩太慢了,而且损耗流量. 思路是将图片抽样显示在canvas上,然后用通过canvas.toDataURL方法得到base64字符串来实现压缩. 废话不多少不多说直接看代码: 本次测试使用了 zepto.min.js 插件,更新版本的下载请点击这里 主要js代码: //图片压缩处理 ; (function () { /** * 加载的时候进行抽样检测 * 在iOS中,大于2M的图片会抽样渲染 */ func

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

前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜. 结果呢,呵呵...诶~又全是基于jquery.zepto的(这句话似乎吐槽次数太多了...),然后我也就不吐槽了, 然后当然是自己做了,先上图: 纯原生js的移动端图片压缩上传插件,不依赖任何库 用法 在html页面中引入input标签,通过自定义属性data-LUploader绑定点击触发的标签id,写法如下: <div cla

android图片压缩上传系列-service篇

本篇文章是继续上篇android图片压缩上传系列-基础篇文章的续篇.主要目的是:通过Service来执行图片压缩任务来讨论如何使用Service,如何处理任务量大的并发问题. 了解下Service 大家都知道如果有费时任务,这时需要将任务放到后台线程中执行,如果对操作的结果需要通过ui展示还需要在任务完成后通知前台更新.当然对于这种情况,大家也可以在Activity中启动线程,在线程中通过Handler和sendMessage来通知Activity并执行更新ui的操作,但是更好的方法是将这些操作

【方法】如何实现图片压缩上传

[参考文章] 前端实现图片压缩上传功能 H5实现图片先压缩再上传 原文地址:https://www.cnblogs.com/wannananana/p/12050442.html

springMVC多图片压缩上传的实现

前台代码: <form id="userForm" method="post" enctype="multipart/form-data"> <div> <label class="my_input_title">图片1:</label> <input type="file" name="file" class=""

HTML5实现图片压缩上传功能

上篇文章中提到移动端上传图片,我们知道现在流量还是挺贵的,手机的像素是越来越高,拍个照动不动就是好几M,伤不起.虽然客户端可以轻轻松松实现图片压缩再上传,但是我们的应用还可能在浏览器里面打开,怎么办呢,图片压缩.受以前PC上的开发思维影响,尼玛js哪有权限去操作文件,哪有资格压缩图片啊,搞不了,你们客户端去整吧.只能说自己还是有些井底之蛙了.在HTML5的影响下,前端能干的事情越来越多了,开发的功能逼格也越来越高了,H5万岁!前端的魅力也在这,过去不可能的并不意味现在.以后不可能,努力吧,骚年!

前端图片压缩上传(纯js的质量压缩,非大小压缩)

此demo为大于1M对图片进行压缩上传 若小于1M则原图上传,可以根据自己实际需求更改. demo源码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>XMLHttpRequest上传文件</title> <script type="text/javascript"> /* 三个参数 file:一个是文件(

前端图片压缩上传(纯js的质量压缩,非长宽压缩)

原文: 此demo为大于1M对图片进行压缩上传 若小于1M则原图上传,可以根据自己实际需求更改. demo源码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>XMLHttpRequest上传文件</title> <script type="text/javascript"> /* 三个参数 file:一个

H5+jqweui实现手机端图片压缩上传

主要功能,使用H5的formData上传base64格式的图片,canvas压缩图片,前端样式使用weui,为方便起见,使用了jquery封装过的weui,jqweui. 话不多少,开始上代码. 前端代码,直接在jqweui官网下的demo里改的(是dist下的demo) <!DOCTYPE html> <html> <head> <title>jQuery WeUI</title> <meta charset="utf-8&qu