Encapsulating PAL/ImageData

@types/jsb.d.ts

@@ -339,6 +339,10 @@ declare namespace jsb {
         setVerifyCallback (verifyCallback: (path: string, asset: ManifestAsset) => boolean): void;
         setEventCallback (eventCallback: (event: EventAssetsManager) => void): void;
     }
+
+    export class JSBNativeDataHolder {
+
+    }
 }
 
 declare namespace ns {

@types/pal/image.d.ts

@@ -0,0 +1,47 @@
+declare module 'pal/image' {
+
+    export type ImageSource = import('pal/image/types').ImageSource;
+    export type IMemoryImageSource = import('pal/image/types').IMemoryImageSource;
+    export type PixelFormat = import('cocos/asset/assets/asset-enum').PixelFormat;
+    export type RawDataType = import('pal/image/types').RawDataType;
+    export class ImageData {
+        constructor (imageAsset?: ImageSource | ArrayBufferView);
+        /**
+         * Destroy resources.
+         */
+        destroy (): void;
+
+        /**
+         * Get and set image data source.
+         * @param value Image data source.
+         */
+        get source(): ImageSource;
+        set source(value: ImageSource);
+
+        /**
+         * Get image width.
+         */
+        get width(): number;
+
+        /**
+         * Get image height.
+         */
+        get height(): number;
+
+        /**
+         * Load image via local url or web url.
+         */
+        static loadImage (urlAndBase64: string): Promise<ImageData>
+
+        /**
+         * Get raw image data, in web platform is image source(like data interface), in native platform is image raw data.
+         */
+        getRawData (): RawDataType | null;
+
+        /**
+         * Set image data source.
+         * @param data Image data source.
+         */
+        reset(data?: ImageSource | ArrayBufferView): void;
+    }
+}

cc.config.json

@@ -300,7 +300,8 @@
                 "pal/input": "pal/input/web/index.ts",
                 "pal/env": "pal/env/web/env.ts",
                 "pal/pacer": "pal/pacer/pacer-web.ts",
-                "pal/wasm": "pal/wasm/wasm-web.ts"
+                "pal/wasm": "pal/wasm/wasm-web.ts",
+                "pal/image":"pal/image/web/image-data.ts"
             }
         },
         {
@@ -314,7 +315,8 @@
                 "pal/input": "pal/input/native/index.ts",
                 "pal/env": "pal/env/native/env.ts",
                 "pal/pacer": "pal/pacer/pacer-native.ts",
-                "pal/wasm": "pal/wasm/wasm-native.ts"
+                "pal/wasm": "pal/wasm/wasm-native.ts",
+                "pal/image":"pal/image/native/image-data.ts"
             }
         },
         {
@@ -328,7 +330,8 @@
                 "pal/input": "pal/input/minigame/index.ts",
                 "pal/env": "pal/env/minigame/env.ts",
                 "pal/pacer": "pal/pacer/pacer-minigame.ts",
-                "pal/wasm": "pal/wasm/wasm-minigame.ts"
+                "pal/wasm": "pal/wasm/wasm-minigame.ts",
+                "pal/image":"pal/image/minigame/image-data.ts"
             }
         },
         {
@@ -342,7 +345,8 @@
                 "pal/input": "pal/input/minigame/index.ts",
                 "pal/env": "pal/env/runtime/env.ts",
                 "pal/pacer": "pal/pacer/pacer-minigame.ts",
-                "pal/wasm": "pal/wasm/wasm-minigame.ts"
+                "pal/wasm": "pal/wasm/wasm-minigame.ts",
+                "pal/image":"pal/image/minigame/image-data.ts"
             }
         },
         {

cocos/2d/assembler/label/font-utils.ts

@@ -260,7 +260,7 @@ export class LetterRenderTexture extends Texture2D {
         region.texOffset.y = y;
         region.texExtent.width = image.width;
         region.texExtent.height = image.height;
-        gfxDevice.copyTexImagesToTexture([image.data as HTMLCanvasElement], gfxTexture, [region]);
+        gfxDevice.copyImagesToTexture([image], gfxTexture, [region]);
     }
 }
 

cocos/2d/assets/sprite-frame.ts

@@ -27,10 +27,11 @@
 
 import { ccclass } from 'cc.decorator';
 import { EDITOR, TEST, BUILD } from 'internal:constants';
+import { IMemoryImageSource } from '../../../pal/image/types';
 import { Mat4, Rect, Size, Vec2, Vec3, Vec4, cclegacy, errorID, warnID, js } from '../../core';
 import { Asset } from '../../asset/assets/asset';
 import { TextureBase } from '../../asset/assets/texture-base';
-import { ImageAsset, ImageSource } from '../../asset/assets/image-asset';
+import { ImageAsset } from '../../asset/assets/image-asset';
 import { Texture2D } from '../../asset/assets/texture-2d';
 import { dynamicAtlasManager } from '../utils/dynamic-atlas/atlas-manager';
 import { Mesh } from '../../3d/assets/mesh';
@@ -248,9 +249,19 @@ export class SpriteFrame extends Asset {
      * @param imageSourceOrImageAsset @en ImageAsset or ImageSource, ImageSource could be HTMLCanvasElement, HTMLImageElement, IMemoryImageSource.
      *                                @zh 图像资源或图像原始图像源，图像原始图像源支持 HTMLCanvasElement HTMLImageElement IMemoryImageSource 三种资源。
      * @returns @en SpriteFrame asset. @zh 精灵资源。
+     * @deprecated @en Recommended use of the ImageAsset object. @zh 推荐使用ImageAsset对象
      */
-    public static createWithImage (imageSourceOrImageAsset: ImageSource | ImageAsset): SpriteFrame {
-        const img = imageSourceOrImageAsset instanceof ImageAsset ? imageSourceOrImageAsset : new ImageAsset(imageSourceOrImageAsset);
+    public static createWithImage (imageSourceOrImageAsset: HTMLCanvasElement | HTMLImageElement | ImageBitmap): SpriteFrame;
+    /**
+     * @en Create a SpriteFrame object by an image asset or an native image asset.
+     * @zh 通过 Image 资源或者平台相关 Image 对象创建一个 SpriteFrame 资源。
+     * @param imageSourceOrImageAsset @en ImageAsset or ImageSource, ImageSource could be HTMLCanvasElement, HTMLImageElement, IMemoryImageSource.
+     *                                @zh 图像资源或图像原始图像源，图像原始图像源支持 HTMLCanvasElement HTMLImageElement IMemoryImageSource 三种资源。
+     * @returns @en SpriteFrame asset. @zh 精灵资源。
+     */
+    public static createWithImage (imageSourceOrImageAsset: ImageAsset | IMemoryImageSource): SpriteFrame;
+    public static createWithImage (imageSourceOrImageAsset: ImageAsset | IMemoryImageSource | HTMLCanvasElement | HTMLImageElement | ImageBitmap): SpriteFrame {
+        const img = imageSourceOrImageAsset instanceof ImageAsset ? imageSourceOrImageAsset : new ImageAsset(imageSourceOrImageAsset as IMemoryImageSource);
         const tex = new Texture2D();
         tex.image = img;
         const spf = new SpriteFrame();

cocos/2d/utils/dynamic-atlas/atlas.ts

@@ -263,6 +263,6 @@ export class DynamicAtlasTexture extends Texture2D {
         region.texOffset.y = y;
         region.texExtent.width = image.width;
         region.texExtent.height = image.height;
-        gfxDevice.copyTexImagesToTexture([image.data as HTMLCanvasElement], gfxTexture, [region]);
+        gfxDevice.copyImagesToTexture([image], gfxTexture, [region]);
     }
 }

cocos/3d/skinned-mesh-renderer/skinned-mesh-batch-renderer.ts

@@ -36,6 +36,7 @@ import { CCString, Mat4, Vec2, Vec3, cclegacy, warn } from '../../core';
 import { AttributeName, FormatInfos, Format, Type, Attribute, BufferTextureCopy } from '../../gfx';
 import { mapBuffer, readBuffer, writeBuffer } from '../misc/buffer';
 import { SkinnedMeshRenderer } from './skinned-mesh-renderer';
+import { ImageAsset } from '../../asset/assets';
 
 const repeat = (n: number): number => n - Math.floor(n);
 const batch_id: Attribute = new Attribute(AttributeName.ATTR_BATCH_ID, Format.R32F);
@@ -453,9 +454,8 @@ export class SkinnedMeshBatchRenderer extends SkinnedMeshRenderer {
     }
 
     protected cookTextures (target: Texture2D, prop: string, passIdx: number): void {
-        const texImages: TexImageSource[] = [];
+        const texImages: ImageAsset[] = [];
         const texImageRegions: BufferTextureCopy[] = [];
-        const texBuffers: ArrayBufferView[] = [];
         const texBufferRegions: BufferTextureCopy[] = [];
         for (let u = 0; u < this.units.length; u++) {
             const unit = this.units[u];
@@ -467,20 +467,13 @@ export class SkinnedMeshBatchRenderer extends SkinnedMeshRenderer {
                 region.texOffset.y = unit.offset.y * this.atlasSize;
                 region.texExtent.width = unit.size.x * this.atlasSize;
                 region.texExtent.height = unit.size.y * this.atlasSize;
-                const { data } = partial.image;
-                if (!ArrayBuffer.isView(data)) {
-                    texImages.push(data);
-                    texImageRegions.push(region);
-                } else {
-                    texBuffers.push(data);
-                    texBufferRegions.push(region);
-                }
+                texImages.push(partial.image);
+                texImageRegions.push(region);
             }
         }
         const gfxTex = target.getGFXTexture()!;
         const { device } = cclegacy.director.root!;
-        if (texBuffers.length > 0) { device.copyBuffersToTexture(texBuffers, gfxTex, texBufferRegions); }
-        if (texImages.length > 0) { device.copyTexImagesToTexture(texImages, gfxTex, texImageRegions); }
+        if (texImages.length > 0) { device.copyImagesToTexture(texImages, gfxTex, texImageRegions); }
     }
 
     protected createTexture (prop: string): Texture2D {

cocos/asset/asset-manager/builtin-res-mgr.jsb.ts

@@ -24,7 +24,7 @@
 
 import { TEST, EDITOR, EDITOR_NOT_IN_PREVIEW } from 'internal:constants';
 import { SpriteFrame } from '../../2d/assets/sprite-frame';
-import type { ImageSource } from '../assets/image-asset';
+import type { IMemoryImageSource } from '../../../pal/image/types';
 import assetManager from '../asset-manager/asset-manager';
 import { BuiltinBundleName } from '../asset-manager/shared';
 import Bundle from '../asset-manager/bundle';
@@ -56,7 +56,7 @@ builtinResMgrProto.init = function () {
         blackValueView[offset + 3] = 255;
     }
 
-    const blackMemImageSource: ImageSource = {
+    const blackMemImageSource: IMemoryImageSource = {
         width: len,
         height: len,
         _data: blackValueView,

cocos/asset/asset-manager/builtin-res-mgr.ts

@@ -23,8 +23,9 @@
 */
 
 import { EDITOR, EDITOR_NOT_IN_PREVIEW, TEST } from 'internal:constants';
+import { IMemoryImageSource } from '../../../pal/image/types';
 import { Asset } from '../assets/asset';
-import { ImageAsset, ImageSource } from '../assets/image-asset';
+import { ImageAsset } from '../assets/image-asset';
 import { SpriteFrame } from '../../2d/assets/sprite-frame';
 import { Texture2D } from '../assets/texture-2d';
 import { TextureCube } from '../assets/texture-cube';
@@ -119,47 +120,47 @@ export class BuiltinResMgr {
             offset += halfDefaultSize * numChannels;
         }
 
-        const blackMemImageSource: ImageSource = {
+        const blackMemImageSource: IMemoryImageSource = {
             width: len,
             height: len,
             _data: blackValueView,
             _compressed: false,
             format: Texture2D.PixelFormat.RGBA8888,
         };
 
-        const emptyMemImageSource: ImageSource = {
+        const emptyMemImageSource: IMemoryImageSource = {
             width: len,
             height: len,
             _data: emptyValueView,
             _compressed: false,
             format: Texture2D.PixelFormat.RGBA8888,
         };
 
-        const greyMemImageSource: ImageSource = {
+        const greyMemImageSource: IMemoryImageSource = {
             width: len,
             height: len,
             _data: greyValueView,
             _compressed: false,
             format: Texture2D.PixelFormat.RGBA8888,
         };
 
-        const whiteMemImageSource: ImageSource = {
+        const whiteMemImageSource: IMemoryImageSource = {
             width: len,
             height: len,
             _data: whiteValueView,
             _compressed: false,
             format: Texture2D.PixelFormat.RGBA8888,
         };
 
-        const normalMemImageSource: ImageSource = {
+        const normalMemImageSource: IMemoryImageSource = {
             width: len,
             height: len,
             _data: normalValueView,
             _compressed: false,
             format: Texture2D.PixelFormat.RGBA8888,
         };
 
-        const defaultMemImageSource: ImageSource = {
+        const defaultMemImageSource: IMemoryImageSource = {
             width: defaultSize,
             height: defaultSize,
             _data: defaultValueView,

cocos/asset/asset-manager/download-dom-image.ts

@@ -23,36 +23,16 @@
  THE SOFTWARE.
 */
 
-import { XIAOMI } from 'internal:constants';
-import { getError } from '../../core';
-import { ccwindow } from '../../core/global-exports';
+import { ImageData } from 'pal/image';
 
 export default function downloadDomImage (
     url: string,
     options: Record<string, any>,
-    onComplete: ((err: Error | null, data?: HTMLImageElement | null) => void),
-): HTMLImageElement {
-    const img = new ccwindow.Image();
-
-    // NOTE: on xiaomi platform, we need to force setting img.crossOrigin as 'anonymous'
-    if (ccwindow.location.protocol !== 'file:' || XIAOMI) {
-        img.crossOrigin = 'anonymous';
-    }
-
-    function loadCallback (): void {
-        img.removeEventListener('load', loadCallback);
-        img.removeEventListener('error', errorCallback);
-        if (onComplete) { onComplete(null, img); }
-    }
-
-    function errorCallback (): void {
-        img.removeEventListener('load', loadCallback);
-        img.removeEventListener('error', errorCallback);
-        if (onComplete) { onComplete(new Error(getError(4930, url))); }
-    }
-
-    img.addEventListener('load', loadCallback);
-    img.addEventListener('error', errorCallback);
-    img.src = url;
-    return img;
+    onComplete: ((err: Error | null, data?: ImageData | null) => void),
+): void {
+    ImageData.loadImage(url).then((imageData) => {
+        onComplete(null, imageData);
+    }).catch((err: Error) => {
+        onComplete(err);
+    });
 }

cocos/asset/asset-manager/downloader.ts

@@ -25,13 +25,13 @@
 import { BUILD, EDITOR, EDITOR_NOT_IN_PREVIEW } from 'internal:constants';
 import { sys, js, misc, path, cclegacy } from '../../core';
 import Cache from './cache';
-import downloadDomImage from './download-dom-image';
 import downloadFile from './download-file';
 import downloadScript from './download-script';
 import { files } from './shared';
 import { retry, RetryFunction, urlAppendTimestamp } from './utilities';
 import { IConfigOption } from './config';
 import { CCON, parseCCONJson, decodeCCONBinary } from '../../serialization/ccon';
+import downloadDomImage from './download-dom-image';
 
 export type DownloadHandler = (url: string, options: Record<string, any>, onComplete: ((err: Error | null, data?: any | null) => void)) => void;
 
@@ -47,7 +47,7 @@ interface IDownloadRequest {
 const REGEX = /^(?:\w+:\/\/|\.+\/).+/;
 
 const downloadImage = (url: string, options: Record<string, any>, onComplete: ((err: Error | null, data?: any | null) => void)): void => {
-    // if createImageBitmap is valid, we can transform blob to ImageBitmap. Otherwise, just use HTMLImageElement to load
+    // if createImageBitmap is valid, we can transform blob to ImageBitmap. Otherwise, just use ImageData to load
     const func = sys.hasFeature(sys.Feature.IMAGE_BITMAP) && cclegacy.assetManager.allowImageBitmap ? downloadBlob : downloadDomImage;
     func(url, options, onComplete);
 };

cocos/asset/asset-manager/factory.ts

@@ -23,6 +23,7 @@
 */
 
 import { EDITOR } from 'internal:constants';
+import { ImageData } from 'pal/image';
 import { ImageAsset } from '../assets/image-asset';
 import JsonAsset from '../assets/json-asset';
 import { TextAsset } from '../assets/text-asset';
@@ -39,13 +40,13 @@ import { js } from '../../core';
 
 export type CreateHandler = (id: string, data: any, options: Record<string, any>, onComplete: ((err: Error | null, data?: Asset | Bundle | null) => void)) => void;
 
-function createImageAsset (id: string, data: HTMLImageElement, options: Record<string, any>, onComplete: ((err: Error | null, data?: ImageAsset | null) => void)): void {
+function createImageAsset (id: string, imageData: ImageData, options: Record<string, any>, onComplete: ((err: Error | null, data?: ImageAsset | null) => void)): void {
     let out: ImageAsset | null = null;
     let err: Error | null = null;
     try {
         out = new ImageAsset();
         out._nativeUrl = id;
-        out._nativeAsset = data;
+        out._nativeAsset = imageData;
     } catch (e) {
         err = e as Error;
     }

cocos/asset/asset-manager/parser.ts

@@ -22,7 +22,9 @@
  THE SOFTWARE.
 */
 
-import { ImageAsset, IMemoryImageSource } from '../assets/image-asset';
+import { ImageData } from 'pal/image';
+import { IMemoryImageSource } from '../../../pal/image/types';
+import { ImageAsset } from '../assets/image-asset';
 import { js, warn } from '../../core';
 import Cache from './cache';
 import deserialize from './deserialize';
@@ -80,14 +82,14 @@ export class Parser {
     /**
      * @engineInternal
      */
-    public parseImage (file: HTMLImageElement | Blob, options: Record<string, any>, onComplete: ((err: Error | null, data?: HTMLImageElement | ImageBitmap | null) => void)): void {
-        if (file instanceof HTMLImageElement) {
+    public parseImage (file: ImageData | Blob, options: Record<string, any>, onComplete: ((err: Error | null, data?: ImageData | null) => void)): void {
+        if (file instanceof ImageData) {
             onComplete(null, file);
             return;
         }
         createImageBitmap(file, { premultiplyAlpha: 'none' }).then((result): void => {
-            onComplete(null, result);
-        }, (err): void => {
+            onComplete(null, new ImageData(result));
+        }, (err: Error): void => {
             onComplete(err, null);
         });
     }