Page Comparison

Anchor
_Toc523144951 _Toc523144951

Canvas APIs for Managing Profile Pictures

Anchor
_Toc507680980 _Toc507680980

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.
Note: For your understanding, sample application screen shots from jQM have been provided in this section.
Before calling the APIs, set the following properties in the componentpreferences.properties file:

...

Note: If you want the images to be in a particular dimension, specify the dimension for the image element (<img>) in your CSS.

Anchor
_Toc523144952 _Toc523144952

Editing the Profile Picture
The traditional way of changing the profile picture is to click the picture and select a new one. However, now the profile picture pop-up window can be launched by calling the following API. After the profile picture window launches, click the Change button and select the profile picture from the file explorer and upload it.
canvas.editProfilePicture();

Anchor
_Toc507680981 _Toc507680981

Anchor
_Toc523144953 _Toc523144953

Getting the Profile Picture Source Data

Anchor
_GoBack _GoBack

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./

The source data obtained will be in base64 format as it has an advantage over the URL format while accessing the application in offline mode. The following is a sample base64 format:
data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDABsSFBcUERsXFhceHBsgKEMrKCUlKFI6PjBDYVVmZF9VXVxreJmCa3GRc1xdhbaHkZ6jrK2sZ4C8yrunyJmorKX/2wBDARweHigjKE4rK06lbl1upaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaX/wAARCAMABAADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJy=

Anchor
_Toc507680982 _Toc507680982

Anchor
_Toc523144954 _Toc523144954

Setting the Profile Picture with Source Data
To set a new profile picture, use the following API:
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");

The code has two arguments:

• 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.