xiaotutu6000
xiaotutu6000
  • 发布:2017-09-07 16:27
  • 更新:2020-12-15 16:05
  • 阅读:6006

HBuilder 图片压缩,截取

分类:HBuilder

贡献一下代码

<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <title></title>  

        <script type="text/javascript" src="js/jquery-1.11.2.min.js" ></script>  

        <script src="js/mui.min.js"></script>  
        <link href="css/mui.min.css" rel="stylesheet" />  
        <script type="text/javascript" charset="utf-8">  
            mui.init();  
        </script>  
    </head>  

    <body>  
        <header class="mui-bar mui-bar-nav">  
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
            <h1 class="mui-title">起始页</h1>  
        </header>  
        <div class="mui-content">  
            <button id="primary" class="mui-btn-primary mui-btn-block" style="margin-top: 20px;">拍照</button>  
            <button id="success" class="mui-btn-success mui-btn-block" style="margin-top: 20px;">打开相册</button>  
        </div>  

        <div id='dkj-result'>  

        </div>  

        <script>  
            if (window.plus) {  
                plusReady();  
            } else {  
                document.addEventListener('plusready', plusReady, false);  
            }  

            function plusReady() {  
                mui(".mui-content").on("tap", "#primary", function() {  
                    var cmr = plus.camera.getCamera();  
                    cmr.captureImage(function(p) {  
                        plus.io.resolveLocalFileSystemURL(p, function(entry) {  
                            mui.openWindow({  
                                url: 'cropper.html',  
                                id: 'cropper.html',  
                                extras: {  
                                    path: "file:///" + entry.fullPath,  
                                    change: "cem"  
                                }  
                            });  
                        }, function(e) {  
                            mui.toast(e.message);  
                        });  
                    }, function(e) {}, {  
                        filename: "_doc/camera/"  
                    });  
                })  
                mui(".mui-content").on("tap", "#success", function() {  
                    plus.gallery.pick(function(url) {  
                        mui.openWindow({  
                            url: 'cropper.html',  
                            id: 'cropper.html',  
                            extras: {  
                                path: url,  
                                change: "open"  
                            }  
                        });  
                    }, function(error) {  
                        mui.toast("打开相册失败");  
                    });  
                }, false);  
            };  
            window.addEventListener('newsId',function(event){  

                var urlPath = event.detail.urlPath;  

                var sHtml = '<img style="margin: 10px 10px 10px 10px; width: 100px; height: 100px;" src="'+ urlPath +'" />';  
                console.log('返回的参数:' + sHtml);  
                $("#dkj-result").append( sHtml );  
            });  
        </script>  
    </body>  

</html>

第二个文件:

<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <script src="js/mui.js"></script>  
        <link href="css/mui.min.css" rel="stylesheet" />  
        <link href="css/iconfont.css" rel="stylesheet" />  
        <link rel="stylesheet" href="css/cropper.css" />  

        <script src="js/custom/common.js"></script>  
        <script type="text/javascript" src="js/fastclick.js"></script>  
        <script type="text/javascript" src="js/exif.js"></script>  
        <link href="css/user-information.css" rel="stylesheet" />  
        <script>  
            window.addEventListener('load', function() {  
                FastClick.attach(document.body);  
            }, false);  
        </script>  
    </head>  

    <body>  
        <div id="cropper-example-1">  
            <img id="im" alt="Picture" style="height:100%;width:100%;">  
        </div>  

        <div class="divbut">  
            <div>  
                <p id="quxiao" class="iconfont icon-quxiao"></p>  
            </div>  
            <div>  
                <p id="xuanqu" class="iconfont icon-queding"></p>  
            </div>  
        </div>  
        <div id="test" style="position: absolute;"></div>  
    </body>  
    <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>  
    <script src="js/cropper.min.js"></script>  
    <!--script src="js/cropper-img.js"></script -->  
    <script type="text/javascript">  

        /*$(function() {  
            ! function() {  
                var i = {  
                    aspectRatio: 1 / 1  
                };  
            }()  
        });*/  
        (function(c) {  

            var Cro = function() {}  
            c.extend(Cro.prototype, {  
                orientation: null,  
                simg: null,  
                simg2: null,  
                urldata: null,  
                view: null,  
                num: 0,  
                sbx: null,  
                sby: null,  
                n: 0,  
                imgurl: null,  
                weizhi: null,  
                imageData: null,  
                onReady: function() {  
                    var that = this;  
                    mui.init();  
                    that.bindEvent();  
                    that.view = plus.webview.currentWebview();  

                    that.simg = document.createElement("img");  
                    that.simg.setAttribute("id", "simg");  
                    document.body.appendChild(that.simg);  

                    var url = that.view.path;  
                    var img = document.createElement("img");  
                    img.setAttribute("src", url);  

                    console.log('原始截取图片路径: ' + url);  

                    //判断图片是否已经加载完,如果已经加载完,则执行下面的函数。  
                    img.addEventListener("load", function() {  

                        EXIF.getData(img, function() {  //调用EXIF解决,图片旋转90的问题  

                            var orientation = EXIF.getAllTags(this).Orientation;  

                            //本地压缩图片。  
                            that.loadcopyImg( img, orientation, url );  

                        });  
                    })  
                },  
                cropperImg: function() {    //加载图片截取框  
                    var that = this;  

                    $('#cropper-example-1 > img').cropper({  
                        aspectRatio: 1 / 1,     //长宽的比例  
                        autoCropArea: 0.5,      //拆减图片框框的大小  
                        strict: true,           //默认值true。 在strict模式中,canvas不能小于容器,剪裁容器不能再canvas之外。  
                        background: false,      //是否在容器上显示网格背景。  
                        guides: true,           //是否在剪裁框上显示虚线  
                        highlight: false,       //是否在剪裁框上显示白色的模态窗口。  
                        dragCrop: false,        //是否允许移除当前的剪裁框,并通过拖动来新建一个剪裁框区域。  
                        movable: false,         //是否允许移动剪裁框。  
                        resizable: false,       //是否允许改变剪裁框的大小。  
                        crop: function(data) {  

                            that.weizhi = data; //将当前截取区域的位置 和 大小放入全局变量中  

                            that.imageData = $('#cropper-example-1 > img').cropper('getImageData'); //将当前图片的信息放入全局参数中去  

                            console.log('getImageData: ' + JSON.stringify( that.imageData ) );  
                            console.log('weizhi: ' + JSON.stringify( that.weizhi ));  
                        }  
                    });  
                },  
                loadcopyImg: function(img, opt,url) {   //本地处理图片。将图片进行压缩  
                    var that = this;  

                    var name="_doc/upload/F_ZDDZZ_"+ ( new Date() ).valueOf() +".jpg"; //拼装唯一图片值    
                    plus.zip.compressImage({  
                            src:url,        //src: (String 类型 )压缩转换原始图片的路径    
                            dst:name,       //压缩转换目标图片的路径    
                            quality:20,     //quality: (Number 类型 )压缩图片的质量.取值范围为1-100    
                            overwrite:true  //overwrite: (Boolean 类型 )覆盖生成新文件    
                        },    
                        function(event) {  
                            var path = name;            //压缩转换目标图片的路径  
                            console.log( '本地压缩图片成功:' + event.target);  

                            that.imgurl = event.target; //将压缩后的图片放入全局变量中  

                            $("#im").attr("src", event.target );    //显示压缩后的图片  
                            //$("#im").attr("src", 'file:///var/mobile/Containers/Data/Application/67789E0B-1848-4491-A225-E25B1C645A26/Documents/Pandora/apps/HBuilder/doc/upload/F_cutOut_1504768316962.jpg');  
                            that.cropperImg();  //调用截取框  

                        },function(error) {    
                            plus.nativeUI.toast("压缩图片失败,请稍候再试");    
                    });  

                },  
                bindEvent: function() {                 //绑定事件  
                    document.getElementById("quxiao").addEventListener("click", function() {  
                        window.cro.view.close();  
                    });  
                    document.getElementById("xuanqu").addEventListener("click", function() {  
                        //window.cro.showFace(window.cro.urldata);  
                        window.cro.jieQu();  
                    });  
                },  
                jieQu: function(){  
                    console.log('截取开始');  
                    var date = (new Date()).valueOf();  //时间戳,避免截图后的文件名相同  
                    var that = this;  

                    //计算各个数值的百分比  
                    var top_Precentage = ( that.weizhi.y / that.imageData.naturalHeight ).toFixed(2) * 100 + '%';  
                    var left_Precentage = ( that.weizhi.x / that.imageData.naturalWidth ).toFixed(2) * 100 + '%';  
                    var width_Precentage = ( that.weizhi.width / that.imageData.naturalWidth ).toFixed(2) * 100 + '%';  
                    var height_Precentage = ( that.weizhi.height / that.imageData.naturalHeight ).toFixed(2) * 100 + '%';  

                    console.log( top_Precentage + " | " + left_Precentage + " | " + width_Precentage + " | " + height_Precentage );  
                    //通过压缩按比例截取图片  
                    plus.zip.compressImage({  
                        src: that.imgurl,   //src在这里是第一步Url里的src。也就是本地路径  
                        dst: '_doc/upload/F_cutOut_'+ date +'.jpg',  
                        overwrite: true,  
                        clip: {  
                          top: top_Precentage,   
                          left: left_Precentage,  
                          width: width_Precentage,  
                          height: height_Precentage   
                        }   
                      },  
                      function( event ) {  
                        console.log('截取后的图片路径:' + event.target);  

                        var vNextPage = plus.webview.getWebviewById( 'home.html' );  
                        if( vNextPage != null ){  

                            mui.fire( vNextPage, 'newsId',{  
                                urlPath : event.target  
                            });  
                        }else{  
                            console.log( '跳转失败 ');  
                        }  

                        window.cro.view.close();/**/  
                        $("#im").attr("src", event.target ); //压缩图片  
                      }  
                    );  
                }  

            });  
            window.cro = new Cro();  
            c.plusReady(function() {  
                window.cro.onReady();  
            })  
        })(mui)  
    </script>  

</html>

2 关注 分享
诗小柒 do11223

要回复文章请先登录注册

睡着就睡着了

睡着就睡着了

回复 1131895059@qq.com :
我也是 说Image找不到
2020-12-15 16:05
Medea

Medea

回复 1131895059@qq.com :
我也发现了,你解决了吗
2020-09-03 09:33
1131895059@qq.com

1131895059@qq.com

ios 走 这里 EXIF.getData 就不走了
2020-05-26 10:39
1398199879@qq.com

1398199879@qq.com

兄弟,为什么打不开拍照和打开相册
2018-07-13 18:08
Yizhiyu

Yizhiyu

请问怎么控制缩放的比例?我一缩放就直接图片消失了
2018-05-24 10:37
xiaotutu6000

xiaotutu6000 (作者)

回复 shentao17@qq.com :
起始页,就是你要执行这个切图的触发点哦。你不想要这个起始页面,也行。你自己改造或者隐藏。
2017-11-28 15:25
shentao17@qq.com

shentao17@qq.com

看了你打包的文件,为什么一定要一个起始页啊?可以去掉吗?
2017-10-18 11:02
诗小柒

诗小柒

mark,很强,也终于让我明白了为什么图片压缩会无效,原来是要重新明个名,坑呀。
2017-09-27 16:31
xiaotutu6000

xiaotutu6000 (作者)

回复 Sinea :
重新传好了。
2017-09-07 20:43
xiaotutu6000

xiaotutu6000 (作者)

回复 Sinea :
囧,我明天在重新打包一个
2017-09-07 20:32