论坛 › 知识问答 › javascript - 如何将捕获的图片存储在我的服务器上

菜鸟教程小白 发表于 2022-12-12 20:50:45

javascript - 如何将捕获的图片存储在我的服务器上

                                            <p><p>我正在使用 Phonegap 创建一个专门用于 Android、Ios 和 Windows 手机的应用程序。有了这个，我正在使用相机 API 来捕捉你手机上的图片。这些当前未存储，将在重新打开时删除。因此，我想访问我的服务器来存储图片(例如 .jpeg 格式)。这通过 JavaScript/HTML。我怎样才能创建这个文件并存储它？</p>

<p>var 图片来源;//图片来源
    变量目的地类型；//设置返回值的格式</p>

<pre><code>// Wait for device API libraries to load
//
document.addEventListener(&#34;deviceready&#34;,onDeviceReady,false);

// device APIs are available
//
function onDeviceReady() {
    pictureSource=navigator.camera.PictureSourceType;
    destinationType=navigator.camera.DestinationType;
}

// Called when a photo is successfully retrieved
//
function onPhotoDataSuccess(imageData) {
// Uncomment to view the base64-encoded image data
// console.log(imageData);

// Get image handle
//
var smallImage = document.getElementById(&#39;smallImage&#39;);

// Unhide image elements
//
smallImage.style.display = &#39;block&#39;;

// Show the captured photo
// The in-line CSS rules are used to resize the image
//
smallImage.src = &#34;data:image/jpeg;base64,&#34; + imageData;
}

// Called when a photo is successfully retrieved
//
function onPhotoURISuccess(imageURI) {
// Uncomment to view the image file URI
// console.log(imageURI);

// Get image handle
//
var largeImage = document.getElementById(&#39;largeImage&#39;);

// Unhide image elements
//
largeImage.style.display = &#39;block&#39;;

// Show the captured photo
// The in-line CSS rules are used to resize the image
//
largeImage.src = imageURI;
}

// A button will call this function
//
function capturePhoto() {
// Take picture using device camera and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
    destinationType: destinationType.DATA_URL });
}

// A button will call this function
//
function capturePhotoEdit() {
// Take picture using device camera, allow edit, and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,
    destinationType: destinationType.DATA_URL });
}

// A button will call this function
//
function getPhoto(source) {
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
    destinationType: destinationType.FILE_URI,
    sourceType: source });
}

// Called if something bad happens.
//
function onFail(message) {
alert(&#39;Failed because: &#39; + message);
}
</code></pre></p>
                                    <br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
                                            <p><p>您可以获取 FILE_URI，然后使用 php 将其上传到您的服务器，如下所示:</p>

<p><strong>电话号码:</strong></p>

<pre><code>function uploadPhoto(imageURI) {
            var options = new FileUploadOptions();
            options.fileKey=&#34;file&#34;;
            options.fileName=imageURI.substr(imageURI.lastIndexOf(&#39;/&#39;)+1);
            options.mimeType=&#34;image/jpeg&#34;;

            var params = new Object();
            params.value1 = &#34;test&#34;;
            params.value2 = &#34;param&#34;;

            options.params = params;
            options.chunkedMode = false;

            var ft = new FileTransfer();
            ft.upload(imageURI, &#34;http://yourdomain.com/upload.php&#34;, win, fail, options);
      }

      navigator.camera.getPicture(uploadPhoto, function(message) {
       alert(&#39;get picture failed&#39;);
    },{
            quality: 50,
            destinationType: navigator.camera.DestinationType.FILE_URI,
            sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
      }
            );
</code></pre>

<p><strong>PHP 代码(upload.php):</strong></p>

<pre><code>&lt;?php
print_r($_FILES);
$new_image_name = &#34;namethisimage.jpg&#34;;
move_uploaded_file($_FILES[&#34;file&#34;][&#34;tmp_name&#34;], &#34;/srv/www/upload/&#34;.$new_image_name);
?&gt;
</code></pre></p>
                                   
                                                <p style="font-size: 20px;">关于javascript - 如何将捕获的图片存储在我的服务器上，我们在Stack Overflow上找到一个类似的问题：
                                                        <a href="https://stackoverflow.com/questions/22655477/" rel="noreferrer noopener nofollow" style="color: red;">
                                                                https://stackoverflow.com/questions/22655477/
                                                        </a>
                                                </p>
                                       

查看完整版本: javascript - 如何将捕获的图片存储在我的服务器上