75 lines
1.5 KiB
TypeScript
75 lines
1.5 KiB
TypeScript
import { base64ToBlob, uuid } from "./comm";
|
|
|
|
/**
|
|
* 将canvas转换为png图片
|
|
* @param options 转换参数
|
|
* @returns 图片路径
|
|
*/
|
|
export function canvasToPng(canvasRef: UniElement): Promise<string> {
|
|
return new Promise((resolve) => {
|
|
// #ifdef APP
|
|
canvasRef.parentElement!.takeSnapshot({
|
|
success(res) {
|
|
resolve(res.tempFilePath);
|
|
},
|
|
fail(err) {
|
|
console.error(err);
|
|
resolve("");
|
|
}
|
|
});
|
|
// #endif
|
|
|
|
// #ifdef H5
|
|
const url = URL.createObjectURL(
|
|
base64ToBlob(
|
|
(canvasRef as unknown as HTMLCanvasElement)?.toDataURL("image/png", 1) ?? ""
|
|
)
|
|
);
|
|
|
|
resolve(url);
|
|
// #endif
|
|
|
|
// #ifdef MP
|
|
uni.createCanvasContextAsync({
|
|
id: canvasRef.id,
|
|
component: canvasRef.$vm,
|
|
success(context) {
|
|
// 获取2D绘图上下文
|
|
const ctx = context.getContext("2d")!;
|
|
|
|
// 获取canvas对象
|
|
const canvas = ctx.canvas;
|
|
|
|
// 将canvas转换为base64格式的PNG图片数据
|
|
const data = canvas.toDataURL("image/png", 1);
|
|
|
|
// 获取文件系统管理器
|
|
const fileMg = uni.getFileSystemManager();
|
|
|
|
// 生成临时文件路径
|
|
// @ts-ignore
|
|
const filepath = `${wx.env.USER_DATA_PATH}/${uuid()}.png`;
|
|
|
|
// 将base64数据写入文件
|
|
fileMg.writeFile({
|
|
filePath: filepath,
|
|
data: data.split(",")[1],
|
|
encoding: "base64",
|
|
success() {
|
|
resolve(filepath);
|
|
},
|
|
fail(err) {
|
|
console.error(err);
|
|
resolve("");
|
|
}
|
|
});
|
|
},
|
|
fail(err) {
|
|
console.error(err);
|
|
resolve("");
|
|
}
|
|
});
|
|
// #endif
|
|
});
|
|
}
|