修改

src/views/cloudPractice/cloudPractice.tsx

@@ -1053,7 +1053,13 @@ export default defineComponent({
                const osmdImg = e.data.osmdImg
                const imgs = []
                for (let i = 0; i < osmdImg.length; i++) {
-                  const img = await svgtoblob(osmdImg[i].img, osmdImg[i].width, osmdImg[i].height, musicName)
+                  const img = await svgtoblob(
+                     osmdImg[i].img,
+                     osmdImg[i].width,
+                     osmdImg[i].height,
+                     musicName,
+                     userStoreHook.roles === "GYM" ? false : true
+                  )
                   imgs.push({
                      url: img,
                      name: i + 1 + ".png"

src/views/cloudPractice/formatSvgToImg.ts

@@ -54,7 +54,7 @@ export const addMusicTitle = (canvas: any, title: any) => {
 }
 
 let canvas = null as any
-export const svgtoblob = async (svg: any, width: any, height: any, name: string) => {
+export const svgtoblob = async (svg: any, width: any, height: any, name: string, isShowPadding = true) => {
    if (!canvas) {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
@@ -77,38 +77,13 @@ export const svgtoblob = async (svg: any, width: any, height: any, name: string)
    await v.start()
    // const blob = await canvas.convertToBlob()
    // const base64 = await blobToBase64(blob)
-   const base64 = await canvasAddPadding(canvas, name)
+   const base64 = await canvasAddPadding(canvas, name, isShowPadding)
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    await v.stop()
    v = null
    return base64
 }
 
-// export const svgtopng = async (svg: any, width: any, height: any) => {
-//    let canvas: any = new OffscreenCanvas(width, height);
-//    const ctx = canvas.getContext("2d")!;
-//    let v: any = await Canvg.fromString(ctx!, svg, preset);
-
-//    /**
-//     * Resize SVG to fit in given size.
-//     * @param width
-//     * @param height
-//     * @param preserveAspectRatio
-//     */
-//    v.resize(width / 1.2, height / 1.2, "xMidYMid meet");
-
-//    // Render only first frame, ignoring animations and mouse.
-//    await v.start();
-//    let blob: any = await canvas.convertToBlob();
-//    const base64 = await blobToBase64(blob);
-//    ctx.clearRect(0, 0, canvas.width, canvas.height);
-//    canvas = null;
-//    v.stop();
-//    v = null;
-//    blob = null;
-//    return base64;
-//  };
-
 const convertToBlob = (canvas: any, type = "image/png") => {
    return new Promise((resolve, reject) => {
       canvas.toBlob((blob: Blob) => {
@@ -121,10 +96,10 @@ const convertToBlob = (canvas: any, type = "image/png") => {
    })
 }
 
-const canvasAddPadding = async (sourceCanvas: any, name: string) => {
+const canvasAddPadding = async (sourceCanvas: any, name: string, isShowPadding = true) => {
    const targetCanvas = document.createElement("canvas")
-   targetCanvas.width = sourceCanvas.width + 400
-   targetCanvas.height = sourceCanvas.height + 200
+   targetCanvas.width = sourceCanvas.width + (isShowPadding ? 400 : 160)
+   targetCanvas.height = sourceCanvas.height + (isShowPadding ? 200 : 0)
 
    // 坐标(0,0) 表示从此处开始绘制，相当于偏移。
    const targetContext = targetCanvas.getContext("2d") as CanvasRenderingContext2D
@@ -148,11 +123,11 @@ const canvasAddPadding = async (sourceCanvas: any, name: string) => {
    targetContext.font = `30pt Calibri`
    targetContext.fillStyle = "#000"
    targetContext.textAlign = "center"
-   targetContext.drawImage(sourceCanvas, 200, 240)
-   targetContext.fillText(name, targetCanvas.width / 2, 200)
+   targetContext.drawImage(sourceCanvas, isShowPadding ? 200 : 80, isShowPadding ? 240 : 40)
+   targetContext.fillText(name, targetCanvas.width / 2, isShowPadding ? 200 : 60)
 
    const blob = await convertToBlob(targetCanvas)
-   // const base64 = await blobToBase64(blob)
+   const base64 = await blobToBase64(blob)
    targetContext.clearRect(0, 0, targetCanvas.width, targetCanvas.height)
    return blob
 }