首页 > 建站教程 > APP开发,混合APP >  mui配合jpgtobase64.js压缩上传或拍照的图片的完整代码正文

mui配合jpgtobase64.js压缩上传或拍照的图片的完整代码

    本示例代码,为我爱模板网在项目中使用的,mui拍照或从相册选择照片,并且对照片进行1倍压缩,最终得到base64为图片地址的代码。这里的图片压缩,用的是jpgtobase64.js插件(点击下载),它的原理很简单,就是利用html5的canvas,将图片放到canvas画布上,再进行缩放得到结果,代码已经在文章末尾提供。废话不多说,直接上代码:
01<script src="js/mui.min.js"></script>
02<script src="js/jpgtobase64.js"></script>
03<script>
04var photo; //用以接收图片最终地址
05 
06//弹出选择拍照还是从相册获取
07document.querySelector('#upload').addEventListener('tap', function(){
08    var buttonTit = [{ 
09        title: "拍照" 
10    }, { 
11        title: "从手机相册选择" 
12    }];
13    plus.nativeUI.actionSheet({ 
14            title: "上传图片"
15            cancel: "取消"
16            buttons: buttonTit 
17        }, function(b) { /*actionSheet 按钮点击事件*/ 
18            switch (b.index) { 
19                case 0: 
20                    break
21                case 1: 
22                    getImage(); /*拍照*/ 
23                    break
24                case 2: 
25                    galleryImg();/*打开相册*/ 
26                    break
27                default
28                    break
29        
30    })
31})
32 
33//拍照
34function getImage(){
35    var cmr = plus.camera.getCamera(1); //获取后面的摄像头
36    cmr.captureImage(function(p) {
37        //拍照成功,返回路径 p,但是不是绝对路径
38        //通过p,读取图片文件
39        plus.io.resolveLocalFileSystemURL(p, function(entry) {
40            //entry为获取的文件,.file()方法可以获取该文件的文件名、大小等信息,返回包含文件信息的对象
41            entry.file(function (file) {
42                //alert("getFile:" + JSON.stringify(file));
43                var fileReader = new plus.io.FileReader(); //开启读取文件
44                fileReader.readAsDataURL(file, 'utf-8');   //将文件数据对象信息file进行url base64编码
45                fileReader.onloadend = function (evt) {
46                    //压缩图片
47                    convertImgToBase64(evt.target.result, function (retImg) {
48                        photo = retImg;
49                        document.querySelector('.uploaded-imgs').innerHTML += '<span><img src="'+photo+'"></span>';
50                    });
51                }
52            })
53        }, function(e) {
54            alert(e.message);
55        }); 
56    },function(e) {}, {
57        filename: "_doc/camera/" 
58    }); //拍照
59}
60 
61//从相册选择
62function galleryImg(){
63    plus.gallery.pick(function(e){
64        for(var i in e.files){
65            var fileSrc = e.files[i];
66            //压缩图片
67            convertImgToBase64(fileSrc, function (retImg) {
68                photo = retImg;
69                document.querySelector('.uploaded-imgs').innerHTML += '<span><img src="'+photo+'"></span>';
70            });
71        }
72    }, function (e) {
73        console.log( "取消选择图片" );
74    },{
75        filter: "image"
76        multiple: true
77        maximum: 1, 
78        system: false
79        onmaxed: function() {
80            plus.nativeUI.alert('最多只能选择1张图片');
81        
82    });
83}
84</script>
附上:jpgtobase64.js代码:
01function convertImgToBase64(url, callback, outputFormat) {
02    var canvas = document.createElement('CANVAS');
03    var ctx = canvas.getContext('2d');
04    var img = new Image;
05    img.crossOrigin = 'Anonymous';
06    img.onload = function () {
07        var width = img.width;
08        var height = img.height;
09        // 按比例压缩1倍
10        var rate = (width < height ? width / height : height / width) / 1;
11        canvas.width = width * rate;
12        canvas.height = height * rate;
13        ctx.drawImage(img, 0, 0, width, height, 0, 0, width * rate, height * rate);
14        var dataURL = canvas.toDataURL(outputFormat || 'image/png');
15        callback.call(this, dataURL);
16        canvas = null;
17    };
18    img.src = url;
19}