【问题标题】:Using the Phonegap/Cordova camera plugin select photo from camera OR gallery使用 Phonegap/Cordova 相机插件从相机或图库中选择照片
【发布时间】:2013-11-23 15:40:38
【问题描述】:

我正在使用 Phonegap 3.0.0 相机插件 (https://build.phonegap.com/plugins/242)。我想让用户上传照片。 sourcetype 的当前选项是:

Camera.PictureSourceType.CAMERA

Camera.PictureSourceType.SAVEDPHOTOALBUM

Camera.PictureSourceType.PHOTOLIBRARY

是否有任何 sourcetype 可以同时向用户显示所有这三个选项?我希望用户能够选择画廊或相机。我认为这是您点击< input type="file"/> 时移动浏览器中的典型行为。

【问题讨论】:

    标签: android ios mobile cordova


    【解决方案1】:

    试试这个:

    诀窍:

    <input type="file" capture="camera" accept="image/*" id="takePictureField">
    

    http://www.raymondcamden.com/2013/5/20/Capturing-camerapicture-data-without-PhoneGap

    网站的完整示例:

    <!DOCTYPE HTML>
    <html>
        <head>
        <meta name="viewport" content="width=320; user-scalable=no" />
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>ColorThief Demo</title>
    
        <script type="text/javascript" charset="utf-8" src="jquery-2.0.0.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="quantize.js"></script>
        <script type="text/javascript" charset="utf-8" src="color-thief.js"></script>
    
        <style>
        #yourimage {
            width:100%; 
        }
    
        #swatches {
            width: 100%;
            height: 50px;   
        }
    
        .swatch {
            width:18%;
            height: 50px;
            border-style:solid;
            border-width:thin;  
            float: left;
            margin-right: 3px;  
        }
        </style>
        </head>
    
        <body>
    
            <input type="file" capture="camera" accept="image/*" id="takePictureField">
    
            <img id="yourimage">
    
            <div id="swatches">
                <div id="swatch0" class="swatch"></div>
                <div id="swatch1" class="swatch"></div>
                <div id="swatch2" class="swatch"></div>
                <div id="swatch3" class="swatch"></div>
                <div id="swatch4" class="swatch"></div>
            </div>
    
        <script>
        var desiredWidth;
    
        $(document).ready(function() {
            console.log('onReady');
            $("#takePictureField").on("change",gotPic);
            $("#yourimage").load(getSwatches);
            desiredWidth = window.innerWidth;
    
            if(!("url" in window) && ("webkitURL" in window)) {
                window.URL = window.webkitURL;   
            }
    
        });
    
        function getSwatches(){
            var colorArr = createPalette($("#yourimage"), 5);
            for (var i = 0; i < Math.min(5, colorArr.length); i++) {
                $("#swatch"+i).css("background-color","rgb("+colorArr[i][0]+","+colorArr[i][1]+","+colorArr[i][2]+")");
                console.log($("#swatch"+i).css("background-color"));
            }
        }   
    
        //Credit: https://www.youtube.com/watch?v=EPYnGFEcis4&feature=youtube_gdata_player
        function gotPic(event) {
            if(event.target.files.length == 1 && 
               event.target.files[0].type.indexOf("image/") == 0) {
                $("#yourimage").attr("src",URL.createObjectURL(event.target.files[0]));
            }
        }
    
    
    
        </script>    
        </body>
    
    </html>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2016-08-18
      • 1970-01-01
      • 2017-04-19
      • 2015-10-20
      • 2016-07-04
      • 2011-09-30
      • 2018-05-11
      相关资源
      最近更新 更多