Saving a web photo in a camera frame in Phonegap

Question

In my iOS PhoneGap application, a photo gallery is displayed (downloaded from the server). Can I add a button to an image page that saves the image in an iOS camera roll ? (similar to pressing and holding in a mobile safari)

If this is what needs to be done as a plug-in, any information pointing me in the right direction will be appreciated! (My skills in obj C are sorely lacking).

Thanks!

Answer 1

This is possible using the Cordova / Phonegap Canvas2ImagePlugin plugin . Install it and add the following function to your code. It is based on getImageDataURL () from Raul Sanchez (Thanks!).

function saveImageToPhone(url, success, error) { var canvas, context, imageDataUrl, imageData; var img = new Image(); img.onload = function() { canvas = document.createElement('canvas'); canvas.width = img.width; canvas.height = img.height; context = canvas.getContext('2d'); context.drawImage(img, 0, 0); try { imageDataUrl = canvas.toDataURL('image/jpeg', 1.0); imageData = imageDataUrl.replace(/data:image\/jpeg;base64,/, ''); cordova.exec( success, error, 'Canvas2ImagePlugin', 'saveImageDataToLibrary', [imageData] ); } catch(e) { error(e.message); } }; try { img.src = url; } catch(e) { error(e.message); } } 

Use it as follows:

 var success = function(msg){ console.info(msg); }; var error = function(err){ console.error(err); }; saveImageToPhone('myimage.jpg', success, error);