20251222

AdminPanel/plugins/utils/drag/dragFileToImage.js

@@ -0,0 +1,68 @@
+/**
+ * 拖拽文件时，创建一个临时的预览图
+ */
+import { nodeFs, getOsPrefix } from "@/utils/nodeFs"
+import g_config from "@/api/config/index";
+/**
+ * 通过canvas将svg转成png
+ * @param {*} path 路径
+ * @returns 返回base64字符串
+ */
+export function dragFile2png(path, number) {
+    // debugger
+    let outPath = g_config.path.dragPreview;    
+    console.log(path, outPath);
+
+    return new Promise((resolve, reject) => {
+        var img = new Image();
+        img.src = getOsPrefix() + path;
+        img.onload = () => {
+            var canvas = document.createElement('canvas');
+            var c = canvas.getContext('2d');
+
+            let width, height;
+            let scale = img.width / 100;
+            if (img.width > img.height) {
+                width = 100;
+                height = img.height / scale;
+            } else {
+                scale = img.height / 100;
+                height = 100;
+                width = img.width / scale;
+            }
+
+
+            canvas.width = width + 20;
+            canvas.height = height + 10;
+            //canvas画图片
+            c.drawImage(img, 10, 10, width, height);
+            c.strokeStyle = "#2961d9";
+            c.lineWidth = 2;
+            c.strokeRect(10, 10, width, height);
+
+            if (number > 1) {
+                c.beginPath();
+                c.arc(width + 10, 10, 10, 0, Math.PI * 2, true);
+                c.closePath();
+                c.fillStyle = "rgba(255,0,0,1)";
+                c.fill();
+
+                c.fillStyle = "#fff";//文字的颜色
+                c.textAlign = 'center';//对齐方式
+                // c.font = '13px "微软雅黑"';       
+                c.fillText(number, width + 10, 13);
+            }
+
+
+            //将图片添加到body中
+            // console.log('转png', canvas.toDataURL('image/png'));
+            let base64 = canvas.toDataURL('image/png')
+            let temp = nodeFs.sync.writeBase64(outPath, base64.split('base64,')[1]);
+            temp.err == 1 ? reject(temp.msg) : resolve({ outPath });
+        }
+
+        img.onerror = (err) => {
+            reject(err);//转换失败
+        }
+    })
+}