Update formatSvgToImg.ts

src/tenant/music/music-detail/formatSvgToImg.ts

@@ -34,11 +34,16 @@ const blobToBase64 = (blob: any) => {
     reader.readAsDataURL(blob)
   })
 }
-
+let canvas = null as any
 export const svgtopng = async (svg: any, width: any, height: any) => {
-  const canvas = new OffscreenCanvas(width, height)
+  console.log(canvas, +new Date() + '-----')
+
+  if (!canvas) {
+    canvas = new OffscreenCanvas(width, height)
+  }
+
   const ctx = canvas.getContext('2d')!
-  const v = await Canvg.fromString(ctx!, svg, preset)
+  let v: any = await Canvg.fromString(ctx!, svg, preset)
 
   /**
    * Resize SVG to fit in given size.
@@ -53,17 +58,23 @@ export const svgtopng = async (svg: any, width: any, height: any) => {
   const blob = await canvas.convertToBlob()
   const base64 = await blobToBase64(blob)
   // canvas.drawImage(base64
-  releaseCanvas(canvas)
+  // await v.stop()
+  // releaseCanvas(canvas)
+  ctx.clearRect(0, 0, canvas.width, canvas.height)
+  // canvas = null
+  console.log(canvas, 'draw')
+  await v.stop()
+  v = null
   return base64
 }
 
-function releaseCanvas(canvasElement) {
-  // 清空 Canvas 上的内容
-  const ctx = canvasElement.getContext('2d')
-  ctx.clearRect(0, 0, canvasElement.width, canvasElement.height)
+// function releaseCanvas(canvasElement) {
+//   // 清空 Canvas 上的内容
+//   const ctx = canvasElement.getContext('2d')
+//   ctx.clearRect(0, 0, canvasElement.width, canvasElement.height)
 
-  // 停止任何正在进行的动画或定时器
-  cancelAnimationFrame(canvasElement.animationId)
-  // 删除对 Canvas 元素的引用
-  canvasElement = null
-}
+//   // 停止任何正在进行的动画或定时器
+//   cancelAnimationFrame(canvasElement.animationId)
+//   // 删除对 Canvas 元素的引用
+//   canvasElement = null
+// }