|
|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
+ <div ref="board">
|
|
|
<div>{{ $store.state.userInfo }}</div>
|
|
|
<div>
|
|
|
<el-cascader
|
|
|
@@ -12,11 +12,22 @@
|
|
|
>
|
|
|
</el-cascader>
|
|
|
</div>
|
|
|
+ <img
|
|
|
+ data-v-bea0d8aa=""
|
|
|
+ id="img1"
|
|
|
+ ref="img1"
|
|
|
+ src="https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/演讲视角21668660541446.jpg?v=1668838015869"
|
|
|
+ />
|
|
|
+ <canvas id="ctx_back" ref="ctx_back"></canvas>
|
|
|
+ <el-button type="primary" size="default" @click="handleSave"
|
|
|
+ >保存</el-button
|
|
|
+ >
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { regionData, CodeToText } from "element-china-area-data";
|
|
|
+import html2canvas from "html2canvas";
|
|
|
const Data = regionData.filter((ele) => {
|
|
|
return ele.value == "440000";
|
|
|
});
|
|
|
@@ -26,6 +37,8 @@ export default {
|
|
|
options: Data[0].children,
|
|
|
selectedOptions: [], //"440000","440100"
|
|
|
loc: "",
|
|
|
+ canvas_base: null,
|
|
|
+ ctx_base: null,
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -41,8 +54,60 @@ export default {
|
|
|
console.log(this.selectedOptions);
|
|
|
this.loc = "广东省" + loc;
|
|
|
},
|
|
|
+ handleSave() {
|
|
|
+ // let url = this.$refs.board;
|
|
|
+ // 手动创建一个 canvas 标签
|
|
|
+ const canvas = document.createElement("canvas");
|
|
|
+ // 获取父标签，意思是这个标签内的 DOM 元素生成图片
|
|
|
+ // imageTofile是给截图范围内的父级元素自定义的ref名称
|
|
|
+ let canvasBox = this.$refs.board;
|
|
|
+ // 获取父级的宽高
|
|
|
+ const width = parseInt(window.getComputedStyle(canvasBox).width);
|
|
|
+ const height = parseInt(window.getComputedStyle(canvasBox).height);
|
|
|
+ // 宽高 * 2 并放大 2 倍 是为了防止图片模糊
|
|
|
+ canvas.width = width * 2;
|
|
|
+ canvas.height = height * 2;
|
|
|
+ canvas.style.width = width + "px";
|
|
|
+ canvas.style.height = height + "px";
|
|
|
+ const context = canvas.getContext("2d");
|
|
|
+ context.scale(2, 2);
|
|
|
+ const options = {
|
|
|
+ backgroundColor: null,
|
|
|
+ canvas: canvas,
|
|
|
+ useCORS: true,
|
|
|
+ allowTaint: true,
|
|
|
+ };
|
|
|
+ var a = canvasBox.getElementsByTagName("img");
|
|
|
+ for (var i = 0; i < a.length; i++) {
|
|
|
+ a[i].crossOrigin = "anonymous";
|
|
|
+ }
|
|
|
+ let _this = this;
|
|
|
+ html2canvas(canvasBox, {
|
|
|
+ backgroundColor: null,
|
|
|
+ canvas: canvas,
|
|
|
+ useCORS: true,
|
|
|
+ allowTaint: true,
|
|
|
+ }).then((canvas) => {
|
|
|
+ // toDataURL 图片格式转成 base64
|
|
|
+ let dataURL = canvas.toDataURL("image/png");
|
|
|
+ console.log(dataURL);
|
|
|
+ });
|
|
|
+ },
|
|
|
},
|
|
|
mounted() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.canvas_base = this.$refs.ctx_back;
|
|
|
+ this.ctx_base = this.canvas_base.getContext("2d");
|
|
|
+ let img = this.$refs.img1;
|
|
|
+ let _this = this
|
|
|
+ img.onload = function () {
|
|
|
+ let width = parseInt(this.width);
|
|
|
+ let height = parseInt(this.height);
|
|
|
+ _this.canvas_base.width = width;
|
|
|
+ _this.canvas_base.height = height;
|
|
|
+ _this.ctx_base.drawImage(this, 0, 0, width, height);
|
|
|
+ };
|
|
|
+ });
|
|
|
console.log(this.$store);
|
|
|
},
|
|
|
};
|
