5

Android では、Google Drive API: Insert File を使用して、Cordova/Phonegap getPicture() からの出力をアップロードしようとしています。DATA_URL (base64) の代わりに FILE_URI を使用してこれを行う方法はありますか?

最初に Camera.DestinationType.DATA_URL を試しましたが、本来の Base64 データが返されず、FILE_URI と同じものが返されました。だから今、FILE_URIをGoogle Drive Insert File（Base64を使用）に渡す方法を見つけようとしています。FILE_URI を Base64 に変換する方法はありますか?

コルドバコード:

navigator.camera.getPicture(onSuccess, onFail,
    { quality: 50, destinationType: Camera.DestinationType.FILE_URI });

function onSuccess(imageURI) {
    var image = document.getElementById('myImage');
    image.src = imageURI;

    // need to do something like this:
    var fileData = ConvertToBase64(imageURI);
    insertFile(fileData);
}

Google ドライブ コード:

/**
 * Insert new file.
 *
 * @param {File} fileData File object to read data from.
 * @param {Function} callback Function to call when the request is complete.
 */
function insertFile(fileData, callback) {
  const boundary = '-------314159265358979323846';
  const delimiter = "\r\n--" + boundary + "\r\n";
  const close_delim = "\r\n--" + boundary + "--";

  var reader = new FileReader();
  reader.readAsBinaryString(fileData);
  reader.onload = function(e) {
    var contentType = fileData.type || 'application/octet-stream';
    var metadata = {
      'title': fileData.fileName,
      'mimeType': contentType
    };

    var base64Data = btoa(reader.result);
    var multipartRequestBody =
        delimiter +
        'Content-Type: application/json\r\n\r\n' +
        JSON.stringify(metadata) +
        delimiter +
        'Content-Type: ' + contentType + '\r\n' +
        'Content-Transfer-Encoding: base64\r\n' +
        '\r\n' +
        base64Data +
        close_delim;

    var request = gapi.client.request({
        'path': '/upload/drive/v2/files',
        'method': 'POST',
        'params': {'uploadType': 'multipart'},
        'headers': {
          'Content-Type': 'multipart/mixed; boundary="' + boundary + '"'
        },
        'body': multipartRequestBody});
    if (!callback) {
      callback = function(file) {
        console.log(file)
      };
    }
    request.execute(callback);
  }
}
4

3 に答える 3

2

はい、できます....

Destination Typeそれ自体として指定しFILE_URI、画像ファイル uri を取得する imagedata でそれを image タグに配置してから内部に配置すると、canvas にはtoDataURLHTML5 canvasと呼ばれる 1 つのメソッドがあり、対応する画像の base64 を取得できます。

function onSuccess(imageData)
     {

                var $img = $('<img/>');
                $img.attr('src', imageData);
                $img.css({position: 'absolute', left: '0px', top: '-999999em', maxWidth: 'none', width: 'auto', height: 'auto'});
                $img.bind('load', function() 
                {
                    var canvas = document.createElement("canvas");
                    canvas.width = $img.width();
                    canvas.height = $img.height();
                    var ctx = canvas.getContext('2d');
                    ctx.drawImage($img[0], 0, 0);
                    var dataUri = canvas.toDataURL('image/png');

                });
                $img.bind('error', function() 
                {
                    console.log('Couldnt convert photo to data URI');
                });

    }
于 2013-09-18T04:39:28.477 に答える
2

私を正しい方向に向けてくれたアルンに感謝します。http://jsfiddle.net/jasdeepkhalsa/L5HmW/に基づいたこのJavaScript関数を使用することになりました

function getBase64Image(imgElem) {
// imgElem must be on the same server otherwise a cross-origin error will be thrown "SECURITY_ERR: DOM Exception 18"
    var canvas = document.createElement("canvas");
    canvas.width = imgElem.clientWidth;
    canvas.height = imgElem.clientHeight;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(imgElem, 0, 0);
    var dataURL = canvas.toDataURL("image/jpeg");
    dataURL = dataURL.replace(/^data:image\/(png|jpg|jpeg);base64,/, "");
    return dataURL;
}
于 2013-09-18T20:20:52.170 に答える