UE4 converts the read PNG image data into UTexture2D and displays it

Ideas

1. Read the compressed image file from the hard disk into a binary array and obtain the compressed data;
2. Convert the compressed data to original RGB data using the GetRaw function in ImageWrapper;
3. Fill raw RGB data into UTexture2D.

Prepare

To process image types, you need to use the ImageWrapper module provided by UE. First, add the ImageWrapper module to project.Build.cs.

PublicDependencyModuleNames.AddRange(new string[] { "Core", "CoreUObject", "Engine", "InputCore", "ImageWrapper" });

ImageWrapper is an abstraction layer for all image types. Its design idea is as follows:

1. Image file data is compressed data, called CompressedData;
2. The original RGBA data corresponding to the image file is uncompressed and has nothing to do with the image format, and is called RawData;
3. For the same picture in different formats, its RawData remains unchanged, and CompressedData changes with the format;
4. All image formats can be abstracted as a combination of CompressedData and RawData.

code 

UFUNCTION(BlueprintCallable, Category = "ImagePlayer")
		static bool LoadImageToTexture2D(const FString& ImagePath, UTexture2D*& InTexture, int32& Width, int32& Height);

bool AImagePlayer::LoadImageToTexture2D(const FString& ImagePath, UTexture2D*& InTexture, int32& Width, int32& Height)
{
    if (!FPlatformFileManager::Get().GetPlatformFile().FileExists(*ImagePath))  //判断是否存在该文件
    {
        return false;
    }

    IImageWrapperModule& ImageWrapperModule = FModuleManager::LoadModuleChecked <IImageWrapperModule>(FName("ImageWrapper"));//启用"ImageWrapper"模型
    TSharedPtr<IImageWrapper> SourceImageWrapper = ImageWrapperModule.CreateImageWrapper(EImageFormat::PNG);//实例化ImageWrapper类，图片的类型为PNG


    TArray<uint8> SourceImageData;  //存储压缩的二进制图片数据
    if (!FFileHelper::LoadFileToArray(SourceImageData, *ImagePath)) //读取文件资源
    {
        return false;
    }


    if (SourceImageWrapper.IsValid() && SourceImageWrapper->SetCompressed(SourceImageData.GetData(), SourceImageData.GetAllocatedSize()))
    {
        TArray <uint8> UncompressedBGRA;    //存储未压缩的颜色数据，UE4用的颜色格式为BGRA
        if (SourceImageWrapper->GetRaw(ERGBFormat::BGRA, 8, UncompressedBGRA))  //获取未压缩的图片颜色信息，位深度为8
        {
            Height = SourceImageWrapper->GetHeight();	
            Width = SourceImageWrapper->GetWidth();

            InTexture = UTexture2D::CreateTransient(Width, Height, PF_B8G8R8A8);	//临时填充

            if (InTexture)
            {
                void* TextureData = InTexture->PlatformData->Mips[0].BulkData.Lock(LOCK_READ_WRITE);	//用自带方法"PlatformData"让InTexture和指针TextureData绑定(Lock)并且可读可写,因为下一行的复制函数中的参数要求为void*


                FMemory::Memcpy(TextureData, UncompressedBGRA.GetData(), UncompressedBGRA.Num());	//复制未压缩的颜色数据

                InTexture->PlatformData->Mips[0].BulkData.Unlock(); //将指针和InTexture解绑(unlock)

                InTexture->UpdateResource();    //刷新
                return true;
            }
        }
    }
    return false;

}

blueprint

Create a Widget Blueprint, name it ImageHUD, add an Image window, and check Size To Content.

 

Use the LoadImageToTexture2D function.

Create an ImageHUD in the Level Blueprint and add it to the viewport.

 Effect

 

reference 

"The Invisible Elephant: A Brief Analysis of Unreal Engine Programming"

Station B: UE4 Image Processing Tool Lecture 1: Reading image data from disk and converting it into UTexture2D