优化 canvasToPng

cool/utils/comm.ts

@@ -578,6 +578,23 @@ export function random(min: number, max: number): number {
 	return Math.floor(Math.random() * (max - min + 1)) + min;
 }
 
+/**
+ * 将base64转换为blob
+ * @param data base64数据
+ * @returns blob数据
+ */
+export function base64ToBlob(data: string, type: string = "image/jpeg"): Blob {
+	// #ifdef H5
+	let bytes = window.atob(data.split(",")[1]);
+	let ab = new ArrayBuffer(bytes.length);
+	let ia = new Uint8Array(ab);
+	for (let i = 0; i < bytes.length; i++) {
+		ia[i] = bytes.charCodeAt(i);
+	}
+	return new Blob([ab], { type });
+	// #endif
+}
+
 /**
  * 检查是否为小程序环境
  * @returns 是否为小程序环境

cool/utils/file.ts

@@ -0,0 +1,81 @@
+import { base64ToBlob } from "./comm";
+
+export type CanvasToPngOptions = {
+	canvasId: string;
+	proxy?: ComponentPublicInstance;
+	canvasRef: UniElement;
+};
+
+/**
+ * 将canvas转换为png图片
+ * @param options 转换参数
+ * @returns 图片路径
+ */
+export function canvasToPng(options: CanvasToPngOptions): Promise<string> {
+	return new Promise((resolve) => {
+		// #ifdef APP
+		options.canvasRef.parentElement!.takeSnapshot({
+			success(res) {
+				resolve(res.tempFilePath);
+			},
+			fail(err) {
+				console.error(err);
+				resolve("");
+			}
+		});
+		// #endif
+
+		// #ifdef H5
+		const url = URL.createObjectURL(
+			base64ToBlob(
+				(options.canvasRef as unknown as HTMLCanvasElement)
+					.querySelector("canvas")
+					?.toDataURL("image/png", 1) ?? ""
+			)
+		);
+
+		resolve(url);
+		// #endif
+
+		// #ifdef MP
+		uni.createCanvasContextAsync({
+			id: options.canvasId,
+			component: options.proxy,
+			success(context) {
+				// 获取2D绘图上下文
+				const ctx = context.getContext("2d")!;
+				const canvas = ctx.canvas;
+
+				// 将canvas转换为base64格式的PNG图片数据
+				const data = canvas.toDataURL("image/png", 1);
+				// 获取base64数据部分(去掉data:image/png;base64,前缀)
+				const bdataBase64 = data.split(",")[1];
+
+				// 获取文件系统管理器
+				const fileMg = uni.getFileSystemManager();
+				// 生成临时文件路径
+				// @ts-ignore
+				const filepath = `${wx.env.USER_DATA_PATH}/${uuid()}.png`;
+				// 将base64数据写入文件
+				fileMg.writeFile({
+					filePath: filepath,
+					data: bdataBase64,
+					encoding: "base64",
+					success() {
+						// 写入成功返回文件路径
+						resolve(filepath);
+					},
+					fail() {
+						// 写入失败返回空字符串
+						resolve("");
+					}
+				});
+			},
+			fail(err) {
+				console.error(err);
+				resolve("");
+			}
+		});
+		// #endif
+	});
+}

cool/utils/index.ts

@@ -3,3 +3,4 @@ export * from "./storage";
 export * from "./path";
 export * from "./day";
 export * from "./parse";
+export * from "./file";