Using the Camera APIs

<cfclientsettings enableDeviceAPI=true>

<cfclient>

<cffunction access="public" name="getPicCam" returntype="void" >
<cfset opt = cfclient.camera.getOptions()>
<cfset res = cfclient.camera.getPicture(opt,false)>
<cfset imgStr=cfclient.file.readAsBase64(res)>
<cfset document.getElementById('myimg').src=imgStr>
<cfset document.getElementById('fileName').innerHTML=res>
</cffunction>
</cfclient>
<div id="fileName"/>
<img style = "width:200; height:100;" id = "myimg"></img>
<button onclick="invokeCFClientFunction('getPicCam',null)">getPicture - JPEG</button>

<cfclientsettings enableDeviceAPI=true>

<cfclient>

<!--- Getting picture from device camera --->
<cffunction access="public" name="getPiccam" returntype="void" >
<cfset opt = cfclient.camera.getOptions()>
<cfset res = cfclient.camera.getPicture(opt,true)>
<cfset res='data:image/jpeg;base64,'+res>
<cfset document.getElementById('myimg').src=#res#>
</cffunction>

<!--- Getting picture from the album --->
<cffunction access="public" name="getPicalbm" returntype="void" >
<cfset opt = cfclient.camera.getOptions()>
<cfset res = cfclient.camera.getPictureFromAlbum(opt,true)>
<cfset res='data:image/jpeg;base64,'+res>
<cfset document.getElementById('myimg').src=#res#>
</cffunction>

<!--- Getting picture from the photo library --->
<cffunction access="public" name="getPiclib" returntype="void" >
<cfset opt = cfclient.camera.getOptions()>
<cfset res = cfclient.camera.getPictureFromPhotoLibrary(opt,true)>
<cfset res='data:image/jpeg;base64,'+res>
<cfset document.getElementById('myimg').src=#res#>
</cffunction>

</cfclient>
<img style = "width:300; height:300;" id = "myimg"></img>
<button onclick="invokeCFClientFunction('getPiccam',null)">Camera</button><br>
<button onclick="invokeCFClientFunction('getPicalbm',null)">album</button><br>
<button onclick="invokeCFClientFunction('getPiclib',null)">Library</button><br>

<cfclientsettings enableDeviceAPI=true>

<cfclient>
 
<cffunction access="public" name="setopt" returntype="void" >
<cfset options = {"quality" = "40", "encodingType" = "png"}>
<cfset cfclient.camera.setOptions(options)>
</cffunction>
 
<button onclick="invokeCFClientFunction('setopt',null)">Set Camera Options</button>

</cfclient>

<cfclientsettings enableDeviceAPI=true>

<cfclient>
 
<cffunction access="public" name="getopt" returntype="void" >
<cfset res = cfclient.camera.getOptions()>
</cffunction>
 
<button onclick="invokeCFClientFunction('getopt',null)">Get Camera Options</button>

</cfclient>

<cfclientsettings enableDeviceAPI=true>

<cfclient>
<cftry>
<cfset opt = cfclient.camera.getOptions()>
<cfset res = cfclient.camera.getPicture(opt,false)> 
<cfif !cfclient.file.directoryExists('mydir')> 
<cfset cfclient.file.createDirectory('mydir')>
</cfif>
<cfif opt.encodingtype eq "jpeg">
<cfset cfclient.file.copy(res,'mydir/img.jpg')>
<cfif cfclient.file.exists('mydir/img.jpg')>
<cfset filObj=cfclient.file.get('mydir/img.jpg')>
<cfset document.getElementById('result').innerHTML=#filObj.fullPath#>
</cfif>
<cfelse>
<cfset cfclient.file.copy(res,'mydir/img1.png')>
<cfif cfclient.file.exists('mydir/img1.png')>
<cfset filObj=cfclient.file.get('mydir/img1.png')>
<cfset document.getElementById('result').innerHTML=#filObj.fullPath#>
</cfif>
</cfif>
<cfcatch type="any">
<cfset alert(cfcatch.message)>
</cfcatch>
</cftry>

</cfclient>
<div id="result"/>

<cfclientsettings enableDeviceAPI=true>

<cfclient>
 
<cffunction access="public" name="cleanup" returntype="void" >
<cftry>
<cfset cfclient.camera.cleanup()>

<cfcatch type="any">
<cfset alert(cfcatch.message)>
</cfcatch>
</cftry>
</cffunction>
 
<button onclick="invokeCFClientFunction('cleanup',null)">Cleanup now</button><br><br>
 
</cfclient>