Page Comparison

Now you can call the APIs listed in this section as per your requirements to manage profile pictures in the applications built using Canvas framework.

...

Before calling the APIs, set the following properties in the componentpreferences.properties file:

1. Specify the path of the user

   uplFor your understanding, sample application screen shots from jQM have been provided in this section.oad

   upload images for your application

   .
   Image RemovedSpecify the maximum size for the user image file in bytes.
   Image Removed
2. Specify the image formats, which can be uploaded by the user.

Image Removed

Editing the Profile Picture

...

1. .

...

1. 
   

   Code Block

...

canvas.editProfilePicture(); 

...

Getting the Profile Picture Source Data

To get the existing profile picture source data, use the following API:

canvas.getProfileImageSrc(function(src)
{
	console.log(src)
}); 
/Here, getProfileImageSrc() is the function which takes a callback function as the argument./ 

...

data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDABsSFBcUERsXFhceHBsgKEMrK
CUlKFI6PjBDYVVmZF9VXVxreJmCa3GRc1xdhbaHkZ6jrK2sZ4C8yrunyJmorKX/2wBDARweHigjKE4rK
06lbl1upaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaX/wAARC
AMABAADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEA
wUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0N
TY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp
6ipqrKztLW2t7i5usLDxMXGx8jJy=

Setting the Profile Picture with Source Data

...

canvas.setProfileImageSrc (<Image Source>, <Target ID to set the source>); 

Example

//Sample HTML image element is as follows:
	<img data-item-id="ct-pic" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD/==">

/Here, img is the image tag, data-item-id is the attribute (element ID), and Canvas default value for this attribute is 'ct-pic'. 
If you want the picture to display in the default picture placeholder (element ID) provided by Canvas, use 'ct-pic'. If you want the profile picture to be displayed anywhere else in your application, you must provide the unique value of your application's element ID (for example, myprofile-pic) in your template./
 
//Usage of the API based on the above HTML image element. The image here is set by providing the base64 format as the image source. 
	ct.setProfileImageSrc("data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD/===","ct-pic");
 
//Usage of the API based on the above HTML image element. The image here is set by providing the image URL format as the image source. 
	ct.setProfileImageSrc("http://localhost:7005/ctmodelhouse/images/imgpanel/myimage.jpg","ct-pic"); 

...

• Image source (argument 1): This is a mandatory argument. You must provide the data source in the base64 format or the URL format.
• Target ID to set the data source (argument 2): This is an optional argument. The image element data-item-id value is given as the argument.If you want the picture to display in the default picture placeholder (element ID) provided by Canvas, use 'ct-pic' as the argument. If you want the profile picture to be displayed anywhere else in your application, you must provide the unique value of your application's element ID (for example, myprofile-pic) in your template as the argument.

...

1. language bash

   ########################################################################################### # This property is used to define the path of the user uploaded images. # This should be a relative path with respect to the # root path that is configured as CT_WORK_CENTRALIZED_PATH in implementation property file. ########################################################################################### USER_IMAGES_FOLDER=/PictureUpload

   
   

2. Specify the maximum size for the user image file in bytes.

   Code Block
   language bash
   ###################################################################### # This Property is used to restrict the user uploaded images file size ###################################################################### USER_IMAGES_MAXSIZE=10485760

   
   

3. Specify the image formats, which can be uploaded by the user.

   Code Block
   language bash
   ############################################################################## # This property will define the user images formats which uploaded by the user. ############################################################################## USER_IMAGE_FORMATS=jpg,png,gif,jpeg

   
   

Refer the following pages: