Access to the album picture presentation
In application development, many scenarios require that we need to access the images in the album. For example: uploading avatar, uploading bank card, ID card information, scanning document function, beauty function, etc.
That's why accessing pictures in albums has become something we have to learn and master. So how to access album pictures?
In HarmonyOS, given the high level of protection of user privacy, it is extremely complicated to review permissions to fully read and write albums easily. Fortunately, HarmonyOS has also taken into account that reading albums is a very common feature for developers, and thus provides aphotoAccessHelperinnerPhotoViewPickerto help developersNo need to obtain complex permissionscase to read the contents of the album.
Usage
-
Import the album management module.
import { photoAccessHelper } from '@';
-
Instantiate the PhotoViewPicker object (a.k.a. the picture picker object)
let photoPicker = new ();
-
Call the select method of the above object to select the image
({ // Pass in a file type that can be selected, in this case an image type MIMEType: .IMAGE_TYPE, // set the number of files that can be selected. // Set the number of files that can be selected maxSelectNumber: 1 }) .then((res: ) => { (('')) }) .catch((err: Error) => { // Error callback () }) })
Here you can see that the select method is called with two parameters: MIMEType, maxSelectNumber
MIMEType sets which types of media files can be selected, the available values are
- IMAGE_TYPE: the type of the image, i.e.
'image/*'
- VIDEO_TYPE: the type of video, i.e.
'video/*'
- IMAGE_VIDEO_TYPE: all types are allowed, ie:
'*/*'
- MOVING_PHOTO_IMAGE_TYPE: the type of the moving photo (live image), i.e.
'image/movingPhoto'
maxSelectNumber is better understood, is to set how many can be selected.If you don't set the default to 50, you can only set a maximum of 500
- IMAGE_TYPE: the type of the image, i.e.
-
The select method is wrapped in Promise, so there are two states after the call, success goes to then and failure goes to catch.
Entering then means that the image was read successfully, and the result of the read was
PhotoSelectResult
of type, this type has a very important property of:photoUris
It is an array that holds the temporary path of the selected resource, like our code above, the maximum allowed to select only 1 image, so take the subscript 0 that is the selected image or video
Test it with a small interface
Above we have learned its basic use, we use a small interface to test it. The interface only needs to place an Image to display the selected image, and a button to select the image, the code is as follows
// Import the required tools
import { photoAccessHelper } from '@'
@Entry
@Component
struct Index {
// Save the scored image in a variable.
@State imgUri: string = ''
build() {
Column() {
// Display the image
Image()
.height('45%')
// Select image
Button('Select Image')
.width('80%')
.onClick(() => {
// Instantiate the selector
let photoPicker = new ()
// Start selecting images, set it to only allow images to be selected and to select a maximum of 1 image
({
MIMEType: .IMAGE_TYPE,
maxSelectNumber: 1
})
.then((res: ) => {
// Successful reading assigns the value to the variable to display to the interface.
= [0]
})
.catch((err: Error) => {
// Error callback
()
})
})
}
.width('100%')
.height('100%')
}
}
The final result is as follows: the success of the cat Lin teacher's photo show out!
summarize
- If you need to let the app read the images in the system gallery without applying permissions, you need to use the
photoAccessHelper
- It's very easy to use, just instantiate the
PhotoViewPicker
object before calling theselect
Methods can be - Next articleMr. Catlin shows you how to write photos to the gallery without applying permissions.