Image Quick Actions

Each Image Quick Actions component is loaded into the host application as an iframe, like the Express editor component. It can be launched with an image asset attached (jpg/png). If no input asset is provided, the modal will automatically prompt the user to browse their device for a image file.

openQuickAction()

After the SDK has been initialized, the CCEverywhere object exposes these Image Quick Actions via the openQuickAction() method.

ccEverywhere.openQuickAction(
    // QuickActionsParams
    {
        id: 'image-crop', 
        inputParams: {
            exportOptions: []
        },
        callbacks: {
            onCancel: () => {},
            onError: (err) => {},
            onLoadStart: () => {},
            onLoad: () => {},
            onPublishStart: () => {},
            onPublish: (publishParams) => {},
        },
        modalParams: {},
    }
)
Copied to your clipboard
1ccEverywhere.openQuickAction(
2    // QuickActionsParams
3    {
4        id: 'image-crop', 
5        inputParams: {
6            exportOptions: []
7        },
8        callbacks: {
9            onCancel: () => {},
10            onError: (err) => {},
11            onLoadStart: () => {},
12            onLoad: () => {},
13            onPublishStart: () => {},
14            onPublish: (publishParams) => {},
15        },
16        modalParams: {},
17    }
18)

QuickActionParams

openQuickAction() takes an object QuickActionParams with 4 parameters:

Property	Description	Type
id	Choose Quick Actions component	QuickActionId
inputParams	Launch with asset and export options	QuickActionInputParams
callbacks	Callback functions	Callbacks
modalParams	Define size of QA iframe	ModalParams

Only id and inputParams.exportOptions is required to initialize the iframe.

QuickActionId

Identifies which Image Quick Actions component should be loaded into the iframe.

Quick Action	QuickActionId
Crop Image	'image-crop'
Convert to JPG	'convert-to-jpg'
Convert to PNG	'convert-to-png'
Resize Image	'image-resize'
Remove Background	'remove-background'

Example

Step 1a: User uploads an image asset, and clicks the "Image Crop" button.

After a user uploads an image, a FileReader object is instantiated and converts the file to a base64 data type and saves it to the variable "imageUrl".
This imageUrl is passed as inputParams.asset when the openQuickAction() method is called.
The Image Crop QA Component is launched in an iframe, and the user can crop the uploaded image as they wish.

Step 1b: User clicks the "Image Crop" button, with no asset attached.

The Image Crop QA component is launched in an iframe. The user will have to browse for an image asset to perform the image crop on.

Step 2: Export Modified Asset

Finally, users can choose between 3 export options:

Customize: to continue designing in a CC Express editor component
Download: to save the asset
Custom button that targets host app

<!DOCTYPE html>
<html lang="en">
  <head>
  <title>Quick Actions</title>
  </head>
    
  <body>
    <h1> Image Quick Action Example </h1>
    <input type="file" id="fileInput" />
    <img id="image-container" height="420" width="420" />
    <button id="image-crop"> Crop Image </button>

    <script src="https://sdk.cc-embed.adobe.com/v1/CCEverywhere.js"></script>
    <script type="text/javascript" >

    const PROJECT_NAME = 'cc everywhere';
    /* file: user uploaded file
    imageUrl: base64 representation we pass into QA function */
    var file, encodedImage;
    /*  appImage is the image container displayed in sample */
    var appImage = document.getElementById('image-container');

    /* This event listener checks to see if the user uploads a new file and reads it into base64 data type for SDK ingestion later */
    
    document.getElementById('fileInput')
    .addEventListener('change', (e) => {
        const reader = new FileReader();
        file = e.target.files[0];
        /* reads file into base 64 data type */
        reader.readAsDataURL(file);
        reader.onload = () => {
            encodedImage = reader.result;
        }
        reader.onerror = (error) => {
            console.log('error', error);
        };
    })

    var ccEverywhere = window.CCEverywhere.initialize(
        {
            clientId: YOUR_CLIENT_ID,
            appName: PROJECT_NAME,
            appVersion: { major: 1, minor: 0 },
            platformCategory: 'web',
            redirectUri: YOUR_REDIRECT_URI
        }
    );

    const exportOptions = [
        /* Customize export button */
        {
            target: 'Editor',
            variant: 'cta',
            optionType: 'button',
            buttonType: 'native'
        },
        /* Download export button */
        {
            target: 'Download',
            variant: 'primary',
            optionType: 'button',
            buttonType: 'native'
        },
        /* Custom implementation in onPublish callback */
        {
            target: 'Host',
            id: 'save-to-host-app',
            label: 'Embed in app',
            variant: 'cta',
            optionType: 'button',
            buttonType: 'custom'
        }
    ];

    const callbacks = {
        onCancel: () => {},
        onPublish: (publishParams) => {
            if(publishParams.exportButtonId=="save-to-host-app"){
                appImage.src = publishParams.asset.data;
                appImage.style.visibility="visible";
            }
        },
        onError: (err) => {
            console.error('Error received is', err.toString())
        }
    }

    document.getElementById('image-crop')
    .addEventListener('click', () => {
        ccEverywhere.openQuickAction({
            id: 'image-crop', 
            inputParams: {
                asset: {
                    data: encodedImage, 
                    dataType: 'base64', 
                    type: 'image'
                }, 
                exportOptions: exportOptions
            },
            callbacks: callbacks,
            modalParams: {},
        })
    })
    </script>
  </body> 
</html>
Copied to your clipboard
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4  <title>Quick Actions</title>
5  </head>
6    
7  <body>
8    <h1> Image Quick Action Example </h1>
9    <input type="file" id="fileInput" />
10    <img id="image-container" height="420" width="420" />
11    <button id="image-crop"> Crop Image </button>
12
13    <script src="https://sdk.cc-embed.adobe.com/v1/CCEverywhere.js"></script>
14    <script type="text/javascript" >
15
16    const PROJECT_NAME = 'cc everywhere';
17    /* file: user uploaded file
18    imageUrl: base64 representation we pass into QA function */
19    var file, encodedImage;
20    /*  appImage is the image container displayed in sample */
21    var appImage = document.getElementById('image-container');
22
23    /* This event listener checks to see if the user uploads a new file and reads it into base64 data type for SDK ingestion later */
24    
25    document.getElementById('fileInput')
26    .addEventListener('change', (e) => {
27        const reader = new FileReader();
28        file = e.target.files[0];
29        /* reads file into base 64 data type */
30        reader.readAsDataURL(file);
31        reader.onload = () => {
32            encodedImage = reader.result;
33        }
34        reader.onerror = (error) => {
35            console.log('error', error);
36        };
37    })
38
39    var ccEverywhere = window.CCEverywhere.initialize(
40        {
41            clientId: YOUR_CLIENT_ID,
42            appName: PROJECT_NAME,
43            appVersion: { major: 1, minor: 0 },
44            platformCategory: 'web',
45            redirectUri: YOUR_REDIRECT_URI
46        }
47    );
48
49    const exportOptions = [
50        /* Customize export button */
51        {
52            target: 'Editor',
53            variant: 'cta',
54            optionType: 'button',
55            buttonType: 'native'
56        },
57        /* Download export button */
58        {
59            target: 'Download',
60            variant: 'primary',
61            optionType: 'button',
62            buttonType: 'native'
63        },
64        /* Custom implementation in onPublish callback */
65        {
66            target: 'Host',
67            id: 'save-to-host-app',
68            label: 'Embed in app',
69            variant: 'cta',
70            optionType: 'button',
71            buttonType: 'custom'
72        }
73    ];
74
75    const callbacks = {
76        onCancel: () => {},
77        onPublish: (publishParams) => {
78            if(publishParams.exportButtonId=="save-to-host-app"){
79                appImage.src = publishParams.asset.data;
80                appImage.style.visibility="visible";
81            }
82        },
83        onError: (err) => {
84            console.error('Error received is', err.toString())
85        }
86    }
87
88    document.getElementById('image-crop')
89    .addEventListener('click', () => {
90        ccEverywhere.openQuickAction({
91            id: 'image-crop', 
92            inputParams: {
93                asset: {
94                    data: encodedImage, 
95                    dataType: 'base64', 
96                    type: 'image'
97                }, 
98                exportOptions: exportOptions
99            },
100            callbacks: callbacks,
101            modalParams: {},
102        })
103    })
104    </script>
105  </body> 
106</html>