页面切图

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>