music-score/src/page-instrument/view-product-img/index.tsx

import { defineComponent, nextTick, onMounted, reactive } from "vue";
import state, { EnumMusicRenderType } from "/src/state";
import MusicScore from "../../view/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: "music-list",
	setup() {
		const query: any = getQuery();

		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;
			//课堂乐器,默认简谱
			state.musicRenderType = detailData.product[detailData.step].type;

			showLoadingToast({ message: "生成中", duration: 0 });
			setTimeout(() => {
				detailData.isLoading = false;
			}, 500);
		});

		/** 渲染完成 */
		const handleRendered = async () => {
			try {
				console.log(JSON.parse(JSON.stringify(detailData.product)));
			} catch (error) {}
			detailData.product[detailData.step].state = true;
			detailData.product[detailData.step].base64 = await downPng();

			detailData.step += 1;

			if (detailData.step !== detailData.product.length - 1) {
				//课堂乐器,默认简谱
				state.musicRenderType = detailData.product[detailData.step].type;
				nextTick(() => {
					detailData.isLoading = true;
					setTimeout(() => {
						detailData.isLoading = false;
					}, 500);
				});
				return;
			}

			closeToast();
			console.log(detailData.product);
			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 showSelection={false} onRendered={handleRendered} />}
				</div>
			</div>
		);
	},
});