cocos · minggo · Aug 14, 2023 · Jun 6, 2023 · Jun 20, 2023 · Jun 20, 2023
diff --git a/@types/jsb.d.ts b/@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 {

diff --git a/@types/pal/image.d.ts b/@types/pal/image.d.ts
@@ -0,0 +1,49 @@
+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 (source?: ImageSource | ArrayBufferView);
+        /**
+         * Destroy resources.
+         */
+        destroy (): void;
+
+        /**
+         * @en Get raw image data.Return `ImageBitmap` if source is `ImageBitmap`.
+         * @zh 获取原始图像数据。如果source是`ImageBitmap`类型，则返回ImageBitmap。
+         */
+        get data(): RawDataType | null;
+
+        /**
+         * Get and set image data source.
+         * @param value Image data source.
+         * @engineinternal
+         */
+        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>
+
+        /**
+         * Set image data source.
+         * @param data Image data source.
+         */
+        reset(data?: ImageSource | ArrayBufferView): void;
+    }
+}
diff --git a/cc.config.json b/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"
             }
         },
         {

diff --git a/cocos/2d/assembler/label/font-utils.ts b/cocos/2d/assembler/label/font-utils.ts
@@ -23,7 +23,7 @@
 */
 
 import { FontAtlas } from '../../assets/bitmap-font';
-import { Color, macro, warn, warnID } from '../../../core';
+import { Color, macro, warn, warnID, ImageData } from '../../../core';
 import { ImageAsset, Texture2D } from '../../../asset/assets';
 import { PixelFormat } from '../../../asset/assets/asset-enum';
 import { BufferTextureCopy } from '../../../gfx';
@@ -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.copyImageDatasToTexture([image.imageData], gfxTexture, [region]);
     }
 }
 

diff --git a/cocos/2d/assets/sprite-frame.ts b/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';
@@ -245,12 +246,23 @@
     /**
      * @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 三种资源。
+     * @param imageSource @en ImageSource could be HTMLCanvasElement, HTMLImageElement, ImageBitmap.
+     *                    @zh 图像原始图像源支持 HTMLCanvasElement HTMLImageElement ImageBitmap 三种资源。
      * @returns @en SpriteFrame asset. @zh 精灵资源。
+     * @deprecated @en Please use `createWithImage (memoryImageSourceOrImageAsset: ImageAsset | IMemoryImageSource)` instead.
+     *             @zh 请使用`createWithImage (memoryImageSourceOrImageAsset: ImageAsset | IMemoryImageSource)`代替。
      */
-    public static createWithImage (imageSourceOrImageAsset: ImageSource | ImageAsset): SpriteFrame {
-        const img = imageSourceOrImageAsset instanceof ImageAsset ? imageSourceOrImageAsset : new ImageAsset(imageSourceOrImageAsset);
+    public static createWithImage (imageSource: HTMLCanvasElement | HTMLImageElement | ImageBitmap): SpriteFrame;
+    /**
+     * @en Create a SpriteFrame object by an image asset or an native image asset.
+     * @zh 通过 Image 资源或者平台相关 Image 对象创建一个 SpriteFrame 资源。
+     * @param memoryImageSourceOrImageAsset @en ImageAsset or IMemoryImageSource.
+     *                                      @zh 图像资产或IMemoryImageSource。
+     * @returns @en SpriteFrame asset. @zh 精灵资源。
+     */
+    public static createWithImage (memoryImageSourceOrImageAsset: 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();

diff --git a/cocos/2d/utils/dynamic-atlas/atlas.ts b/cocos/2d/utils/dynamic-atlas/atlas.ts
@@ -44,7 +44,7 @@

    constructor (width, height) {
        const texture = new DynamicAtlasTexture();
        texture.initWithSize(width, height);
        this._texture = texture;

        this._width = width;
@@ -263,6 +263,6 @@
         region.texOffset.y = y;
         region.texExtent.width = image.width;
         region.texExtent.height = image.height;
-        gfxDevice.copyTexImagesToTexture([image.data as HTMLCanvasElement], gfxTexture, [region]);
+        gfxDevice.copyImageDatasToTexture([image.imageData], gfxTexture, [region]);
     }
 }
diff --git a/cocos/3d/skinned-mesh-renderer/skinned-mesh-batch-renderer.ts b/cocos/3d/skinned-mesh-renderer/skinned-mesh-batch-renderer.ts
@@ -26,6 +26,7 @@
 import {
     ccclass, help, executeInEditMode, executionOrder, menu, tooltip, type, visible, override, serializable, editable,
 } from 'cc.decorator';
+import { ImageData } from 'pal/image';
 import { getWorldTransformUntilRoot } from '../../animation/transform-utils';
 import { Filter, PixelFormat } from '../../asset/assets/asset-enum';
 import { Material } from '../../asset/assets/material';
@@ -235,7 +236,7 @@
            const pass = tech.passes[i];
            if (!pass.properties) { continue; }
            for (const prop in pass.properties) {
                if (pass.properties[prop].type >= Type.SAMPLER1D) { // samplers
                    let tex: Texture2D | null = null;
                    if (this.batchableTextureNames.find((n) => n === prop)) {
                        tex = this._textures[prop];
@@ -357,7 +358,7 @@
                posFormat = Format.UNKNOWN;
                for (let a = 0; a < bundle.attributes.length; a++) {
                    const attr = bundle.attributes[a];
                    if (attr.name === AttributeName.ATTR_POSITION) {
                        posFormat = attr.format;
                        break;
                    }
@@ -376,7 +377,7 @@
                normalFormat = Format.UNKNOWN;
                for (let a = 0; a < bundle.attributes.length; a++) {
                    const attr = bundle.attributes[a];
                    if (attr.name === AttributeName.ATTR_NORMAL) {
                        normalFormat = attr.format;
                        break;
                    }
@@ -395,7 +396,7 @@
                tangentFormat = Format.UNKNOWN;
                for (let a = 0; a < bundle.attributes.length; a++) {
                    const attr = bundle.attributes[a];
                    if (attr.name === AttributeName.ATTR_TANGENT) {
                        tangentFormat = attr.format;
                        break;
                    }
@@ -415,7 +416,7 @@
                uvFormat = Format.UNKNOWN;
                for (let a = 0; a < bundle.attributes.length; a++) {
                    const attr = bundle.attributes[a];
                    if (attr.name === AttributeName.ATTR_BATCH_UV) {
                        uvFormat = attr.format;
                        break;
                    }
@@ -435,7 +436,7 @@
                jointFormat = Format.UNKNOWN;
                for (let a = 0; a < bundle.attributes.length; a++) {
                    const attr = bundle.attributes[a];
                    if (attr.name === AttributeName.ATTR_JOINTS) {
                        jointFormat = attr.format;
                        break;
                    }
@@ -453,10 +454,8 @@
     }
 
     protected cookTextures (target: Texture2D, prop: string, passIdx: number): void {
-        const texImages: TexImageSource[] = [];
-        const texImageRegions: BufferTextureCopy[] = [];
-        const texBuffers: ArrayBufferView[] = [];
-        const texBufferRegions: BufferTextureCopy[] = [];
+        const texImageDatas: ImageData[] = [];
+        const texRegions: BufferTextureCopy[] = [];
         for (let u = 0; u < this.units.length; u++) {
             const unit = this.units[u];
             if (!unit.material) { continue; }
@@ -467,20 +466,13 @@
                 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);
-                }
+                texImageDatas.push(partial.image.imageData);
+                texRegions.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 (texImageDatas.length > 0) { device.copyImageDatasToTexture(texImageDatas, gfxTex, texRegions); }
     }
 
     protected createTexture (prop: string): Texture2D {
@@ -523,7 +515,7 @@
                uvFormat = Format.UNKNOWN;
                for (let a = 0; a < bundle.attributes.length; a++) {
                    const attr = bundle.attributes[a];
                    if (attr.name === AttributeName.ATTR_TEX_COORD) {
                        uvFormat = attr.format;
                        break;
                    }
@@ -574,7 +566,7 @@
                // insert batch ID
                newDataView.setFloat32(newOffset + oldStride, unitIdx);
                // insert batch UV
                newDataView.setFloat32(newOffset + oldStride + 4, uvs[j * 2], isLittleEndian);
                newDataView.setFloat32(newOffset + oldStride + 8, uvs[j * 2 + 1], isLittleEndian);
                newOffset += newStride;
                oldOffset += oldStride;

diff --git a/cocos/asset/asset-manager/builtin-res-mgr.jsb.ts b/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,

diff --git a/cocos/asset/asset-manager/builtin-res-mgr.ts b/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,

diff --git a/cocos/asset/asset-manager/download-dom-image.ts b/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);
+    });
 }
diff --git a/cocos/asset/asset-manager/downloader.ts b/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 @@
 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);
 };
@@ -57,7 +57,7 @@
    downloadFile(url, options, options.onFileProgress, onComplete);
 };

 const downloadJson = (url: string, options: Record<string, any>, onComplete: ((err: Error | null, data?: Record<string, any> | null) => void)): void => {
    options.xhrResponseType = 'json';
    downloadFile(url, options, options.onFileProgress, onComplete);
 };
@@ -360,10 +360,10 @@
     *                      '.ext': (url, options, onComplete) => onComplete(null, null)});
     *
     */
    public register (type: string, handler: (url: string, options: Record<string, any>, onComplete: ((err: Error | null, data?: any | null) => void)) => void): void;
    public register (map: Record<string, (url: string, options: Record<string, any>, onComplete: ((err: Error | null, data?: any | null) => void)) => void>): void;
    public register (
        type: string | Record<string, (url: string, options: Record<string, any>, onComplete: ((err: Error | null, data?: any | null) => void)) => void>,
        handler?: (url: string, options: Record<string, any>, onComplete: ((err: Error | null, data?: any | null) => void)) => void,
    ): void {
        if (typeof type === 'object') {
@@ -397,7 +397,7 @@
     * download('http://example.com/test.tga', '.tga', { onFileProgress: (loaded, total) => log(loaded/total) },
     *      onComplete: (err) => log(err));
     */
    public download (id: string, url: string, type: string, options: Record<string, any>, onComplete: ((err: Error | null, data?: any | null) => void)): void {
        // if it is downloaded, don't download again
        const file = files.get(id);
        if (file) {

diff --git a/cocos/asset/asset-manager/factory.ts b/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';
@@ -37,22 +38,22 @@
 import { cache } from './utilities';
 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;
     }
    onComplete(err, out);
 }

 function createJsonAsset (id: string, data: Record<string, any>, options: Record<string, any>, onComplete: ((err: Error | null, data?: JsonAsset | null) => void)): void {
    const out = new JsonAsset();
    out.json = data;
    onComplete(null, out);