feat: 曲谱转图片，url链接添加isCreateImg参数

src/page-instrument/App.tsx

@@ -18,7 +18,7 @@ export default defineComponent({
     };
     const setUser = async () => {
       try {
-        const res = await getUserInfo();
+        const res = query.isCreateImg ? {code:200,data:{}} : await getUserInfo();
         if (res?.code === 5000) {
           const browserInfo = browser();
           showToast(res.message);

src/page-instrument/router.ts

@@ -9,7 +9,7 @@ const routes: RouteRecordRaw[] = [
   },
   {
     path: "/product-img",
-    component: () => import("./view-product-img/index"),
+    component: () => import("/src/view/transfer-to-img/index"),
   },
   {
     path: "/evaluat-report",

src/view/transfer-to-img/index.module.less

@@ -0,0 +1,32 @@
+.skeleton {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    padding: 20px 30px;
+    background-color: #fff;
+    z-index: 1000;
+    --van-skeleton-paragraph-height: .8rem;
+}
+
+.detail {
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    overflow-y: auto;
+    --header-height: 62px;
+    background: var(--container-background);
+
+    .container {
+        margin: 0 10px;
+        border-radius: 10px;
+    }
+    :global{
+        #musicAndSelection{
+            overflow: initial !important;
+            height: initial !important;
+            max-height: initial !important;
+        }
+    }
+}

src/view/transfer-to-img/index.tsx

@@ -0,0 +1,123 @@
+import { defineComponent, nextTick, onMounted, reactive } from "vue";
+import state, { EnumMusicRenderType } from "/src/state";
+import MusicScore from "../music-score";
+import styles from "./index.module.less";
+import { getQuery } from "/src/utils/queryString";
+import { closeToast, showLoadingToast } from "vant";
+import { svg2canvas } from "/src/utils/svg2canvas";
+
+export default defineComponent({
+	name: "transfer-to-img",
+	setup() {
+		const query: any = getQuery();
+		const productRenderType = "productRenderType"
+		const detailData = reactive({
+			isLoading: true,
+			isProductLoading: false,
+			step: 0,
+			product: [
+				{
+					state: false,
+					name: "五线谱",
+					type: EnumMusicRenderType.staff,
+					base64: "" as any,
+				},
+				{
+					state: false,
+					name: "首调",
+					type: EnumMusicRenderType.firstTone,
+					base64: "" as any,
+				},
+				{
+					state: false,
+					name: "固定调",
+					type: EnumMusicRenderType.fixedTone,
+					base64: "" as any,
+				},
+			],
+		});
+
+		onMounted(() => {
+			(window as any).appName = "colexiu";
+			state.xmlUrl = query.xmlUrl;
+			//课堂乐器,默认简谱
+			sessionStorage.setItem(productRenderType, detailData.product[detailData.step].type);
+
+			showLoadingToast({ message: "生成中", duration: 0 });
+			setTimeout(() => {
+				detailData.isLoading = false;
+			}, 500);
+		});
+
+		/** 渲染完成 */
+		const handleRendered = async () => {
+			
+			detailData.product[detailData.step].state = true;
+			detailData.product[detailData.step].base64 = await downPng();
+
+			try {
+				console.log(JSON.parse(JSON.stringify(detailData.product)), detailData.step);
+			} catch (error) {}
+
+			detailData.step += 1;
+
+			if (detailData.step !== detailData.product.length) {
+				//课堂乐器,默认简谱
+				sessionStorage.setItem(productRenderType, detailData.product[detailData.step].type);
+				nextTick(() => {
+					detailData.isLoading = true;
+					setTimeout(() => {
+						detailData.isLoading = false;
+					}, 500);
+				});
+				return;
+			}
+
+			closeToast();
+			console.log(detailData.product,123456);
+			window.parent?.postMessage(
+				{
+					api: "webApi_renderSvg",
+					product: JSON.stringify(detailData.product),
+				},
+				"*"
+			);
+		};
+		const downPng = () => {
+			return new Promise((resolve) => {
+				setTimeout(async () => {
+					try {
+						const svg: any = document.getElementById("osmdSvgPage1")?.cloneNode(true);
+						if (!svg) {
+							resolve("");
+							return;
+						}
+						const cw = svg.width.animVal.value;
+						const ch = svg.height.animVal.value;
+						const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+						rect.setAttribute("x", "0");
+						rect.setAttribute("y", "0");
+						rect.setAttribute("width", `${cw * 2}`);
+						rect.setAttribute("height", `${ch * 2}`);
+						rect.setAttribute("fill", "#fff");
+						svg.prepend(rect);
+						const _canvas = svg2canvas(svg.outerHTML);
+						const base64 = _canvas.toDataURL("image/png", 1);
+						resolve(base64);
+					} catch (error) {
+						resolve("");
+					}
+				}, 500);
+			});
+		};
+
+		return () => (
+			<div class={styles.detail}>
+				<div id="scrollContainer" class={[styles.container, "hideCursor"]}>
+					{/* 曲谱渲染 */}
+					{!detailData.isLoading && <MusicScore renderTypeKey={productRenderType} showSelection={false} onRendered={handleRendered} />}
+				</div>
+			</div>
+		);
+	},
+});