个人中心
gpt4 book ai didi

android - 上传前从相机裁剪图像(Phonegap)

转载 作者：塔克拉玛干 更新时间：2023-11-02 23:59:58 25 4
gpt4 key购买 nike

我想问你..

我有一个代码...使用 phonegap..但我对从相机/文件管理器中获取图像后如何调用/裁剪图像感到困惑...

这里是代码...

<!DOCTYPE HTML>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="js/jquery.mobile-1.0.min.css" />
    <script src="js/jquery-1.6.4.min.js"></script>
    <script src="js/jquery.mobile-1.0.min.js"></script>

    <script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js"></script>
    <script type="text/javascript" charset="utf-8">

    var deviceReady = false;

    /**
     * Take picture with camera
     */
    function takePicture() {
        navigator.camera.getPicture(
            function(uri) {
                var img = document.getElementById('camera_image');
                img.style.visibility = "visible";
                img.style.display = "block";
                img.src = uri;
                window.location.hash = "#page2";
                /*document.getElementById('camera_status').innerHTML = "Success"; */


            },
            function(e) {
                console.log("Error getting picture: " + e);
                document.getElementById('camera_status').innerHTML = "Error getting picture.";
            },
            { quality: 50, destinationType: navigator.camera.DestinationType.FILE_URI, targetWidth: 1153, targetHeight: 385
            }

            );
    };

    /**
     * Select picture from library
     */
    function selectPicture() {
        navigator.camera.getPicture(
            function(uri) {
                var img = document.getElementById('camera_image');
                img.style.visibility = "visible";
                img.style.display = "block";
                img.src = uri;
                document.getElementById('camera_status').innerHTML = "Success";
                window.location.hash = "#page2";
            },
            function(e) {
                console.log("Error getting picture: " + e);
                document.getElementById('camera_status').innerHTML = "Error getting picture.";
            },
            { quality: 50, targetWidth: 1153, targetHeight: 385, destinationType: navigator.camera.DestinationType.FILE_URI, sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY});
    };

    /**
     * Upload current picture
     */
    function uploadPicture() {

        // Get URI of picture to upload
        var img = document.getElementById('camera_image');
        var imageURI = img.src;
        if (!imageURI || (img.style.display == "none")) {
            document.getElementById('camera_status').innerHTML = "Take picture or select picture from library first.";
            return;
        }

        // Verify server has been entered
        server = document.getElementById('serverUrl').value;
        if (server) {

            // Specify transfer options
            var options = new FileUploadOptions();
            options.fileKey="file";
            options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);
            options.mimeType="image/jpeg";
            options.chunkedMode = false;

            // Transfer picture to server
            var ft = new FileTransfer();
            $.mobile.showPageLoadingMsg();
            ft.upload(imageURI, server, function(r) {
                document.getElementById('camera_status').innerHTML = "Upload successful: "+r.bytesSent+" bytes uploaded.";
                viewUploadedPictures();
                $.mobile.hidePageLoadingMsg();
                window.location.hash = "#page3";
            }, function(error) {
                $.mobile.hidePageLoadingMsg();
                document.getElementById('camera_status').innerHTML = "Upload failed: Code = "+error.code;               
            }, options);
        }
    }

    /**
     * View pictures uploaded to the server
     */
    function viewUploadedPictures() {

        // Get server URL
        server = document.getElementById('serverUrl').value;
        if (server) {

            // Get HTML that lists all pictures on server using XHR 
            var xmlhttp = new XMLHttpRequest();

            // Callback function when XMLHttpRequest is ready
            xmlhttp.onreadystatechange=function(){
                if(xmlhttp.readyState === 4){

                    // HTML is returned, which has pictures to display
                    if (xmlhttp.status === 200) {
                        document.getElementById('server_images').innerHTML = xmlhttp.responseText;
                    }

                    // If error
                    else {
                        document.getElementById('server_images').innerHTML = "Error retrieving pictures from server.";
                    }
                }
            };
            xmlhttp.open("GET", server , true);
            xmlhttp.send();         
        }   
    }

    /**
     * Function called when page has finished loading.
     */
    function init() {
        document.addEventListener("deviceready", function() {deviceReady = true;}, false);
        window.setTimeout(function() {
            if (!deviceReady) {
                alert("Error: PhoneGap did not initialize.  Demo will not run correctly.");
            }
        },2000);
    }

    </script>

  </head>
  <body onload="init();">
  <!-- Page 1 -->
<div data-role="page" id="page1">
   <!-- Page 1 Header -->
   <div data-role="header">
      <h1>Ambil Gambar</h1>
   </div>
   <!-- Page 1 Content -->
   <div data-role="content">
      <center>
    <a href="javascript:void(0)" onclick="takePicture();">
    <img src="image/camera.png" width="150px" height="150px">
    </a>
    <br>
    <br>
    <b>Atau</b>
    <br>
    <br>
    <a href="javascript:void(0)" onclick="selectPicture();">
    <img src="image/upload.png">
    </a>

    </center>

   </div>
   <!-- Page 1 Footer -->
   <div data-role="footer">
      <h4>Footer 1</h4>
   </div>
</div>
<!-- Page 2 -->
<div data-role="page" id="page2">
   <!-- Page 2 Header -->
   <div data-role="header">
      <h1>Header 2</h1>
   </div>
   <!-- Page 2 Content -->
   <div data-role="content">

       <img style="width:100%;visibility:hidden;display:none;" id="camera_image" src="" />
      <input type="button" onclick="uploadPicture();" value="Upload Picture" />
      <input id="serverUrl" type="text" value="http://kiosban.com/android/camera/upload.php" />
      Status : <span id="camera_status"></span>
      <a href="#page3">Skip</a>
   </div>
   <!-- Page 2 Footer -->
   <div data-role="footer">
      <h4>Footer 2</h4>
   </div>
</div>
<!-- Page 3 -->
<div data-role="page" id="page3">
   <!-- Page 3 Header -->
   <div data-role="header">
      <h1>Header 3</h1>
   </div>
   <!-- Page 3 Content -->
   <div data-role="content">
   <div id="server_images"></div>
      <h3>Server:</h3>
        <b>Images on server:</b>
        <div id="server_images"></div>

        <input type="button" onclick="viewUploadedPictures();" value="View Uploaded Pictures" />
   </div>
   <!-- Page 2 Footer -->
   <div data-role="footer">
      <h4>Footer 2</h4>
   </div>
</div>



  </body>
</html>

我想在#page2 调用图像裁剪，所以有一个上传按钮可以上传裁剪后的图像......

有人可以帮我做吗？？

最佳答案

PhoneGap 没有内置裁剪功能。某些平台(肯定是 iPhone)允许用户在用相机拍摄照片后裁剪照片，但之前如果您通过 allowEdit =，它将返回到您的 JavaScript 代码getPicture 的 true 参数。但是您无法通过脚本控制此处。

您必须自己从 JavaScript 实现裁剪功能。使用 HTML5 的 canvas 标签比预期的要容易。可以找个漂亮的教程here .

关于android - 上传前从相机裁剪图像(Phonegap)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11151995/

25 4 0
文章推荐： android - 如何在android中实现FM Transmitter？
文章推荐： linux - 如何使用 wget 一次下载所有这些文件？
文章推荐： linux - 解析和替换两个文件中的一些字符串
文章推荐： c++ - eclipse-cdt中如何自动生成函数头注释？
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com