Cocos Creator Web Local Image Upload: Select, Crop, Compress and Display

A Cocos Creator web build can use an HTML file input and JavaScript APIs to select images on desktop or mobile.

Create a hidden picker and read the selected file:

private inputElement: HTMLInputElement;

private createInput() {
    this.inputElement = document.createElement('input');
    this.inputElement.type = 'file';
    this.inputElement.accept = 'image/*';
    this.inputElement.style.display = 'none';
    document.body.appendChild(this.inputElement);
    this.inputElement.addEventListener('change', event => {
        const target = event.target as HTMLInputElement;
        if (target.files?.length) this.handleFileUpload(target.files[0]);
    });
}

private clickButton() {
    this.inputElement.click();
}

Reject oversized files, convert the image to a data URL, then crop and compress it:

private handleFileUpload(file: File) {
    if (file.size > 1024 * 1024) {
        console.error('The file is too large');
        return;
    }
    const reader = new FileReader();
    reader.onload = event => {
        const url = event.target?.result as string;
        this.compressImage(url, 126, 126).then(result => {
            this.loadTextureInCocos(this.imgNode, result, 126, 126);
        });
    };
    reader.readAsDataURL(file);
}

public compressImage(url: string, targetWidth: number, targetHeight: number): Promise<string> {
    return new Promise(resolve => {
        const img = new Image();
        img.src = url;
        img.onload = () => {
            const size = Math.min(img.width, img.height);
            const startX = (img.width - size) / 2;
            const startY = (img.height - size) / 2;
            const canvas = document.createElement('canvas');
            canvas.width = targetWidth;
            canvas.height = targetHeight;
            canvas.getContext('2d')?.drawImage(
                img, startX, startY, size, size,
                0, 0, targetWidth, targetHeight
            );
            resolve(canvas.toDataURL('image/jpeg', 0.5));
        };
    });
}

Create a Cocos texture and SpriteFrame:

public loadTextureInCocos(node: Node, imageUrl: string, width: number, height: number) {
    const image = new Image();
    image.onload = () => {
        const texture = new Texture2D();
        texture.image = new ImageAsset(image);
        const frame = new SpriteFrame();
        frame.texture = texture;
        node.getComponent(Sprite).spriteFrame = frame;
        node.getComponent(UITransform).setContentSize(width, height);
    };
    image.src = imageUrl;
}

Use HTTPS, remove the hidden DOM element when the component is destroyed, and keep memory usage in mind for large images.