fix:保存图片，有底

src/views/co-ai/index.tsx

@@ -1,8 +1,8 @@
-import { TransitionGroup, defineComponent, reactive } from 'vue';
+import { TransitionGroup, defineComponent, reactive, ref } from 'vue';
 import styles from './index.module.less';
 import MSearch from '@/components/m-search';
 import icon_play from '@/common/images/icon_play.svg';
-import { NoticeBar, showToast } from 'vant';
+import { NoticeBar, showLoadingToast, showToast } from 'vant';
 import icon_back from './image/icon_back.svg';
 import icon_down from '@/common/images/icon_down.svg';
 import icon_jianpu from '@/common/images/icon_jianpu.svg';
@@ -10,6 +10,7 @@ import icon_jianpuActive from '@/common/images/icon_jianpuActive.svg';
 import icons from '@/common/images/index.json';
 import { postMessage, promisefiyPostMessage } from '@/helpers/native-message';
 import { rows } from './data.json';
+import html2canvas from 'html2canvas';
 export default defineComponent({
   name: 'co-ai',
   setup() {
@@ -29,13 +30,16 @@ export default defineComponent({
       /** 显示简谱 */
       isShowJianpu: false
     });
+    const downRef = ref();
     // 返回
     const goback = () => {
       postMessage({ api: 'goBack' });
     };
     /** 去云教练 */
     const handleGoto = () => {
-      let src = `https://dev.kt.colexiu.com/instrument?id=${titles[data.musicIndex]?.id}`;
+      let src = `https://dev.kt.colexiu.com/instrument?id=${
+        titles[data.musicIndex]?.id
+      }`;
       postMessage({
         api: 'openAccompanyWebView',
         content: {
@@ -49,25 +53,13 @@ export default defineComponent({
     };
     /** 保存图片 */
     const handleSave = async () => {
-      var canvas = document.createElement('canvas'); //创建canvas DOM元素
-      var ctx = canvas.getContext('2d');
-      const src = data.isShowJianpu
-        ? data.musicIndex % 2 === 0
-          ? 'https://cloud-coach.ks3-cn-beijing.ksyuncs.com/music-sheet-first/1687673062603-1.png'
-          : 'https://cloud-coach.ks3-cn-beijing.ksyuncs.com/music-sheet-first/1675232855321-1.png'
-        : data.musicIndex % 2 === 0
-        ? 'https://cloud-coach.ks3-cn-beijing.ksyuncs.com/music-sheet/1687673062488-1.png'
-        : 'https://cloud-coach.ks3-cn-beijing.ksyuncs.com/music-sheet/1675232854483-2.png';
-      const bimg = new Image();
-      bimg.crossOrigin = 'anonymous';
-      bimg.src = src + '?v=' + Date.now();
-      bimg.onload = async () => {
-        canvas.height = bimg.height;
-        canvas.width = bimg.width;
-        ctx?.drawImage(bimg, 0, 0, bimg.width, bimg.height);
+      showLoadingToast('正在保存');
+      html2canvas(downRef.value, {
+        backgroundColor: '#fff',
+        allowTaint: true,
+        useCORS: true
+      }).then(async canvas => {
         var dataURL = canvas.toDataURL('image/png', 1); //可选取多种模式
-        // console.log("🚀 ~ dataURL:", dataURL);
-        (canvas as any) = null;
         setTimeout(() => {
           showToast('保存成功');
         }, 500);
@@ -77,8 +69,7 @@ export default defineComponent({
             base64: dataURL
           }
         });
-        console.log('🚀 ~ res:', res);
-      };
+      });
     };
     return () => (
       <div class={styles.container}>
@@ -147,30 +138,45 @@ export default defineComponent({
             </div>
           </div>
           <div class={[styles.opacityBg, styles.right]}>
-            <div class={styles['right-musicName']}>
-              {titles[data.musicIndex].musicSheetName}
+            <div ref={downRef}>
+              <div class={styles['right-musicName']}>
+                {titles[data.musicIndex].musicSheetName}
+              </div>
+              {data.isShowJianpu ? (
+                <>
+                  <TransitionGroup name="van-fade">
+                    {titles[data.musicIndex]?.firstTone
+                      ?.split(',')
+                      .map((item, index) => {
+                        return (
+                          <img
+                            class={styles.staff}
+                            src={item + '?v=' + Date.now()}
+                            key={item}
+                          />
+                        );
+                      })}
+                  </TransitionGroup>
+                </>
+              ) : (
+                <>
+                  <TransitionGroup name="van-fade">
+                    {titles[data.musicIndex]?.musicImg
+                      ?.split(',')
+                      .map((item, index) => {
+                        return (
+                          <img
+                            class={styles.staff}
+                            src={item + '?v=' + Date.now()}
+                            key={item}
+                            crossorigin="anonymous"
+                          />
+                        );
+                      })}
+                  </TransitionGroup>
+                </>
+              )}
             </div>
-            {data.isShowJianpu ? (
-              <>
-                <TransitionGroup name="van-fade">
-                  {titles[data.musicIndex]?.firstTone
-                    ?.split(',')
-                    .map((item, index) => {
-                      return <img class={styles.staff} src={item} key={item} />;
-                    })}
-                </TransitionGroup>
-              </>
-            ) : (
-              <>
-                <TransitionGroup name="van-fade">
-                  {titles[data.musicIndex]?.musicImg
-                    ?.split(',')
-                    .map((item, index) => {
-                      return <img class={styles.staff} src={item} key={item} />;
-                    })}
-                </TransitionGroup>
-              </>
-            )}
 
             <div class={styles.rightBtns}>
               <img