Basic30天學會行動App-第17章.學習處理圖片與多媒體

16th鐵人賽 github

因田木

2024-09-17 00:00:24

173 瀏覽

分享至

第17章: 學習處理圖片與多媒體

在行動應用程式開發中，處理圖片和多媒體是常見的需求，無論是顯示圖片、拍攝照片、還是播放音樂和影片，都需要一定的技術掌握。本章將介紹如何在 B4A 中載入與顯示圖片、使用相機與相簿，以及播放音樂與影片。

載入與顯示圖片

圖片是應用程式介面設計的重要元素。B4A 提供了多種方式來載入和顯示圖片，無論是從本地資源還是從網路獲取圖片。

從資源檔案載入圖片
最簡單的方式是將圖片存放在應用程式的 Files 目錄下，然後在介面上使用 ImageView 控件來顯示圖片。

Sub LoadLocalImage
    Dim img As Bitmap
    img.Initialize(File.DirAssets, "sample_image.png")
    ImageView1.Bitmap = img
End Sub

這段程式碼示範了如何從應用程式資源中載入一張圖片並將其顯示在 ImageView 控件中。
2. 從網路載入圖片
在一些應用程式中，你可能需要從網路載入圖片。這時可以使用 HttpJob 來下載圖片並顯示。

Sub LoadImageFromURL
    Dim job As HttpJob
    job.Initialize("ImageJob", Me)
    job.Download("https://example.com/image.png")
End Sub

Sub JobDone (Job As HttpJob)
    If Job.Success And Job.JobName = "ImageJob" Then
        Dim img As Bitmap
        img.Initialize2(Job.GetInputStream)
        ImageView1.Bitmap = img
    End If
    Job.Release
End Sub

這段程式碼展示了如何從指定的 URL 載入圖片並顯示在 ImageView 控件中。

使用相機與相簿

行動設備上的相機功能為應用程式帶來了豐富的交互可能性，你可以讓使用者拍攝照片或從相簿中選取圖片。

使用相機拍攝照片
B4A 提供了 Camera 和 Camera2 兩種庫來使用相機。Camera2 是比較新的版本，提供更多的控制選項。

Sub TakePhoto
    Dim cam As Camera
    cam.Initialize("Camera1", Me)
    cam.TakePicture
End Sub

Sub Camera1_PictureTaken (Data() As Byte)
    Dim bmp As Bitmap
    bmp.Initialize2(Data)
    ImageView1.Bitmap = bmp
End Sub

這段程式碼展示了如何使用 Camera 來拍攝照片並顯示在 ImageView 控件中。
2. 從相簿中選取圖片
你也可以讓使用者從設備的相簿中選取圖片。

Sub ChooseFromGallery
    Dim intent As Intent
    intent.Initialize("android.intent.action.PICK", "image/*")
    StartActivityForResult(intent)
End Sub

Sub Activity_Result(ResultCode As Int, Intent As Intent)
    If ResultCode = -1 Then
        Dim uri As String = Intent.GetData
        Dim bmp As Bitmap
        bmp.Initialize(uri)
        ImageView1.Bitmap = bmp
    End If
End Sub

這段程式碼展示了如何從相簿中選取圖片並顯示在 ImageView 控件中。

播放音樂與影片

多媒體播放是豐富應用程式體驗的重要部分。B4A 提供了簡單的方式來播放音樂和影片。

播放音樂
使用 MediaPlayer 類別可以輕鬆地播放音樂檔案。

Sub PlayMusic
    Dim mp As MediaPlayer
    mp.Initialize
    mp.Load(File.DirAssets, "sample_music.mp3")
    mp.Play
End Sub

這段程式碼展示了如何載入並播放一首音樂。
2. 播放影片
使用 VideoView 控件可以播放影片檔案。

Sub PlayVideo
    VideoView1.LoadVideo(File.DirAssets, "sample_video.mp4")
    VideoView1.Play
End Sub

這段程式碼展示了如何在應用程式中播放影片。
範例程式：完整的多媒體應用
以下是整合以上功能的範例程式，展示如何在一個應用程式中同時處理圖片、相機與多媒體播放。

Sub Process_Globals
    ' 全域變數
End Sub

Sub Globals
    Dim ImageView1 As ImageView
    Dim VideoView1 As VideoView
    Dim btnLoadLocalImage As Button
    Dim btnLoadURLImage As Button
    Dim btnTakePhoto As Button
    Dim btnChooseFromGallery As Button
    Dim btnPlayMusic As Button
    Dim btnPlayVideo As Button
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("MainLayout")
    
    btnLoadLocalImage.Initialize("btnLoadLocalImage")
    btnLoadLocalImage.Text = "載入本地圖片"
    Activity.AddView(btnLoadLocalImage, 10, 10, 150, 50)
    
    btnLoadURLImage.Initialize("btnLoadURLImage")
    btnLoadURLImage.Text = "載入網路圖片"
    Activity.AddView(btnLoadURLImage, 170, 10, 150, 50)
    
    btnTakePhoto.Initialize("btnTakePhoto")
    btnTakePhoto.Text = "拍攝照片"
    Activity.AddView(btnTakePhoto, 10, 70, 150, 50)
    
    btnChooseFromGallery.Initialize("btnChooseFromGallery")
    btnChooseFromGallery.Text = "從相簿選取"
    Activity.AddView(btnChooseFromGallery, 170, 70, 150, 50)
    
    btnPlayMusic.Initialize("btnPlayMusic")
    btnPlayMusic.Text = "播放音樂"
    Activity.AddView(btnPlayMusic, 10, 130, 150, 50)
    
    btnPlayVideo.Initialize("btnPlayVideo")
    btnPlayVideo.Text = "播放影片"
    Activity.AddView(btnPlayVideo, 170, 130, 150, 50)
    
    ImageView1.Initialize("")
    Activity.AddView(ImageView1, 10, 190, 300, 300)
    
    VideoView1.Initialize("VideoView1")
    Activity.AddView(VideoView1, 10, 500, 300, 200)
End Sub

Sub btnLoadLocalImage_Click
    LoadLocalImage
End Sub

Sub btnLoadURLImage_Click
    LoadImageFromURL
End Sub

Sub btnTakePhoto_Click
    TakePhoto
End Sub

Sub btnChooseFromGallery_Click
    ChooseFromGallery
End Sub

Sub btnPlayMusic_Click
    PlayMusic
End Sub

Sub btnPlayVideo_Click
    PlayVideo
End Sub