Canvas APIs for Managing Profile Pictures
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:
- Specify the path of the user upload images for your application.
- Specify the maximum size for the user image file in bytes.
- Specify the image formats, which can be uploaded by the user.
Note: If you want the images to be in a particular dimension, specify the dimension for the image element (<img>) in your CSS.
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(); 
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./
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=
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.
