1# Creating a Media Asset Using SaveButton
2
3This topic walks you through on how to create an image using the **SaveButton** security component. When **SaveButton** is used to create a media asset, the caller does not need to have the ohos.permission.WRITE_IMAGEVIDEO permission. For details, see [SaveButton](../../reference/apis-arkui/arkui-ts/ts-security-components-savebutton.md).
4
5**How to Develop**
6
71. Set the attributes of the security component.
82. Create a button with the security component.
93. Use [MediaAssetChangeRequest.createImageAssetRequest](../../reference/apis-media-library-kit/js-apis-photoAccessHelper.md#createimageassetrequest11) and [PhotoAccessHelper.applyChanges](../../reference/apis-media-library-kit/js-apis-photoAccessHelper.md#applychanges11) to create an image asset.
10
11```ts
12import { photoAccessHelper } from '@kit.MediaLibraryKit';
13
14@Entry
15@Component
16struct Index {
17  @State message: string = 'Hello World'
18  @State saveButtonOptions: SaveButtonOptions = {
19    icon: SaveIconStyle.FULL_FILLED,
20    text: SaveDescription.SAVE_IMAGE,
21    buttonType: ButtonType.Capsule
22  } // Set the attributes of the security component.
23
24  build() {
25    Row() {
26      Column() {
27        Text(this.message)
28          .fontSize(50)
29          .fontWeight(FontWeight.Bold)
30        SaveButton(this.saveButtonOptions) // Create a security component.
31          .onClick(async (event, result: SaveButtonOnClickResult) => {
32             if (result == SaveButtonOnClickResult.SUCCESS) {
33               try {
34                 let context = getContext();
35                 let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(context);
36                 // Ensure that the asset specified by fileUri exists.
37                 let fileUri = 'file://com.example.temptest/data/storage/el2/base/haps/entry/files/test.jpg';
38                 let assetChangeRequest: photoAccessHelper.MediaAssetChangeRequest = photoAccessHelper.MediaAssetChangeRequest.createImageAssetRequest(context, fileUri);
39                 await phAccessHelper.applyChanges(assetChangeRequest);
40                 console.info('createAsset successfully, uri: ' + assetChangeRequest.getAsset().uri);
41               } catch (err) {
42                 console.error(`create asset failed with error: ${err.code}, ${err.message}`);
43               }
44             } else {
45               console.error('SaveButtonOnClickResult create asset failed');
46             }
47          })
48      }
49      .width('100%')
50    }
51    .height('100%')
52  }
53}
54```
55