添加

src/views/cloudPractice/cloudPractice.tsx

@@ -34,7 +34,7 @@ import PlayLoading from "./component/play-loading"
 import PracticeForm from "@/businessComponents/practiceForm"
 import { saveAs } from "file-saver"
 import JSZip from "jszip"
-import { svgtoblob } from "./formatSvgToImg"
+import { canvasAddTitle, imgToCanvas, svgtoblob } from "./formatSvgToImg"
 import { penShow, whitePenShow } from "@/businessComponents/globalTools/globalTools"
 import { handleFullscreen } from "@/libs/fullscreen"
 
@@ -103,6 +103,9 @@ export default defineComponent({
                musicSheetType: item?.musicSheetType,
                audioFileUrl,
                // titleImg: list?.titleImg,
+               musicImg: list.musicImg,
+               musicJianImg: list.musicJianSvg,
+               musicFirstImg: list.musicFirstSvg,
                isScoreRender: item?.isScoreRender,
                defaultScoreRender: item?.defaultScoreRender,
                musicPdfUrl: item?.musicPdfUrl // 独奏使用PDF
@@ -116,6 +119,9 @@ export default defineComponent({
                musicSheetType: list?.musicSheetType,
                audioFileUrl: list?.audioFileUrl,
                titleImg: list?.titleImg,
+               musicImg: list.musicImg,
+               musicJianImg: list.musicJianSvg,
+               musicFirstImg: list.musicFirstSvg,
                isScoreRender: list?.isScoreRender,
                defaultScoreRender: list?.defaultScoreRender,
                musicPdfUrl: list?.musicPdfUrl
@@ -130,6 +136,9 @@ export default defineComponent({
                musicSheetType: list?.musicSheetType,
                audioFileUrl: item?.audioFileUrl,
                titleImg: list?.titleImg,
+               musicImg: list.musicImg,
+               musicJianImg: list.musicJianSvg,
+               musicFirstImg: list.musicFirstSvg,
                isScoreRender: false,
                defaultScoreRender: false,
                musicPdfUrl: list?.musicPdfUrl
@@ -731,6 +740,19 @@ export default defineComponent({
          if (row.musicSheetType === "SINGLE") {
             loading.value = false
             state.musicPdfUrl = row.musicPdfUrl
+
+            if (userStoreHook.roles === "GYM") {
+               const imgs = row.musicImg ? row.musicImg.split(",") : []
+               state.imgs = []
+               imgs.forEach(async (item: string, index: number) => {
+                  const imgCanvas = await imgToCanvas(item)
+                  const img = await canvasAddTitle(imgCanvas, row.name)
+                  state.imgs.push({
+                     name: index + 1 + ".png",
+                     url: img
+                  })
+               })
+            }
             return
          }
          state.partNames = await getPartNames(row.xmlUrl)
@@ -903,8 +925,6 @@ export default defineComponent({
       // // 多个文件下载
       const downLoadMultiFile = (files: any, filesName: string) => {
          const zip = new JSZip()
-         // const result = []
-         // console.log(files)
          for (const i in files) {
             zip.file(files[i].name, files[i].url, { binary: true })
          }

src/views/cloudPractice/formatSvgToImg.ts

@@ -131,6 +131,45 @@ const canvasAddPadding = async (sourceCanvas: any, name: string) => {
    return blob
 }
 
+export const canvasAddTitle = async (sourceCanvas: any, name: string) => {
+   const targetCanvas = document.createElement("canvas")
+   targetCanvas.width = sourceCanvas.width
+   targetCanvas.height = sourceCanvas.height + 90
+
+   // 坐标(0,0) 表示从此处开始绘制，相当于偏移。
+   const targetContext = targetCanvas.getContext("2d") as CanvasRenderingContext2D
+
+   // const sourceContext = sourceCanvas.getContext("2d") as CanvasRenderingContext2D
+
+   // 从源canvas中获取图像数据
+   // const imageData = sourceContext.getImageData(0, 0, sourceCanvas.width, sourceCanvas.height)
+
+   // 清空目标canvas
+   targetContext.clearRect(0, 0, targetCanvas.width, targetCanvas.height)
+
+   // 将图像数据绘制到目标canvas上，并添加边距
+   // targetContext.putImageData(imageData, 200, 100)
+   targetContext.fillStyle = "#fff"
+   targetContext.fillRect(0, 0, targetCanvas.width, targetCanvas.height)
+   // targetCanvas = await addMusicTitle(targetCanvas, name)
+
+   // 小水印画布大小
+   // const waterCtx = water.getContext("2d") as CanvasRenderingContext2D
+   targetContext.font = `30pt Calibri`
+   targetContext.fillStyle = "#000"
+   targetContext.textAlign = "center"
+   targetContext.drawImage(sourceCanvas, 0, 70)
+   targetContext.fillText(name, targetCanvas.width / 2, 100)
+   const blob = await convertToBlob(targetCanvas)
+   // const base64 = await blobToBase64(blob)
+   targetContext.clearRect(0, 0, targetCanvas.width, targetCanvas.height)
+   return blob
+}
+
+export const convasToImg = (canvas: any) => {
+   return canvas.toDataURL("image/png")
+}
+
 // // 获取文件blob格式
 export const imgToCanvas = async (url: string) => {
    const img = document.createElement("img")