-
Notifications
You must be signed in to change notification settings - Fork 13
/
demo12-export-png.html
103 lines (90 loc) · 4.09 KB
/
demo12-export-png.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
body {
display: flex;
width: 100vw;
height: 100vh;
}
#chart {
width: 60vw;
height: 60vh;
margin: auto;
position: relative;
}
.actions {
position: absolute;
right: 10px;
top: 10px;
}
</style>
</head>
<body>
<div id="chart">
<div class="actions">
<button class="download1">下载图片</button>
</div>
</div>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="./utils.js"></script>
<script type="text/javascript">
const colors = ['#fcfb3c', '#fcf900', '#ff825a', '#ffd2cb', '#71d362', '#ffd16f', '#ff3d5d', '#ff7218', '#04b3f3', '#bce5ac', '#6e0215', '#69D2E7', '#A7DBDB', '#E0E4CC', '#F38630', '#E94C6F', '#542733', '#5A6A62', '#C6D5CD', '#DB3340', '#E8B71A', '#F7EAC8', '#1FDA9A', '#588C73', '#F2E394', '#F2AE72', '#D96459', '#D0C91F', '#85C4B9', '#008BBA', '#DF514C', '#00C8F8', '#59C4C5', '#FFC33C', '#FBE2B4', '#5E412F', '#FCEBB6', '#78C0A8', '#F07818', '#DE4D4E', '#DA4624', '#DE593A', '#FFD041', '#B1EB00', '#53BBF4', '#FF85CB', '#FF432E', '#354458', '#3A9AD9', '#29ABA4', '#E9E0D6', '#4298B5', '#ADC4CC', '#92B06A', '#E19D29', '#BCCF02', '#5BB12F', '#73C5E1', '#9B539C', '#FFA200', '#00A03E', '#24A8AC', '#0087CB', '#260126', '#59323C', '#F2EEB3', '#BFAF80', '#BFF073', '#0DC9F7', '#7F7F7F', '#F05B47', '#3B3A35', '#20457C', '#5E3448', '#FB6648', '#E45F56', '#A3D39C', '#7ACCC8', '#4AAAA5', '#DC2742', '#AFA577', '#ABA918', '#8BAD39', '#F2671F', '#C91B26', '#9C0F5F', '#60047A', '#0F5959', '#17A697', '#638CA6', '#8FD4D9', '#83AA30', '#1499D3', '#4D6684', '#3D3D3D', '#333333', '#424242', '#00CCD6', '#EFEFEF', '#CCC51C', '#FFE600', '#F05A28', '#B9006E', '#F17D80', '#737495', '#68A8AD', '#C4D4AF']
const [
width,
height
] = calcWidthHeight('#chart')
const maxSize = 15
const rMax = Math.min(width, height) / 2 - maxSize
const imgType = 'png'
const radius = d3.scaleLinear().range([0, rMax])
const angle = d3.scaleLinear().range([0, 2 * Math.PI])
const size = d3.scaleLinear().range([0, maxSize])
const color = d3.scaleOrdinal().range(colors)
const x = d => radius(d.r) * Math.cos(angle(d.angle))
const y = d => radius(d.r) * Math.sin(angle(d.angle))
const svg = d3.select('#chart')
.append('svg')
.attr('width', '100%')
.attr('height', '100%')
const chart = svg.append('g')
.attr('transform', `translate(${width / 2}, ${height / 2})`)
const data = d3.range(250)
.map(() => ({
r: Math.random(),
angle: Math.random(),
size: Math.random()
}))
chart.selectAll('cirle')
.data(data)
.enter()
.append('circle')
.attr('class', 'blendCircle')
.attr('cx', x)
.attr('cy', y)
.attr('r', d => size(d.size))
.attr('fill', (_, i) => color(i))
document.querySelector('.download1')
.addEventListener('click', () => {
const svgAsXML = (new XMLSerializer).serializeToString(document.querySelector('svg'))
const svgData = `data:image/svg+xml;base64,${btoa(svgAsXML)}`
const img = new Image()
img.src = svgData
img.onload = function () {
const canvas = document.createElement('canvas')
canvas.width = width
canvas.height = height
const ctx = canvas.getContext('2d')
ctx.drawImage(img, 0, 0)
const url = canvas.toDataURL(`image/${imgType}`)
const link = document.createElement('a')
link.setAttribute('href', url)
link.setAttribute('download', `image.${imgType}`)
link.click()
}
})
</script>
</body>
</html>