图片添加边距

src/views/cloudPractice/cloudPractice.tsx

@@ -963,7 +963,7 @@ export default defineComponent({
 
       /** 下载图片 */
       const onDownload = () => {
-         if (downloadStatus.value) return
+         if (downloadStatus.value || staffLoading.value) return
          const musicName =
             activeItem.value.name +
             ((activeItem.value.musicSheetType === "CONCERT" && state.selectedPartName) || state.selectedTrack
@@ -1278,7 +1278,7 @@ export default defineComponent({
                               trigger: () => (
                                  <img
                                     onClick={onDownload}
-                                    class={[styles.transBtn, downloadStatus.value && styles.disableBtn]}
+                                    class={[styles.transBtn, (downloadStatus.value || staffLoading.value) && styles.disableBtn]}
                                     src={iconDownload as any}
                                  />
                               ),

src/views/cloudPractice/formatSvgToImg.ts

@@ -82,10 +82,41 @@ export const svgtopng = async (svg: any, width: any, height: any) => {
 
    // Render only first frame, ignoring animations and mouse.
    await v.start()
-   const blob = await canvas.convertToBlob()
-   const base64 = await blobToBase64(blob)
+   // const blob = await canvas.convertToBlob()
+   // const base64 = await blobToBase64(blob)
+   const base64 = await canvasAddPadding(canvas)
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    await v.stop()
    v = null
    return base64
 }
+
+const convertToBlob = (canvas: any) => {
+   return new Promise(resolve => {
+      canvas.toBlob(resolve)
+   })
+}
+
+const canvasAddPadding = async (sourceCanvas: any) => {
+   const targetCanvas = document.createElement("canvas")
+   targetCanvas.width = sourceCanvas.width + 400
+   targetCanvas.height = sourceCanvas.height + 100
+   // 坐标(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, 50)
+
+   const blob = await convertToBlob(targetCanvas)
+   const base64 = await blobToBase64(blob)
+   targetContext.clearRect(0, 0, targetCanvas.width, targetCanvas.height)
+   return base64
+}