feat: 曲谱下载修改

src/tenant/music/music-detail/download.tsx

@@ -5,7 +5,8 @@ import {
   addMusicTitle,
   addWatermark,
   convasToImg,
-  imgToCanvas
+  imgToCanvas,
+  clearCanvas
 } from './imageFunction'
 import { Button, Swipe, SwipeItem, Toast, Image } from 'vant'
 
@@ -49,17 +50,21 @@ export default defineComponent({
         //   list.value[acitveIndex.value],
         //   'list.value[acitveIndex.value]'
         // )
-        const tempCanvas = await imgToCanvas(
+        let tempCanvas: any = await imgToCanvas(
           list.value[acitveIndex.value] as any
         )
-        const titleCanvas = addMusicTitle(tempCanvas, {
+        let titleCanvas: any = addMusicTitle(tempCanvas, {
           title: props.musicSheetName,
           size: 18
         })
-        const canvas = await addWatermark(titleCanvas, '酷乐秀')
+        let canvas: any = await addWatermark(titleCanvas, '酷乐秀')
         image.value = convasToImg(canvas)
         // console.log(image.value, 'image.value')
         await saveImg()
+        clearCanvas(canvas);
+        tempCanvas = null
+        titleCanvas = null
+        canvas = null
       }
     }
 

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

@@ -1,30 +1,39 @@
-import imgList from './images/logoWatermark.png'
+import imgList from "./images/logoWatermark.png";
+
+export const clearCanvas = (canvas: any) => {
+  let ctx = canvas?.getContext('2d');
+
+  // 在绘制新内容之前清除画布
+  ctx && ctx.clearRect(0, 0, canvas.width, canvas.height);
+}
+
 export const imgToCanvas = async (url: string) => {
-  console.log('imgToCanvas', url)
-  const img = document.createElement('img')
-  img.setAttribute('crossOrigin', 'anonymous')
+  // console.log("imgToCanvas", url);
+  const img = document.createElement("img");
+  img.setAttribute("crossOrigin", "anonymous");
   // 为了处理base64 和 连接加载不同的
-  if (url && typeof url == 'string' && url.includes('data:image')) {
-    img.src = url
+  if (url && typeof url == "string" && url.includes("data:image")) {
+    img.src = url;
   } else {
-    img.src = url + `?t=${+new Date()}`
+    img.src = url + `?t=${+new Date()}`;
   }
-
+  
   // 防止跨域引起的 Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
-  await new Promise(resolve => (img.onload = resolve))
+  await new Promise((resolve) => (img.onload = resolve));
   // 创建canvas DOM元素，并设置其宽高和图片一样
-  const canvas = document.createElement('canvas')
-  canvas.width = img.width
-  canvas.height = img.height
+  const canvas = document.createElement("canvas");
+  canvas.width = img.width;
+  canvas.height = img.height;
   // 坐标(0,0) 表示从此处开始绘制，相当于偏移。
-  const ctx = canvas.getContext('2d') as CanvasRenderingContext2D
+  const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
 
-  ctx.fillStyle = 'rgb(255, 255, 255)'
-  ctx.fillStyle = '#fff'
-  ctx.fillRect(0, 0, img.width, img.height)
-  ctx.drawImage(img, 0, 0)
-  return canvas
-}
+  ctx.fillStyle = "rgb(255, 255, 255)";
+  ctx.fillStyle = "#fff";
+  // console.log('图片宽高123',img.width,img.height)
+  ctx.fillRect(0, 0, img.width, img.height);
+  ctx.drawImage(img, 0, 0);
+  return canvas;
+};
 
 /* canvas添加水印
 
@@ -34,63 +43,61 @@ export const imgToCanvas = async (url: string) => {
 
 */
 
-export const addWatermark = async (canvas, text) => {
-  console.log('addWatermark')
+export const addWatermark = async (canvas: any, text: any) => {
+  console.log("addWatermark");
   try {
-    const ctx = canvas.getContext('2d')
+    const ctx = canvas.getContext("2d");
     // ctx.fillStyle = '#fff'
-    const img = document.createElement('img')
-    img.setAttribute('crossOrigin', 'anonymous')
+    const img = document.createElement("img");
+    img.setAttribute("crossOrigin", "anonymous");
     // 为了处理base64 和 连接加载不同的
-    if (
-      imgList &&
-      typeof imgList == 'string' &&
-      imgList.includes('data:image')
-    ) {
-      img.src = imgList
+    if (imgList && typeof imgList == "string" && imgList.includes("data:image")) {
+      img.src = imgList;
     } else {
-      img.src = imgList + `?${new Date().getTime()}`
+      img.src = imgList + `?${new Date().getTime()}`;
     }
     // 防止跨域引起的 Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
-    await new Promise(resolve => (img.onload = resolve))
+    await new Promise((resolve) => (img.onload = resolve));
     // 创建canvas DOM元素，并设置其宽高和图片一样
-    const water = document.createElement('canvas')
-    water.width = 600
-    water.height = 500
+    const water = document.createElement("canvas");
+    water.width = 600;
+    water.height = 500;
 
     // 第一层
-    const waterCtx = water.getContext('2d') as CanvasRenderingContext2D
-    waterCtx.clearRect(0, 0, water.width, water.height)
+    const waterCtx = water.getContext("2d") as CanvasRenderingContext2D;
+    waterCtx.clearRect(0, 0, water.width, water.height);
     // 小水印中文字偏转角度
-    waterCtx.rotate((-30 * Math.PI) / 180)
-    waterCtx.drawImage(img, 0, 300)
-    const pat = ctx.createPattern(water, 'repeat')
-    ctx.fillStyle = pat
-    ctx.fillRect(0, 0, canvas.width, canvas.height)
-
-    return canvas
+    waterCtx.rotate((-30 * Math.PI) / 180);
+    waterCtx.drawImage(img, 0, 300);
+    const pat = ctx.createPattern(water, "repeat");
+    ctx.fillStyle = pat;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    // console.log('图片宽高1234',img.width,img.height,canvas.width, canvas.height)
+    return canvas;
   } catch (e) {
-    console.log(e)
+    console.log(e);
   }
-}
+};
+
+export const addMusicTitle = (canvas: any, info: any) => {
+  canvas.getContext("2d");
+  const water = document.createElement("canvas");
 
-export const addMusicTitle = (canvas, info) => {
-  canvas.getContext('2d')
-  const water = document.createElement('canvas')
   // 小水印画布大小
-  water.width = canvas.width
-  water.height = canvas.height + 80
-  const waterCtx = water.getContext('2d') as CanvasRenderingContext2D
-  waterCtx.fillStyle = '#fff'
-  waterCtx.fillRect(0, 0, water.width, water.height)
-  waterCtx.font = `26pt Calibri`
-  waterCtx.fillStyle = '#000'
-  waterCtx.textAlign = 'center'
-  waterCtx.drawImage(canvas, 0, 40)
-  waterCtx.fillText(info.title, canvas.width / 2, 40)
-  return water
-}
+  water.width = canvas.width;
+  water.height = canvas.height + 28;
+  const waterCtx = water.getContext("2d") as CanvasRenderingContext2D;
+  waterCtx.fillStyle = "#fff";
+  waterCtx.fillRect(0, 0, canvas.width, canvas.height + 70);
+  // console.log('图片宽高12345',canvas.width, canvas.height)
+  waterCtx.font = (info.size || 30) + `pt Calibri`;
+  waterCtx.fillStyle = "#000";
+  waterCtx.textAlign = "center";
+  waterCtx.drawImage(canvas, 0, 70);
+  waterCtx.fillText(info.title, canvas.width / 2, 70);
+  return water;
+};
 
-export const convasToImg = canvas => {
-  return canvas.toDataURL('image/png')
-}
+export const convasToImg = (canvas: any) => {
+  return canvas.toDataURL("image/png");
+};

src/tenant/music/music-detail/index.module.less

@@ -65,10 +65,10 @@
 
 .musicContent {
   position: relative;
-  width: 100%;
+  // width: 100%;
   height: 500px;
   overflow: hidden;
-
+  margin: 0 11px;
   &::after {
     content: ' ';
     position: absolute;

src/views/music/music-detail/download.tsx

@@ -5,7 +5,8 @@ import {
   addMusicTitle,
   addWatermark,
   convasToImg,
-  imgToCanvas
+  imgToCanvas,
+  clearCanvas
 } from './imageFunction'
 import { Button, Swipe, SwipeItem, Toast, Image } from 'vant'
 
@@ -45,16 +46,20 @@ export default defineComponent({
       if (image.value) {
         saveImg()
       } else {
-        const tempCanvas = await imgToCanvas(
+        let tempCanvas: any = await imgToCanvas(
           list.value[acitveIndex.value] as any
         )
-        const titleCanvas = addMusicTitle(tempCanvas, {
+        let titleCanvas: any = addMusicTitle(tempCanvas, {
           title: props.musicSheetName,
           size: 20
         })
-        const canvas = await addWatermark(titleCanvas, '酷乐秀')
+        let canvas: any = await addWatermark(titleCanvas, '酷乐秀')
         image.value = convasToImg(canvas)
         await saveImg()
+        clearCanvas(canvas);
+        tempCanvas = null
+        titleCanvas = null
+        canvas = null
       }
     }
 

src/views/music/music-detail/imageFunction.ts

@@ -1,4 +1,4 @@
-import imgList from './images/logoWatermark.png'
+import imgList from "./images/logoWatermark.png";
 
 export const clearCanvas = (canvas: any) => {
   let ctx = canvas?.getContext('2d');
@@ -36,8 +36,11 @@ export const imgToCanvas = async (url: string) => {
 };
 
 /* canvas添加水印
+
 * @param {canvas对象} canvas
+
 * @param {水印文字} text
+
 */
 
 export const addWatermark = async (canvas: any, text: any) => {
@@ -82,16 +85,16 @@ export const addMusicTitle = (canvas: any, info: any) => {
 
   // 小水印画布大小
   water.width = canvas.width;
-  water.height = canvas.height + 38;
+  water.height = canvas.height + 28;
   const waterCtx = water.getContext("2d") as CanvasRenderingContext2D;
   waterCtx.fillStyle = "#fff";
-  waterCtx.fillRect(0, 0, canvas.width, canvas.height + 60);
+  waterCtx.fillRect(0, 0, canvas.width, canvas.height + 70);
   // console.log('图片宽高12345',canvas.width, canvas.height)
   waterCtx.font = (info.size || 30) + `pt Calibri`;
   waterCtx.fillStyle = "#000";
   waterCtx.textAlign = "center";
-  waterCtx.drawImage(canvas, 0, 60);
-  waterCtx.fillText(info.title, canvas.width / 2, 60);
+  waterCtx.drawImage(canvas, 0, 70);
+  waterCtx.fillText(info.title, canvas.width / 2, 70);
   return water;
 };
 

src/views/music/music-detail/index.module.less

@@ -65,13 +65,14 @@
 
 .musicContent {
   position: relative;
-  width: 100%;
+  // width: 100%;
   height: 500px;
   overflow: hidden;
   flex: 1 auto;
   padding-top: 10px;
   display: flex;
   flex-direction: column;
+  margin: 0 11px;
 
   // &::after {
   //   content: ' ';