cordova:拍照后上传图像不起作用

2024-03-21

我正在开发一个使用 Apache Cordova 又名 Phonegap 开发的 iOS 应用程序。 我想分两步上传照片: 1. 拍摄照片并以小尺寸显示照片 2.上传照片 我需要一个拍照按钮和一个上传按钮。

我的脚本不起作用。怎么了?

这是我的 JavaScript 文件:

var pictureSource;
var destinationType;

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    pictureSource = navigator.camera.PictureSourceType;
    destinationType = navigator.camera.DestinationType;
}

function clearCache() {
    navigator.camera.cleanup();
}

var retries = 0;
function onCapturePhoto(fileURI) {
    var win = function (r) {
        clearCache();
        retries = 0;
        navigator.notification.alert(
        '',
        onCapturePhoto,
        'Der Upload wurde abgeschlossen',
        'OK');
        console.log(r);
    }

    var fail = function (error) {
        navigator.notification.alert(
        'Bitte versuchen Sie es noch einmal.',
        onCapturePhoto,
        'Ein unerwarteter Fehler ist aufgetreten',
        'OK');
        console.log("upload error source " + error.source);
        console.log("upload error target " + error.target);
        if (retries == 0) {
            retries ++
            setTimeout(function() {
                onCapturePhoto(fileURI)
            }, 1000)
        } else {
            retries = 0;
            clearCache();
            alert('Fehler!');
        }
    }

    */do nothing*/
}


function capturePhoto() {
    navigator.camera.getPicture(onCapturePhoto, onFail, {
    quality: 50,
    destinationType: destinationType.FILE_URI
    });
}


function getPhoto(source) {
      navigator.camera.getPicture(onPhotoURISuccess, onFail, {
      quality: 50,
      destinationType: destinationType.FILE_URI,
      sourceType: source });
    }

function onFail(message) {
    alert('Failed because: ' + message);
}

function photoUpload(imageData) {
    var options = new FileUploadOptions();
    options.fileKey = "file";
    options.fileName = fileURI.substr(fileURI.lastIndexOf('/') + 1);
    options.mimeType = "image/jpeg";
    options.chunkedMode = false;

    var params = new Object();
    params.fileKey = "file";
    options.params = {}; // eig = params, if we need to send parameters to the server request


    var ft = new FileTransfer();
    ft.upload(fileURI, encodeURI("http://XXXXXXXX.com/app/upload.php"), win, fail, options);
}



<div id="camera">
    <button class="camera-control" onclick="capturePhoto();">Foto aufnehmen</button>
    <button class="camera-control" onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>

    <div style="text-align:center;margin:20px;">
        <img id="cameraPic" src="" style="width:auto;height:120px;"></img>
    </div>

    <button class="camera-control" onclick="photoUpload(imageData);">UPLOAD</button>
</div>

Updated:

我刚刚重构了您的代码,希望对您有所帮助。

JavaScript

<script> 
    var sPicData; //store image data for image upload functionality

    function capturePhoto(){
        navigator.camera.getPicture(picOnSuccess, picOnFailure, { 
            quality: 20,
            destinationType: Camera.DestinationType.DATA_URL,
            sourceType: Camera.PictureSourceType.CAMERA,
            correctOrientation: true
        });
    }

    function getPhoto(){
        navigator.camera.getPicture(picOnSuccess, picOnFailure, { 
            quality: 20,
            destinationType: Camera.DestinationType.DATA_URL,
            sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM,
            correctOrientation: true
        });
    }

    function picOnSuccess(imageData){

            var image = document.getElementById('cameraPic');
            image.src = imageData;
            sPicData  = imageData; //store image data in a variable
    }

    function picOnFailure(message){
        alert('Failed because: ' + message);
    }

    // ----- upload image ------------
    function photoUpload() {
        var options = new FileUploadOptions();
        options.fileKey = "file";
        options.fileName = sPicData.substr(sPicData.lastIndexOf('/') + 1);
        options.mimeType = "image/jpeg";
        options.chunkedMode = false;

        var params = new Object();
        params.fileKey = "file";
        options.params = {}; // eig = params, if we need to send parameters to the server request

        ft = new FileTransfer();
        ft.upload(sPicData, "http://XXXXXXXX.com/app/upload.php", win, fail, options); 
    }

    function win(){
        alert("image uploaded scuccesfuly");
    }

    function fail(){
        alert("image upload has been failed");
    }

</script>

HTML

<div id="camera">
    <button class="camera-control" onclick="capturePhoto();">Foto aufnehmen</button>
    <button class="camera-control" onclick="getPhoto();">From Photo Library</button><br>

    <div style="text-align:center;margin:20px;">
        <img id="cameraPic" src="" style="width:auto;height:120px;"></img>
    </div>

    <button class="camera-control" onclick="photoUpload();">UPLOAD</button>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

cordova:拍照后上传图像不起作用 的相关文章

  • 鼠标悬停时放大图像而不使用 Jquery 推送其他图像?

    当您将鼠标悬停在图像缩略图上 例如 Google 图片正在使用的缩略图 时 我正在尝试创建图像放大效果 但是 我遇到了一个问题 即放大的图像根据放大的图像的位置不断将另一张图像推到另一个位置 这是我到目前为止所拥有的
  • 为 iOS 应用程序加载基于 SVG 的图像资源

    我从 thenounproject 购买了一个图标作为 SVG 图像 然后我使用一个名为的 macOS 程序Gapplin http gapplin wolfrosch com 将此 SVG 导出为 PNG 图像 它显示为 100x100
  • Flutter http请求上传mp3文件

    我使用这个 api 上传 mp3 文件 使用这种方法 Future
  • Jquery 移动应用程序的奇怪行为

    我创建了一个应用程序 其中包含多个主页按钮 单击其中一个按钮 我的应用程序将重定向到某个视图 其中包含 JQM 表单 JQM 日历 文本字段 按钮和数据库等 我的问题是 当我在 Android 设备上测试我的应用程序时 即使我没有使用任何图
  • 将 Dropzone.js 与其他表单字段集成到 html 表单中

    我想将 dropzone js 添加到具有其他元素的表单中 我找到了这个示例并按照说明进行操作 不幸的是整个变成了 dropzone js dropzone https github com enyo dropzone wiki Combi
  • Android PhoneGap 插件,UI 选项卡栏,调整 WebView 大小

    我正在创建一个美味的 PhoneGap 插件 希望一旦它能被打开 准备好了 插件基本完成了 我只需要一个漂亮的用户界面 相互作用 简而言之 我想创建一个 本机 android 工具栏组件 如果您实现 PhoneGap UIControls
  • Flash 对象未显示在phonegap android 中

    我已经在 android 手机间隙创建了一个应用程序 我有一个屏幕 我想显示一个静态 flash obj 所以我在屏幕 HTML 页面中放入了以下代码
  • 使用base64编码图像的优点和缺点[关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我正在考虑为我正在开发的网站使用 Base64 编码图像来优化加载时间 不管怎样 在开始之前 我想知道 这样做的优点和缺点是什么 目前 我没有看
  • VideoCapture.read() 返回过去的图像

    我在跑python3 6 with openCV on the Raspberry pi OS is Raspbian 代码的大致结构如下 The image以时间间隔 3 5 分钟 捕获 被捕获image在函数中处理并返回度量 精度的种类
  • 如何用python创建透明的径向渐变?

    我正在尝试创建一个渐变到清晰背景的径向渐变 我的目标是创建这个渐变并将其作为背景粘贴到另一个图像 到目前为止 我已经能够创建圆形渐变 但它不透明 我在 stackoverflow 中找到了以下代码 imgsize 650 650 image
  • Laravel 上传前如何压缩图像?

    我正在制作一个图片库网站 用户可以在其中上传任何图像 它们将显示在前端 我需要在不影响图像质量的情况下压缩图像 以减小图像大小 以便页面加载速度不会影响那么大 我使用以下代码来上传图像 rules array file gt require
  • 如何加载图像文件到ImageView?

    我试图在从文件选择器中选择图像文件后立即显示该图像文件 文件选择器仅限于 png 和 jpg 文件 所选文件存储在文件类型的变量中 为此 我设置了一个 ImageView 我希望用这个新文件设置图像 唯一的问题是它的类型是文件而不是图像 如
  • ionic build android 抛出“呃哦!”更新cordova后出错

    我刚刚通过更新科尔多瓦sudo npm install g cordova 现在我遇到了问题 每次我尝试使用以下命令构建 Android 应用程序时ionic run android device i get Error during pr
  • 如何在android中将多个图像合并为一个图像?

    我正在开发 android 的分布式应用程序 我已将单个图像分成 4 个部分 然后对其进行处理 现在我想将 4 个位图图像组合成一个图像 我怎样才能做到这一点 Bitmap parts new Bitmap 4 Bitmap result
  • Google App Engine 中的图像上传

    我正在开发一个网站 用户可以上传与某个位置相关的帖子 然后他们可以添加两到三张照片 我了解如何使用数据存储区或 Blobstore 进行基本上传 但我想将这些照片链接到帖子和用户 然后能够在连接到帖子和用户的所有页面中显示它们 这是一般的想
  • 您如何在 Android 上处理超高 MP 相机(和图像)? - “画布:尝试绘制太大的位图”

    我有一个活动 用户可以像这样打开相机 getPictureUri createImageFromFile true let photoUri it openCameraActivity REQUEST IMAGE CAPTURE it ph
  • 我可以在没有 http 处理程序的情况下隐藏 ASP.NET 页面上的图像路径吗?

    我的网站结构中的目录下有许多静态图像 并且我不关心图像的热链接或复制保护 由于多种原因 我需要做的不是在网站上显示图像路径 或显示假路径 有什么方法可以在不求助于 http 处理程序或辅助 asp net 页面的情况下执行此操作吗 你可以使
  • Java中读取图像文件的方式有什么区别?

    在java中读取图像文件有多种方法 例如BufferedImage and ImageIcon仅举几例 我想知道这些情况有什么区别 它们是否依赖于上下文 在特定情况下只能使用其中一个 阅读所选图像的最佳方式是什么JFileChooser由用
  • 在 Cordova 中合并文件的多个部分

    在我的 Cordova 应用程序中 我正在下载任意文件 例如图像或视频文件 这是通过 Cordova 文件传输插件和 Range 标头完成的 因为我需要分段下载文件 我的问题是 我想将几 个小 字节 文件合并回原来的文件中 他们曾经在其中使
  • 单击在 Whatsapp 或通过 PhoneGap 的任何社交应用程序中共享的链接时如何打开应用程序?

    1 当我通过phonegap插件分享链接到whatsapp时 当用户点击链接时 它应该检查是否安装了特定的应用程序 如果是 请在应用程序中打开该链接 或者打开显示下载应用程序的 Play 商店链接 您所描述的场景 其中设备拦截 HTTP 协

随机推荐