feat: 谱面图片下载支持A4尺寸

src/helpers/svgToPng.ts

@@ -0,0 +1,29 @@
+// 将svg转成png
+export const getSvgPngToSize = (osmd: any) => {
+    if (osmd) {
+      if (osmd.Drawer.Backends.length > 0) {
+        var imgList = []
+        
+        for (var idx = 0, len = osmd.Drawer.Backends.length; idx < len; idx++) {
+          var backend = osmd.Drawer.Backends[idx]
+          var state = backend.ctx.state;
+          var width = backend.ctx.width / state.scale.x;
+          var height = backend.ctx.height / state.scale.y;
+          const textX = width - 90,textY = height - 90;
+          const textDom = `<g><text x="${textX}" y="${textY}" stroke-width="3" fill="#000000" stroke="none" stroke-dasharray="none" font-family="Times New Roman" font-size="36px" font-weight="bold" font-style="none">${idx+1}/${len}</text></g>`
+          backend.ctx.svg.innerHTML = backend.ctx.svg.innerHTML + textDom;
+          var cont = new XMLSerializer().serializeToString(
+            backend.ctx.svg
+          )
+          imgList.push({
+            img: cont,
+            width: width,
+            height: height,
+          })
+        }
+        return imgList
+      }
+    } else {
+      console.log('没有OSMD')
+    }
+}

src/page-instrument/view-detail/index.tsx

@@ -40,6 +40,7 @@ import EmptyMusic, { isEmptyMusicShow } from "./emptyMusic";
 import { position } from "html2canvas/dist/types/css/property-descriptors/position";
 import Loading from "./loading"
 import LoadingCss from "./loadingCss"
+import { getSvgPngToSize } from "/src/helpers/svgToPng"
 // import bgJson from "./images/index.json";
 
 // const DelayCheck = defineAsyncComponent(() =>
@@ -210,6 +211,22 @@ export default defineComponent({
       console.timeEnd("渲染加载耗时");
       detailData.skeletonLoading = false;
       state.osmd = osmd;
+      // 预览模式不需要往下执行
+      if (state.isPreView) {
+        // 管乐迷曲谱详情页，需要下载A4尺寸的图片
+        setTimeout(() => {
+          if (query.downPng === 'A4' && state.partIndex != 999) {
+            const imgList = getSvgPngToSize(state.osmd)
+            console.log('A4', imgList)
+            window.parent.postMessage({
+              api: 'musicStaffRender',
+              loading: false,
+              osmdImg: imgList
+            }, '*');
+          }
+        }, 100);
+        return;
+      }      
       // 没有设置速度使用读取的速度
       if (state.originSpeed === 0) {
         state.originSpeed = state.speed = (osmd as any).bpm || osmd.Sheet.userStartTempoInBPM || 100;
@@ -312,6 +329,18 @@ export default defineComponent({
       // } else {
       //   state.musicScoreBtnDirection = state.playBtnDirection;
       // }
+      // 曲谱详情页，需要下载A4尺寸的图片
+      setTimeout(() => {
+        if (query.downPng === 'A4' && state.partIndex != 999) {
+          const imgList = getSvgPngToSize(state.osmd)
+          console.log('A4', imgList)
+          window.parent.postMessage({
+            api: 'musicStaffRender',
+            loading: false,
+            osmdImg: imgList
+          }, '*');
+        }
+      }, 100);      
       state.musicScoreBtnDirection = state.playBtnDirection;
       state.musicRendered = true;
 

src/view/music-score/index.tsx

@@ -180,7 +180,13 @@ export default defineComponent({
 			// if (props.isDownXml) {
 			// 	osmd.setPageFormat('794x1065')
 			// }
-			osmd.zoom = state.zoom;
+			if (query.downPng === 'A4') {
+				osmd.EngravingRules.PageTopMargin = 5
+				osmd.setPageFormat('794x1100')
+				osmd.zoom = query.zoom || 0.3;
+			} else {
+				osmd.zoom = state.zoom;
+			}
 			osmd.render();
 			console.log("🚀 ~ osmd:", osmd)
 			emit("rendered", osmd);