[记录]图片上传,Blob转SpriteFrame和下载

记录一下,省的下次到处搜

引擎版本:3.7

获取拖拽图片
window.addEventListener('dragover', (event: DragEvent) => {
			event.preventDefault();
		});
		window.addEventListener('drop', (event: DragEvent) => {
			event.preventDefault();
			const file = event.dataTransfer?.files[0];
			if (file) {
				const reader = new FileReader();
				reader.readAsDataURL(file);
				reader.onload = () => {
					const image_src = reader.result;
					this.run(image_src);
				};
			}
		});
下载图片
/**
	 * 下载图片 In Browser
	 */
	public saveFileInBrowser(blob: Blob, fileName: string) {
		let URL = window.URL || window[`webkitURL`];
		let objectUrl = URL.createObjectURL(blob);
		if (fileName) {
			var a = document.createElement('a');
			a.href = objectUrl;
			a.download = fileName;
			document.body.appendChild(a);
			a.click();
			a.remove();
		} else {
			window.location.href = objectUrl;
		}
		URL.revokeObjectURL(objectUrl);
	}
转换Blob为SpriteFrame
public blodToSpriteFrame(blob: Blob) {
		return new Promise((resolve, reject) => {
			this.blobToImageData(blob).then((imageData: ImageData) => {
				this.imageDataToSprieFram(imageData).then((spriteFrame: SpriteFrame) => {
					resolve(spriteFrame);
				});
			});
		});
	}

	blobToImageData(blob) {
		return new Promise((resolve, reject) => {
			const url = URL.createObjectURL(blob);
			const img = new Image();
			img.onload = () => {
				URL.revokeObjectURL(url);
				const canvas = document.createElement('canvas');
				canvas.width = img.width;
				canvas.height = img.height;
				const ctx = canvas.getContext('2d');
				ctx.drawImage(img, 0, 0);
				const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
				resolve(imageData);
			};
			img.onerror = reject;
			img.src = url;
		});
	}

	imageDataToSprieFram(imageData: ImageData) {
		return new Promise((resolve, reject) => {
			let imageAsset = new ImageAsset();
			imageAsset.reset({
				_data: imageData.data,
				width: imageData.width,
				height: imageData.height,
				format: Texture2D.PixelFormat.RGBA8888,
				_compressed: false,
			});
			let spriteFrame = new SpriteFrame();
			const tex = new Texture2D();
			tex.image = imageAsset;
			spriteFrame.texture = tex;
			spriteFrame.packable = false;
			resolve(spriteFrame);
		});
	}
1赞

大佬 请教下 我用安卓代码 获取到图片路径了 cocos 层 也能根据路径加载显示出来 , 如何将这个图片发送给后端存起来

转base64吧

我就是想转 但是安卓那边转的话 能查到的文档都试了 就是报错编译不过去

https://www.jianshu.com/p/30c692c535c1

比较小白 java 没接触过