const processBase64Image = async (base64String) => {
		try {
			// 分割 Base64 字符串
			const [header, data] = base64String.split(';base64,');
			const mimeType = header.split(':')[1];
			const rawData = atob(data);

			// 平台判断
			let tempFilePaths = [];
			// #ifdef H5
			// H5 环境:使用 Blob
			const blob = new Blob([new Uint8Array(rawData.length).map((_, i) => rawData.charCodeAt(i))], {
				type: mimeType
			});
			const blobURL = URL.createObjectURL(blob);
			tempFilePaths = [blobURL];
			// #endif

			// #ifdef MP-WEIXIN
			// 微信小程序:写入临时文件
			const fs = wx.getFileSystemManager();
			const filePath = `${wx.env.USER_DATA_PATH}/temp_${Date.now()}.${mimeType.split('/')[1]}`;
			fs.writeFileSync(filePath, rawData, 'base64');
			tempFilePaths = [filePath];
			// #endif

			// #ifdef APP
			// App 环境:使用原生 API 保存文件
			const fileName = `image_${Date.now()}.${mimeType.split('/')[1]}`;
			const url = `_doc/${fileName}`;
			const bitmap = new plus.nativeObj.Bitmap('temp');
			await new Promise((resolve, reject) => {
				bitmap.loadBase64Data(base64String, () => {
					bitmap.save(url, {
						overwrite: true
					}, () => {
						bitmap.clear();
						resolve();
					}, (err) => reject(err));
				}, (err) => reject(err));
			});
			tempFilePaths = [url];
			// #endif

			// 获取图片尺寸(H5/小程序/APP 通用)
			const getImageDimensions = (base64) => {
				return new Promise(async (resolve) => {
					let dimensions = {
						width: 0,
						height: 0
					};

					// 平台判断
					// #ifdef H5
					// H5 环境:使用 Image 对象
					const img = new Image();
					img.onload = () => resolve({
						width: img.width,
						height: img.height
					});
					img.onerror = () => resolve(dimensions);
					img.src = base64;
					// #endif

					// #ifdef MP-WEIXIN
					// 微信小程序:使用 wx.getImageInfo
					try {
						const res = await wx.getImageInfo({
							src: base64
						});
						dimensions = {
							width: res.width,
							height: res.height
						};
					} catch (e) {
						console.error('获取图片尺寸失败:', e);
					}
					resolve(dimensions);
					// #endif

					// #ifdef APP
					// App 环境:使用 uni.getImageInfo
					try {
						const res = await uni.getImageInfo({
							src: base64
						});
						dimensions = {
							width: res.width,
							height: res.height
						};
					} catch (e) {
						console.error('获取图片尺寸失败:', e);
					}
					resolve(dimensions);
					// #endif
				});
			};

			const dimensions = await getImageDimensions(base64String);

			return {
				tempFilePaths,
				tempFiles: [{
					path: tempFilePaths[0],
					type: mimeType,
					size: rawData.length,
					base64: base64String,
					name: `image_${Date.now()}.${mimeType.split('/')[1]}`,
					...dimensions
				}],
				errMsg: "chooseImage:ok"
			};
		} catch (error) {
			console.error('处理Base64时出错:', error);
			throw error;
		}
	};
	// 保存图片  uniapp 中 在H5返回的base64 app中是临时文件
	const saveBase64Image = async () => {
		uni.canvasToTempFilePath({
			canvasId: 'tempCanvas',
			success: function(rest) {
				// #ifdef H5
				saveFlieImage(rest.tempFilePath)
				// #endif
				// #ifdef APP-PLUS
				var path = plus.io.convertLocalFileSystemURL(rest.tempFilePath); //绝对路径
				var fileReader = new plus.io.FileReader();
				fileReader.readAsDataURL(path);
				fileReader.onloadend = function(evt) { //读取文件成功完成的回调函数
					console.log(evt.target.result); //输出base64内容
					saveFlieImage(evt.target.result)
				}
				// #endif
			}
		})
	}

    const saveFlieImage = (savedFilePath) => {
		console.log(savedFilePath)
		processBase64Image(savedFilePath).then(result => {
			console.log(result,"二进制信息")
		});
	}
<canvas canvas-id="tempCanvas" class="canvas"></canvas>

Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐