framework7

Open full view…

send an image url to an api via ajax

fcor7usr
Fri, 13 Jan 2017 03:03:11 GMT

Hi, As the title suggests i am writing an app where i need to send a photo from the camera or photolibray when the user has selected one to an api via ajax. I have the user-selected image stored and visible on the page. How do i send this as an url: as a key value pair since i have a file/// url but not a web url?? Do i have to upload the image to a web server then reference that path? or can i send it via the mobile device?

Kerry D
Fri, 13 Jan 2017 03:57:57 GMT

In general, you might follow a process such as this: 1. Use Cordova/Phonegap to build your application 2. Use the camera plugin (https://cordova.apache.org/docs/en/6.x/reference/cordova-plugin-camera/) to take the photo 3. Use the upload plugin (https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file-transfer/) to post the image to your web server 4. Write an API on the server (in PHP/.Net/Node/etc) to receive the photo and process as needed, eg saving it, cropping it, renaming it etc.

fcor7usr
Fri, 13 Jan 2017 15:17:53 GMT

Ok, Well the API endpoint is a Microsoft service so taking it from point 3 in your reply i need to upload via the Cordova plugin then via PHP (my main language) grab it and use ajax/jquery to send it to the MS API yes

manmade
Fri, 13 Jan 2017 16:10:54 GMT

Or you can use load-image.js to create a base64 string, send that to your server and save it in your database and then on an other page get the base64 string from your db and set it in the img src. You donĀ“t need cordova for this, you can but this works in a web app as well.

manmade
Fri, 13 Jan 2017 16:11:45 GMT

You find load-image.js here:https://blueimp.github.io/JavaScript-Load-Image/

manmade
Fri, 13 Jan 2017 16:12:28 GMT

That takes care of the problem with image orientation on the iPhone as well :-)

fcor7usr
Fri, 13 Jan 2017 16:16:14 GMT

Thanks @manmade - ordinarilly this would be childs play from a web page using php/jquery since i only need to send Microsoft API an url to an image on the same site. Ill check out load-image and update this thread - cheers

manmade
Fri, 13 Jan 2017 16:22:05 GMT

I use the image-load.all.min.js file. And then --- $$(document).on('change', '#file-input', function (e) { var filen = document.getElementById('file-input').files[0]; var fileType = filen["type"]; //check the extension... if(fileType.match(/jpg.*/)||fileType.match(/jpeg.*/)||fileType.match(/ png.*/)||fileType.match(/gif.*/)){ myApp.showIndicator(); var file=''; file = document.getElementById('file-input').files[0], options = { canvas: true, maxWidth: 600, minWidth: 300, maxMetaDataSize: 262144, pixelRatio:window.devicePixelRatio }; if (!file) { return; } // Use the "JavaScript Load Image" functionality to parse the file data loadImage.parseMetaData(file, function(data) { // Get the correct orientation setting from the EXIF Data if (data.exif) { options.orientation = data.exif.get('Orientation'); } // Load the image from disk and inject it into the DOM with the correct orientation loadImage( file, function(canvas) { var imgDataURL = canvas.toDataURL('image/jpeg', 0.77); var bilddata=imgDataURL; }, options ); }); --- So "bilddata" has the base64 string value that you can send to the server.

NikolayKuznetsov
Fri, 13 Jan 2017 17:42:19 GMT

> @manmade > the base64 string value This is reason why I am using cordova upload plugin...

Kerry D
Fri, 13 Jan 2017 20:06:05 GMT

It's well known that using Base64 strings is often very memory intensive for phones, due to the high-res images they now produce. You should always work directly with file paths, and not Base64. Read more here: http://cordova.apache.org/docs/en/latest/reference/cordova-plugin-camera/index.html#cameragetpicturesuccesscallback-errorcallback-options

manmade
Sat, 14 Jan 2017 07:30:28 GMT

Yes base64 usually gets 30% bigger that the original but with my code above I get a 3.9mb image to be 29k as a base64 so it works for me :-)