update

src/views/list/image/index.vue

@@ -5,6 +5,37 @@
       <a-col :span="24">
         <a-spin :loading="state.loading" tip="写入中..." style="width: 100%;">
           <a-card class="general-card" title="开机图片">
+            <a-row :gutter="20">
+              <a-col :span="4" v-for="i in [
+                { name: '罗狮虎', url: '/img1.png'},
+                { name: '离线小恐龙', url: '/img2.png'},
+                { name: '不忘初心牢记使命', url: '/img3.png'},
+                { name: '为人民服务', url: '/img4.png'},
+                { name: '严禁收听敌台广播', url: '/img5.png'},
+                { name: '爱因斯坦', url: '/img6.png'}
+              ]">
+                <t-card :style="{ width: '100%' }">
+                  <template #cover>
+                    <img :title="i.name" :src="i.url">
+                  </template>
+                  <template #footer>
+                    <t-row :align="'middle'" justify="center" style="gap: 24px">
+                      <t-col flex="auto" style="display: inline-flex; justify-content: center">
+                        <t-button variant="text" shape="square" @click="upImg(i)">
+                          <thumb-up-icon />
+                        </t-button>
+                      </t-col>
+                      <t-col flex="auto" style="display: inline-flex; justify-content: center">
+                        <t-button variant="text" shape="square" @click="useImg(i)">
+                          <check-double-icon />
+                        </t-button>
+                      </t-col>
+                    </t-row>
+                  </template>
+                </t-card>
+              </a-col>
+            </a-row>
+            <t-pagination style="margin: 10px;" :total="6" showPageNumber :showPageSize="false" />
             <a-tabs :active-key="state.activeKey" @change="(e)=>{state.activeKey = e}">
               <a-tab-pane :key="1" title="LOSEHU 117"></a-tab-pane>
               <a-tab-pane :key="2" title="LOSEHU 118+"></a-tab-pane>
@@ -23,6 +54,7 @@
 </template>
 
 <script lang="ts" setup>
+import { ThumbUpIcon, CheckDoubleIcon } from 'tdesign-icons-vue-next';
 import { reactive, nextTick } from 'vue';
 import { useAppStore } from '@/store';
 import { eeprom_write, eeprom_reboot, eeprom_init } from '@/utils/serial.js';
@@ -39,6 +71,64 @@ const state : {
   loading: false
 })
 
+const upImg = (i:any) => {
+  alert('图片工坊即将推出');
+}
+
+const useImg = (i:any) => {
+    const canvas = document.createElement("canvas");
+    canvas.width = 128;
+    canvas.height = 64;
+    const canvas2 = canvas.cloneNode();
+    const canvasDiv = document.getElementById('canvasDiv');
+    canvasDiv.innerHTML = "";
+    canvasDiv?.append(canvas, canvas2);
+    const img = new Image()
+    img.src = i.url;
+    img.onload = () => {
+      const ctx = canvas.getContext('2d');
+      ctx?.drawImage(img, 0, 0, 128, 64);
+      const imageData = ctx?.getImageData(0, 0, canvas.width, canvas.height).data;
+      function getPixel(x: any, y: any) {
+          const index = y * 128 + x;
+          const i = index * 4;
+          return imageData[i] + imageData[i + 1] + imageData[i + 2] > 128 * 3 ? 0 : 1;
+      }
+
+      const ctx2 = canvas2.getContext('2d');
+      const imageData2 = ctx2.getImageData(0, 0, canvas2.width, canvas2.height);
+      for (let y = 0; y < 64; y++) {
+          for (let x = 0; x < 128; x++) {
+              const index = y * 128 + x;
+              const i = index * 4;
+              const pixel = !getPixel(x, y);
+              imageData2.data[i] = pixel * 255;
+              imageData2.data[i + 1] = pixel * 255;
+              imageData2.data[i + 2] = pixel * 255;
+              imageData2.data[i + 3] = 255;
+          }
+      }
+      ctx2.putImageData(imageData2, 0, 0);
+
+      const outputArray = new Uint8Array(1024);
+      // getPixel(i) outputs the pixel value for any x y coordinate. 0 = black, 1 = white.
+      // the outputArray is 1024 bytes, where each byte is 8 pixels IN VERTICAL ORDER.
+
+      let i = 0;
+      for (let y = 0; y < 64; y += 8) {
+          for (let x = 0; x < 128; x++) {
+              let byte = 0;
+              for (let i = 0; i < 8; i++) {
+                  byte |= getPixel(x, y + i) << i;
+              }
+              outputArray[i++] = byte;
+          }
+      }
+
+      state.binaryFile = outputArray;
+    }
+}
+
 const selectFile = () => {
   const input = document.createElement('input');
   input.type = 'file';