ImagePicker Introduction

ImagePicker is the object that imports images from the album of the mobile device.

Importing Images from Album

To import the image stored in the mobile device, use the open method of the ImagePicker object. The open method executes the default album app of the mobile device, allowing the user to convert and import images into the desired format. The image obtained by the open method execution is saved as a file in the path assigned to the app.

${sample}

The following is an example of importing the image from the album of the mobile device using the open method of the ImagePicker component.

To import the image, touch the OPEN button. The execution result is displayed in the tab at the bottom. The image is loaded in the Image tab and the result log can be checked in the Information tab.

If you want to import the image in a specific format, set the image transmission method, encoding type, quality, and size in the menu at the top.

• Imate Type: When "URL" is set, the location information of the image is transmitted in the form of a URL, and when "imagedata" is set, the image is transmitted in the form of the object. The result value can be checked in the e.imageurl and e.imagedata properties in the onsuccess event of the ImagePicker object.

• Encoding: It sets the image format to JPEG or PNG.

• Quality: It sets the image quality. The value that can be set is from 0 to 100.

• Width, Height: It sets the image size. When set to 0 or blank, it is set to the size of the original image.

${sample_element}

ImagePicker > open

This is the method that imports the image from the album by running the album app of the mobile device. The image selected in the album is changed according to the setting value, saved in the %USERAPP%/_resource_/_devicepics_/ path, and then transmitted in the form of a URL or object of the saved image.

ImagePickerEventInfo > imageurl

This is the property that has the path information of the selected image in the album. This property is valid only when the first argument value is set to 'URL' when executing the open method.

ImagePickerEventInfo > imagedata

This is the property that has the image selected in the album in the form of the object. This property is valid only when the first argument value is set to 'imagedata' when executing the open method.

system > convertRealPath

This is the method that converts the path containing the Alias, such as %USERAPP%, %CACHE%, into the actual absolute path.

${sample_step}

Add the ImagePicker object. The added object can be checked in the Invisible Object window.

Place the Static, Radio, Spin, and Edit components to configure the screen, and the Tab, ImageViewer, and TextArea components to output images and logs appropriately as shown in the example figure.

Components and objects used to configure the screen are as follows.

Write the function that will operate when the Open button is touched as follows.

this.btn_open_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.ImagePicker00.set_imagequality(this.spn_quality.value);
	this.ImagePicker00.set_imagewidth(this.edt_width.value);
	this.ImagePicker00.set_imageheight(this.edt_height.value);

	this.ImagePicker00.open(this.rdo_imageType.text, this.rdo_encodingType.text);
};

Set the image setting received from the user in the property of the ImagePicker object and call the open method.

When the open method is executed, the album app of the mobile device is executed. If the user selecting and opening the image in the album is successful, then the onsuccess event occurs, and if it fails, then the onerror event occurs.

• onsuccess Event Function

this.ImagePicker00_onsuccess = function(obj:nexacro.ImagePicker,e:nexacro.ImagePickerEventInfo)
{
	var strResult, strFilePath;

	strFilePath = system.convertRealPath(e.imageurl);
	
	this.Tab00.Tabpage1.form.ImageViewer00.set_image("file://" + strFilePath);

	strResult = "Image open succeed.\n";	
	strResult += "\n> Path: "+ strFilePath;
	strResult += "\n> Encoding Type: "+ this.ImagePicker00.encodingtype;
	strResult += "\n> Delivery Type: "+ this.ImagePicker00.gettype;
	
	this.Tab00.Tabpage2.form.TextArea00.set_value(strResult);
};

• onerror Event Function

this.ImagePicker00_onerror = function(obj:nexacro.ImagePicker,e:nexacro.ImagePickerErrorEventInfo)
{
	var strResult = "Image open failed.\n";
	strResult += "\n["+ e.errortype +" "+ e.statuscode +"] "+ e.errormsg;
	
	this.Tab00.Tabpage2.form.TextArea00.set_value(strResult);
};

Touch the OPEN button without changing the settings to check if the camera album app is running, and then select the image to check if the results are output correctly.

Check the results in the same method again after changing the settings.