页面切图

components/Cn-htmlToImg/Cn-htmlToImg.vue

@@ -0,0 +1,59 @@
+<template>
+    <view>
+        <view class="html2canvas" :prop="domId" :id="domId" :change:prop="canvasImage.generateImage">
+            <slot></slot>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    name: 'html2canvas',
+    props: {
+        domId: {
+            type: String,
+            required: true
+        }
+    },
+    methods: {
+        htmlToCanvas (option) {
+            let posterImg = option.posterImg;
+            console.log(posterImg);
+            this.$emit('renderFinish', posterImg);
+        }
+    }
+}
+</script>
+<script lang="renderjs" module="canvasImage">
+import html2canvas from 'html2canvas'
+export default {
+  methods: {
+    // 生成图片需要调用的方法
+    generateImage(domId) {
+        console.log(123);
+        // 获取设备dpi
+        setTimeout(() => {
+            console.log(domId);
+            let dom =  document.getElementById(domId);
+            console.log(dom);
+            html2canvas(dom, {
+                scale: 8,
+                useCORS: true,
+
+            }).then((canvas) => {
+                // this.$refs.header.appendChild(canvas);
+                const posterImg = canvas.toDataURL()
+                this.$ownerInstance.callMethod('htmlToCanvas', {	
+                    posterImg: posterImg
+                })
+            }).catch((err) => {
+                console.log(err)
+            })
+        }, 1000);
+    }
+  }
+}
+</script>
+
+
+<style lang="scss"></style>

manifest.json

@@ -1,5 +1,5 @@
 {
-    "name" : "灿能电力",
+    "name" : "灿能物联",
     "appid" : "__UNI__88BC25B",
     "description" : "",
     "versionName" : "1.0.0",

pages.json

@@ -402,8 +402,9 @@
     "navigationBarTextStyle": "black",
     "navigationBarTitleText": "灿能电力",
     "navigationBarBackgroundColor": "#ffffff",
-    "backgroundColor": "#f3f4f5",
+    "backgroundColor": "#f3f4f5"
     // #ifdef H5
+    ,
     "navigationStyle": "custom"
     // #endif
   },

pages/device/APF/detail.vue

@@ -3,8 +3,9 @@
         <view slot='body'>
             <view class='detail'>
                 <view class="detail-header">
-                    <view class="header" ref="header" @click="htmlToCanvas">
+                    <Cn-htmlToImg domId="header" @renderFinish="renderFinish">
-                        <img src="/static/test2.pic.png" mode="widthFix" style="width: 100%;object-fit:cover" />
+                        <view class="header" ref="header" @click="previewImg">
+                            <img src="https://i.328888.xyz/2023/03/13/vQhGC.jpeg" style="width: 100%;object-fit:cover" />
                             <view class="point" :style="{ left: '480rpx', top: '80rpx' }">负载THDI(%)
                                 <view class="grid-card mt10">
                                     <view class="grid-card-content-2">
@@ -88,6 +89,7 @@
                                 </view>
                             </view>
                         </view>
+                    </Cn-htmlToImg>
                     <!-- <view class="des">
                         <text>设备基础信息</text>
                         <text class="ml10">设备状态</text>
@@ -128,7 +130,6 @@ import xieBo from "./comp/xieBo.vue";
 import power from "./comp/power.vue";
 import oscillogram from "./comp/oscillogram.vue";
 import IO from "./comp/IO.vue";
-import html2canvas from 'html2canvas';
 
 
 export default {
@@ -144,6 +145,7 @@ export default {
             loading: false,
             navMenuActive: 0,
             navHeight: 0,
+            img: '',
             navMenuList: [{
                 text: '基本'
             }, {
@@ -267,19 +269,13 @@ export default {
                 }).exec()
             }, 1000);
         },
-        htmlToCanvas () {
+        renderFinish (e) {
-            // 获取设备dpi
+            this.img = e
-            let dom = this.$refs.header.$el
+        },
-            html2canvas(dom, {
+        previewImg () {
-                scale: 8,
-            }).then((canvas) => {
-                // this.$refs.header.appendChild(canvas);
-                console.log(canvas);
             uni.previewImage({
-                    current: 0,
+                urls: [this.img],
-                    urls: [canvas.toDataURL('image/png')]
             })
-            });
         }
     },
     onLoad (options) {
@@ -288,6 +284,7 @@ export default {
 
 }
 </script>
+
 <style lang='scss'>
 .detail {
 

pages/device/DVR/detail.vue

@@ -4,7 +4,7 @@
             <view class='detail'>
                 <view class="detail-header">
                     <view class="header">
-                        <image src="/static/test2.pic.png" mode="widthFix" style="width: 100%;" />
+                        <image src="../../../static/test2.png" mode="widthFix" style="width: 100%;" />
                     </view>
                     <!-- <view class="des">
                     <text>设备基础信息</text>