Cómo subir FILE_URI con Google Drive API: Insertar archivo
En Android, estoy intentando cargar la salida de Cordova / Phonegap getPicture () usando la API de Google Drive: Insertar archivo. ¿Hay una manera de hacer esto usando el FILE_URI en vez de DATA_URL (base64)?
He intentado Camera.DestinationType.DATA_URL en primer lugar, pero no devolver datos de Base64 como se suponía, sólo volvió lo mismo que FILE_URI. Así que ahora estoy tratando de averiguar cómo pasar FILE_URI a Google Drive Insertar archivo (que toma Base64). ¿Hay una manera de convertir FILE_URI a Base64?
- La actividad de Android se recrea
- Plugin de androide phonegap ActionBar wrapper
- Cuadro de texto de entrada oculto detrás del teclado en android Chrome
- Desarrollando PhoneGap para Android - Mejor práctica para diferentes tamaños de pantalla / densidad de píxeles
- Portales de aplicaciones móviles centralizados y descentralizados
Código de Córdoba:
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); }
Código de Google Drive:
/** * 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); } }
- Rendimiento de almacenamiento de datos de Android
- ¿Cuál es el mejor marco de desarrollo de aplicaciones web móvil
- ¿Cómo puedo cambiar el tamaño de las imágenes en Android?
- ¿Qué es un buen libre / open source multiplataforma plataforma de desarrollo de aplicaciones móviles
- Evento Javascript para el lanzamiento del navegador móvil o dispositivo despertador
- ¿Cuáles son las ventajas del lenguaje de programación Kotlin?
- ¿Trucos para evitar que el teléfono se quede dormido en un navegador web móvil usando JavaScript / HTML?
- Error de conexión de Web Socket desde el cliente Android
Si puedes
Especifique el Destination Type
como FILE_URI
sí mismo y en imagedata obtendrá el archivo de imágenes uri colocarlo en una etiqueta de imagen y luego colocarlo dentro de HTML5 canvas
y lienzo tiene un método llamado toDataURL donde podrá obtener el base64 de la imagen correspondiente .
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'); }); }
Me doy cuenta de que esto es un poco antiguo – pero ahora parece que puedes usar un FileReader
en phoneGap.
No he probado esto todavía, pero algo como esto también debería funcionar, sin el hack de la lona.
[EDIT – probado y revisado el código de abajo. funciona para mí: D]
var cfn = function(x) { console.log(x) }; var cameraOps = { quality: 50, destinationType: Camera.DestinationType.FILE_URI }; navigator.camera.getPicture(function(imagePath) { window.resolveLocalFileSystemURL(imagePath, function(fileEntry) { fileEntry.file(function (file) { var reader = new FileReader(); reader.onloadend = function(evt) { console.log("read success!!!"); console.log(evt.target.result); }; reader.readAsDataURL(file); }, cfn); }, cfn); }, cfn);
Gracias a Arun por señalarme en la dirección correcta. Terminé usando esta función javascript, que se basó en http://jsfiddle.net/jasdeepkhalsa/L5HmW/
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; }
- Colores de fondo personalizados de ListView
- Botón Haga clic dentro del fragmento para abrir un nuevo fragmento