From 9b321a172a04ea55bd4864d87db9c8f5986640c8 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Wed, 21 Feb 2024 18:40:44 +0800
Subject: [PATCH] =?UTF-8?q?pref(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E6=88=AA=E5=9B=BE=E5=B7=A5=E5=85=B7=E8=A7=86=E5=9B=BE?=
 =?UTF-8?q?=E5=AF=BC=E5=87=BA=E5=9B=BE=E7=89=87=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/frontend/package.json                    |  1 +
 .../canvas/customComponent/UserViewDialog.vue |  4 ++--
 .../src/components/canvas/utils/utils.js      | 24 +++++++++++++++++++
 core/frontend/src/utils/CanvasUtils.js        | 11 +++++++++
 4 files changed, 38 insertions(+), 2 deletions(-)
 create mode 100644 core/frontend/src/utils/CanvasUtils.js

diff --git a/core/frontend/package.json b/core/frontend/package.json
index 62bd8cfb8f..dddaf0833f 100644
--- a/core/frontend/package.json
+++ b/core/frontend/package.json
@@ -47,6 +47,7 @@
     "file-saver": "^2.0.5",
     "fit2cloud-ui": "^1.8.0",
     "flv.js": "^1.6.2",
+    "html-to-image": "^1.11.11",
     "html2canvasde": "^v1.1.4-de",
     "jquery": "^3.1.1",
     "js-base64": "^3.7.2",
diff --git a/core/frontend/src/components/canvas/customComponent/UserViewDialog.vue b/core/frontend/src/components/canvas/customComponent/UserViewDialog.vue
index 417294cd07..96a55972aa 100644
--- a/core/frontend/src/components/canvas/customComponent/UserViewDialog.vue
+++ b/core/frontend/src/components/canvas/customComponent/UserViewDialog.vue
@@ -95,7 +95,7 @@ import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
 import LabelNormalText from '@/views/chart/components/normal/LabelNormalText'
 import html2canvas from 'html2canvasde'
 import { hexColorToRGBA } from '@/views/chart/chart/util'
-import { deepCopy, exportExcelDownload, exportImg, imgUrlTrans } from '@/components/canvas/utils/utils'
+import {deepCopy, exportExcelDownload, exportImg, exportImgNew, imgUrlTrans} from '@/components/canvas/utils/utils'
 import { activeWatermark } from '@/components/canvas/tools/watermark'
 import { proxyUserLoginInfo, userLoginInfo } from '@/api/systemInfo/userLogin'
 
@@ -303,7 +303,7 @@ export default {
         this.resizeChart()
         setTimeout(() => {
           this.initWatermark()
-          exportImg(this.chart.name, (params) => {
+          exportImgNew(this.chart.name, (params) => {
             this.exporting = false
             this.resizeChart()
             setTimeout(() => {
diff --git a/core/frontend/src/components/canvas/utils/utils.js b/core/frontend/src/components/canvas/utils/utils.js
index 3237fa64e6..60fea8b7f7 100644
--- a/core/frontend/src/components/canvas/utils/utils.js
+++ b/core/frontend/src/components/canvas/utils/utils.js
@@ -14,6 +14,7 @@ import xssCheck from 'xss'
 import Vue from 'vue'
 import { exportDetails, innerExportDetails } from '@/api/panel/panel'
 import { getLinkToken, getToken } from '@/utils/auth'
+import { toPngUrl } from '@/utils/CanvasUtils'
 
 export function deepCopy(target) {
   if (typeof target === 'object' && target !== null) {
@@ -254,6 +255,29 @@ export function exportImg(imgName, callback) {
   })
 }
 
+export function exportImgNew(imgName, callback) {
+  const canvasID = document.getElementById('chartCanvas')
+  // 保存原始的设备像素比值
+  const originalDPR = window.devicePixelRatio
+  // 将设备像素比设置为1
+  window.devicePixelRatio = 1
+  toPngUrl(canvasID, (pngUrl) => {
+    try {
+      const a = document.createElement('a')
+      a.setAttribute('download', imgName + '.png')
+      a.href = pngUrl
+      document.body.appendChild(a)
+      a.click()
+      document.body.removeChild(a)
+      window.devicePixelRatio = originalDPR
+      callback()
+    } catch (e) {
+      window.devicePixelRatio = originalDPR
+      callback()
+    }
+  })
+}
+
 export function dataURLToBlob(dataurl) { // ie 图片转格式
   const arr = dataurl.split(',')
   const mime = arr[0].match(/:(.*?);/)[1]
diff --git a/core/frontend/src/utils/CanvasUtils.js b/core/frontend/src/utils/CanvasUtils.js
new file mode 100644
index 0000000000..6c59e37048
--- /dev/null
+++ b/core/frontend/src/utils/CanvasUtils.js
@@ -0,0 +1,11 @@
+import { toPng } from 'html-to-image'
+
+export function toPngUrl(refContainer, callBack) {
+  toPng(refContainer)
+    .then(dataUrl => {
+      callBack(dataUrl)
+    })
+    .catch(error => {
+      console.error('oops, toPngUrl went wrong!', error)
+    })
+}