新增水印
This commit is contained in:
zouzhibing
parent
0e2da2d401
commit
5eb7aba333
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "ad",
|
||||
"name": "vue-admin-perfect",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -54,6 +54,12 @@ const othersRouter = {
|
|||
name: 'qrcode',
|
||||
meta: { title: '生成二维码' }
|
||||
},
|
||||
// {
|
||||
// path: 'water-marker',
|
||||
// component: () => import('@/views/other/water-marker.vue'),
|
||||
// name: 'water-marker',
|
||||
// meta: { title: '生成水印' }
|
||||
// },
|
||||
{
|
||||
path: 'right-menu',
|
||||
component: () => import('@/views/other/right-menu.vue'),
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
export const cityIconData = [
|
||||
{
|
||||
adcode: 650000,
|
||||
name: "新疆维吾尔自治区",
|
||||
value:[88.999903,43.607078]
|
||||
},{
|
||||
adcode: 150000,
|
||||
name: "内蒙古自治区",
|
||||
value:[119.24787,42.205741]
|
||||
},
|
||||
,{
|
||||
adcode: 150000,
|
||||
name: "内蒙古自治区",
|
||||
value:[110.627161,41.16628]
|
||||
},
|
||||
{
|
||||
adcode: 540000,
|
||||
name: "西藏自治区",
|
||||
value:[89.483714,30.251951]
|
||||
},
|
||||
{
|
||||
adcode: 630000,
|
||||
name: "青海省",
|
||||
value:[102.064693,37.084008]
|
||||
},
|
||||
{
|
||||
adcode: 530000,
|
||||
name: "云南省",
|
||||
value:[102.187665,25.083688]
|
||||
},
|
||||
{
|
||||
adcode: 610000,
|
||||
name: "陕西省",
|
||||
value:[109.20663,35.018625]
|
||||
},
|
||||
|
||||
]
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
<template>
|
||||
<div :id="id" :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
|
@ -7,7 +6,8 @@ import { geoJson } from './get.js'
|
|||
import * as echarts from 'echarts'
|
||||
import { EChartsType } from 'echarts/core'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
import {cityIconData} from '../js/data.js'
|
||||
import logo from '@/assets/logo.png'
|
||||
const props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
|
|
@ -132,6 +132,12 @@ var convertToLineData = function (data, gps) {
|
|||
}
|
||||
|
||||
const options = {
|
||||
tooltip:{
|
||||
trigger: 'item',
|
||||
formatter(val){
|
||||
// console.log('val==========',val)
|
||||
}
|
||||
},
|
||||
backgroundColor: '#001540',
|
||||
geo: {
|
||||
show: true,
|
||||
|
|
@ -194,6 +200,7 @@ const options = {
|
|||
}
|
||||
}
|
||||
},
|
||||
|
||||
roam: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
|
|
@ -258,7 +265,41 @@ const options = {
|
|||
}
|
||||
},
|
||||
data: convertToLineData(mapData, geoGpsMap)
|
||||
}
|
||||
},
|
||||
{
|
||||
type:'scatter',
|
||||
zlevel: 16,
|
||||
coordinateSystem: 'geo',
|
||||
symbolSize:30,
|
||||
symbol:`image://${logo}`,
|
||||
data:cityIconData,
|
||||
rippleEffect: {
|
||||
period: 4, brushType: 'stroke', scale: 4
|
||||
},
|
||||
tooltip:{
|
||||
trigger:'item',
|
||||
padding:0,
|
||||
borderColor:'black',
|
||||
background:'rgba(0,0,0,0.7)',
|
||||
textStyle: {
|
||||
fontSize:20
|
||||
},
|
||||
formatter(val){
|
||||
console.log('val=======',val)
|
||||
let tipHtml = `
|
||||
<div class="m-info" style=" opacity: 0.95;background: rgba(25,27,29,1);" >
|
||||
<div class="title" style="padding-left: 12px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
background: rgba(25,27,29,1);font-size: 20px;color: white;padding-right: 20px">${val.name}</div>
|
||||
<!-- <div class="content" style=" padding: 12px; background: rgba(0,2,4,1);">-->
|
||||
<!-- <div style=" font-size: 22px; color: #ff0000;">258944</div>-->
|
||||
<!-- </div>-->
|
||||
</div>`
|
||||
return tipHtml
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
}
|
||||
let chart:EChartsType
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<div class="echarts-map">
|
||||
<el-card class="info">Echarts 实现飞线图、地图增加图标、高亮</el-card>
|
||||
<migration-charts height="100%" width="100%" id="migration"/>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
@ -10,8 +10,19 @@ import MigrationCharts from './components/migration/index.vue'
|
|||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss" scoped>
|
||||
.echarts-map{
|
||||
height: calc(100vh - 93px);
|
||||
position: relative;
|
||||
.info{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
font-weight: bold;
|
||||
z-index: 999;
|
||||
}
|
||||
::v-deep(.el-card){
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,123 @@
|
|||
<template>
|
||||
<div class="m-water-marker"></div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { nextTick, onMounted } from 'vue'
|
||||
|
||||
function watermark (options) {
|
||||
const {
|
||||
container = document.body, // 容器
|
||||
width = '100', // canvas元素宽
|
||||
height = '100', // canvas元素高
|
||||
textAlign = 'left', // 文字对齐
|
||||
textBaseline = 'bottom', // 基准线
|
||||
font = '16px Microsoft Yahei', // 字体大小及样式
|
||||
fillStyle = '#000', // 自定义水印的颜色
|
||||
content = '内部文档，请勿外传', // 水印内容
|
||||
globalAlpha = 0.1, // 设置图形和图像透明度的值
|
||||
rotate = 16, // 文字旋转角度
|
||||
zIndex = 1000, // 元素堆叠顺序
|
||||
} = options;
|
||||
|
||||
let canvas = document.createElement('canvas');
|
||||
canvas.setAttribute('width', width);
|
||||
canvas.setAttribute('height', height);
|
||||
let ctx = canvas.getContext('2d'); // 获取 canvas2d 上下文
|
||||
ctx.globalAlpha = globalAlpha;
|
||||
ctx.textAlign = textAlign;
|
||||
ctx.textBaseline = textBaseline;
|
||||
ctx.font = font;
|
||||
ctx.fillStyle = fillStyle;
|
||||
ctx.rotate((Math.PI * rotate) / 180);
|
||||
ctx.fillText(content, 50, 50);
|
||||
|
||||
const base64Url = canvas.toDataURL(); // 返回一个包含图片展示的 data URI
|
||||
|
||||
const __wm = document.querySelector('.__wm');//选择器
|
||||
const watermarkDiv = __wm || document.createElement("div");
|
||||
const styleStr = `
|
||||
position:absolute;
|
||||
top:0px;
|
||||
left:0px;
|
||||
width:100%;
|
||||
height:100%;
|
||||
z-index:${zIndex};
|
||||
pointer-events:none;
|
||||
background-repeat:repeat;
|
||||
background-image:url('${base64Url}')`;
|
||||
|
||||
watermarkDiv.setAttribute('style', styleStr);
|
||||
watermarkDiv.classList.add('__wm'); // 为元素添加“__wm”类名
|
||||
|
||||
document.body.style.position = 'relative';
|
||||
if (!__wm) {
|
||||
document.body.appendChild(watermarkDiv); // 添加元素
|
||||
}
|
||||
|
||||
const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
|
||||
// 检查浏览器是否支持这个API
|
||||
if (MutationObserver) {
|
||||
const args = arguments[0];
|
||||
let mo = new MutationObserver(function () {
|
||||
const __wm = document.querySelector('.__wm');
|
||||
// 只在__wm元素变动才重新调用
|
||||
if ((__wm && __wm.getAttribute('style') !== styleStr) || !__wm || document.body.style.position !== 'relative') {
|
||||
// 避免一直触发
|
||||
mo.disconnect();
|
||||
mo = null;
|
||||
watermark(args);
|
||||
}
|
||||
});
|
||||
mo.observe(document.body, {
|
||||
attributes: true, // 观察目标节点的属性节点
|
||||
subtree: true, // 观察目标节点的所有后代节点
|
||||
childList: true, // 观察目标节点的子节点
|
||||
})
|
||||
}
|
||||
}
|
||||
onMounted(()=>{
|
||||
nextTick(()=>{
|
||||
const canvas = document.createElement('canvas')
|
||||
const width = 100
|
||||
const height = 100
|
||||
canvas.width = width
|
||||
canvas.height = height
|
||||
const context = canvas.getContext('2d')
|
||||
context.font = "normal small-caps lighter 16px sans-serif";
|
||||
context.fillStyle = "#666";
|
||||
context.textAlign = "center";
|
||||
context.textBaseline = "Middle";
|
||||
context.rotate(-10 * Math.PI / 140);
|
||||
context.fillText('content', parseFloat(width) / 2, parseFloat(height) / 2);
|
||||
context.fillText('content', 60, 100);
|
||||
var base64Url = canvas.toDataURL();
|
||||
const watermarkDiv = document.getElementsByClassName('m-water-marker')[0]
|
||||
watermarkDiv.style.backgroundAttachment = "fixed";
|
||||
watermarkDiv.style.backgroundPosition = "center";
|
||||
watermarkDiv.style.backgroundImage = "url(" + canvas.toDataURL("image/png") + ")";
|
||||
// const options = {
|
||||
// container : document.body, // 容器
|
||||
// width : '100', // canvas元素宽
|
||||
// height : '100', // canvas元素高
|
||||
// textAlign : 'left', // 文字对齐
|
||||
// textBaseline : 'bottom', // 基准线
|
||||
// font : '16px Microsoft Yahei', // 字体大小及样式
|
||||
// fillStyle : '#000', // 自定义水印的颜色
|
||||
// content : '内部文档，请勿外传', // 水印内容
|
||||
// globalAlpha : 0.1, // 设置图形和图像透明度的值
|
||||
// rotate : 16, // 文字旋转角度
|
||||
// zIndex : 1000, // 元素堆叠顺序
|
||||
// }
|
||||
watermark(options)
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.m-water-marker{
|
||||
width: 1000px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue