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.
...
| Info |
|---|
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.
| Code Block |
|---|
canvas.editProfilePicture(); |
...
Getting the Profile Picture Source Data
To get the existing profile picture source data, use the following API:
| Code Block | ||
|---|---|---|
| ||
canvas.getProfileImageSrc(function(src)
{
console.log(src)
});
/Here, getProfileImageSrc() is the function which takes a callback function as the argument./ |
...
| Code Block | ||
|---|---|---|
| ||
data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDABsSFBcUERsXFhceHBsgKEMrK
CUlKFI6PjBDYVVmZF9VXVxreJmCa3GRc1xdhbaHkZ6jrK2sZ4C8yrunyJmorKX/2wBDARweHigjKE4rK
06lbl1upaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaX/wAARC
AMABAADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEA
wUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0N
TY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp
6ipqrKztLW2t7i5usLDxMXGx8jJy= |
Setting the Profile Picture with Source Data
...
| Code Block |
|---|
canvas.setProfileImageSrc (<Image Source>, <Target ID to set the source>); |
Example
- 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.
...
| Code Block |
|---|
| //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"); |
...