Sat Nov 25 22:58:00 CST 2023 inscode

src/App.vue

-<script setup>
-    import GameChart from './components/GameChart.vue'
-import SearchGrade from './components/SearchGrade.vue'
-import Draw from './components/draw/Draw.vue'
-import Commit from './components/commit/Commit.vue'
-import { reactive, onBeforeMount,onMounted } from 'vue';
-import html2canvas from 'html2canvas';
-
-// state
-const state = reactive({
-  current: '评论'
-})
-
-/** 下载图片 */
-const downloadBase64 = (content,fileName) => {
-  const base64ToBlob = function (code) {
-    let parts = code.split(';base64,');
-    let contentType = parts[0].split(':')[1];
-    let raw = window.atob(parts[1]);
-    let rawLength = raw.length;
-    let uInt8Array = new Uint8Array(rawLength);
-    for (let i = 0; i < rawLength; ++i) {
-      uInt8Array[i] = raw.charCodeAt(i);
-    }
-
-    return new Blob([uInt8Array], {
-      type: contentType
-    });
-  };
-  let aLink = document.createElement('a');
-  let blob = base64ToBlob(content);
-  aLink.download = fileName + '.png';
-  aLink.href = URL.createObjectURL(blob);
-  aLink.click();
-};
-
-// 截图
-const shotAction=()=>{
-    html2canvas(document.getElementById('render-id')).then(function(canvas) {
-    console.log('canvas',canvas)
-    const base64 = canvas.toDataURL().replace(/^data:image\/(png|jpg);base64,/, '');
-    const base64img = `data:image/png;base64,${base64}`;
-    downloadBase64(base64img, state.current);
-    // document.body.appendChild(canvas);
-});
-}
-
-onMounted(()=>{
-    console.log('html2canvas',html2canvas)
-})
-
-// 之前
-onBeforeMount(() => {
-  const href = window.location.href
-  const data = {}
-  const urlArray = href.split('?')
-  const urlLength = urlArray.length
-  if (urlLength > 1) {
-    urlArray[urlLength - 1].split('&').forEach(item => {
-      const itemArray = item.split('=')
-      const key = itemArray[0]
-      const value = itemArray[1]
-      data[key] = value
-    })
-    console.log('urlArray',urlArray)
-    if (data['type'] = 'csdn_game') {
-      state.current = '新星赛道选手信息可视化'
-    }
-    else if(data['type'] = 'csdn_grade'){
-      state.current = 'grade查询分数'
-    }
-    else if(data['type'] = 'draw'){
-      state.current = '抽奖'
-    }
-    else if(data['type'] = 'commit'){
-      state.current = '评论'
-    }
-  }
-})
-</script>
-
-<template>
-    <div class="container-main">
-        <div style="text-align: center;padding: 20px;">
-            <a-radio-group v-model:value="state.current" name="radioGroup">
-                <a-radio value="grade查询分数">csdn查询分数</a-radio>
-                <a-radio value="新星赛道选手信息可视化">csdn新星赛道可视化</a-radio>
-                <a-radio value="抽奖">随机抽奖</a-radio>
-                <a-radio value="评论">csdn分析评论</a-radio>
-            </a-radio-group>
-            <a-button type="primary" @click="shotAction">
-                截图
-            </a-button>
-        </div>
-        <div id="render-id">
-            <SearchGrade v-if="state.current === 'grade查询分数'" />
-            <GameChart v-else-if="state.current === '新星赛道选手信息可视化'" />
-            <Commit v-else-if="state.current === '评论'" />
-            <Draw v-else />
-        </div>
-    </div>
-</template>
-
-<style scoped>
-    .container-main {
-        position: absolute;
-        width: 100vw;
-        height: 100vh;
-        padding: 10px;
-        margin: 0;
-    }
-</style>
+<script setup>
+    
+import GameChart from './components/GameChart.vue'
+import SearchGrade from './components/SearchGrade.vue'
+import Draw from './components/draw/Draw.vue'
+import Commit from './components/commit/Commit.vue'
+import { reactive, onBeforeMount,onMounted } from 'vue';
+import html2canvas from 'html2canvas';
+
+// state
+const state = reactive({
+  current: '评论'
+})
+
+/** 下载图片 */
+const downloadBase64 = (content,fileName) => {
+  const base64ToBlob = function (code) {
+    let parts = code.split(';base64,');
+    let contentType = parts[0].split(':')[1];
+    let raw = window.atob(parts[1]);
+    let rawLength = raw.length;
+    let uInt8Array = new Uint8Array(rawLength);
+    for (let i = 0; i < rawLength; ++i) {
+      uInt8Array[i] = raw.charCodeAt(i);
+    }
+
+    return new Blob([uInt8Array], {
+      type: contentType
+    });
+  };
+  let aLink = document.createElement('a');
+  let blob = base64ToBlob(content);
+  aLink.download = fileName + '.png';
+  aLink.href = URL.createObjectURL(blob);
+  aLink.click();
+};
+
+// 截图
+const shotAction=()=>{
+    html2canvas(document.getElementById('render-id'),{
+        useCORS:true,
+        proxy:'inscode.csdn.net'
+    }).then(function(canvas) {
+    console.log('canvas',canvas)
+    const base64 = canvas.toDataURL().replace(/^data:image\/(png|jpg);base64,/, '');
+    const base64img = `data:image/png;base64,${base64}`;
+    downloadBase64(base64img, state.current);
+    // document.body.appendChild(canvas);
+});
+}
+
+onMounted(()=>{
+    console.log('html2canvas',html2canvas)
+})
+
+// 之前
+onBeforeMount(() => {
+  const href = window.location.href
+  const data = {}
+  const urlArray = href.split('?')
+  const urlLength = urlArray.length
+  if (urlLength > 1) {
+    urlArray[urlLength - 1].split('&').forEach(item => {
+      const itemArray = item.split('=')
+      const key = itemArray[0]
+      const value = itemArray[1]
+      data[key] = value
+    })
+    console.log('urlArray',urlArray)
+    if (data['type'] = 'csdn_game') {
+      state.current = '新星赛道选手信息可视化'
+    }
+    else if(data['type'] = 'csdn_grade'){
+      state.current = 'grade查询分数'
+    }
+    else if(data['type'] = 'draw'){
+      state.current = '抽奖'
+    }
+    else if(data['type'] = 'commit'){
+      state.current = '评论'
+    }
+  }
+})
+</script>
+
+<template>
+    <div class="container-main">
+        <div style="text-align: center;padding: 20px;">
+            <a-radio-group v-model:value="state.current" name="radioGroup">
+                <a-radio value="grade查询分数">csdn查询分数</a-radio>
+                <a-radio value="新星赛道选手信息可视化">csdn新星赛道可视化</a-radio>
+                <a-radio value="抽奖">随机抽奖</a-radio>
+                <a-radio value="评论">csdn分析评论</a-radio>
+            </a-radio-group>
+            <a-button type="primary" @click="shotAction">
+                截图
+            </a-button>
+        </div>
+        <div id="render-id">
+            <SearchGrade v-if="state.current === 'grade查询分数'" />
+            <GameChart v-else-if="state.current === '新星赛道选手信息可视化'" />
+            <Commit v-else-if="state.current === '评论'" />
+            <Draw v-else />
+        </div>
+    </div>
+</template>
+
+<style scoped>
+    .container-main {
+        position: absolute;
+        width: 100vw;
+        height: 100vh;
\ No newline at end of file
+        padding: 10px;
+        margin: 0;
+    }
+</style>

src/components/draw/Draw.vue

@@ -111,6 +111,6 @@ const restartGameBtn = () => {
     startGameBtn()
 }
 onMounted(() => {
-    mockUserData(13)
+    mockUserData(26)
 })
 </script>
\ No newline at end of file