VUE根据图片做图片形状的词云效果

VUE根据图片形状制作词云效果

针筒图片：（是png）

 效果图：（文章底部有完整代码）

限制横竖显示， 在两种颜色中随机。

爱心图片：（是白底的png）

效果图：完全随机颜色，看下面代码

 盾牌图片：

 效果图：

使用 echarts-wordcloud

npm install echarts
npm install echarts-wordcloud

 需要注意版本号，echarts-wordcloud 需要是2.0以上，echarts需要是5.0以上

代码：

<template>
	<div class="char2" id="char2" ref="chart"></div>
</template>
<script>
	import * as echarts from 'echarts';
	import 'echarts-wordcloud';
	//转换图片为base64函数
	function getBase64Image(img) {
		var canvas = document.createElement("canvas");
		canvas.width = img.width;
		canvas.height = img.height;
		var ctx = canvas.getContext("2d");
		ctx.drawImage(img, 0, 0, img.width, img.height);
		var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
		var dataURL = canvas.toDataURL("image/" + ext);
		return dataURL;
	}
	export default {

		data() {
			return {
				worddata: [],
				image: ""
			};
		},
		mounted() {
			let list = []
			let i = 1;
			for (i; i < 80; i++) {
				let aa = {
					name: 'word' + i,
					value: i
				}
				list.push(aa)
			}
			this.worddata = list;

			var image = new Image();
			image.src = require('@/assets/xin.png');
			image.setAttribute("crossOrigin", 'Anonymous')
			image.onload = ()=> {
				var base64 = getBase64Image(image);
				this.initCharts(base64); //初始化
			}
		},
		beforeDestroy() {
			// if (!this.chart) {
			//   return;
			// }
			// this.chart.dispose();
			// this.chart = null;
		},
		methods: {
			initCharts(base64) {
				var maskImage = new Image();
				console.log(base64);


				maskImage.src = base64

				console.log(this.worddata);

				let a = this.$refs.chart;

				let myChart2 = echarts.init(a);
				myChart2.setOption({
					title: {
						//text: "center"
					},
					backgroundColor: "#E6E6FA",
					tooltip: {},

					series: [{
						type: 'wordCloud',
						shape: 'circle',
						keepAspect: false,
						//此处添加图片的base64格式
						maskImage: maskImage,
						left: 'center',
						top: '-15px',
						width: '98%',
						height: '100%',
						right: null,
						bottom: null,
						sizeRange: [18, 60],
						rotationRange: [-90, 90],
						rotationStep: 45,
						gridSize: 1,
						drawOutOfBound: false,
						layoutAnimation: true,
						textStyle: {
							fontFamily: 'sans-serif',
							fontWeight: 'bold',
							color: function() {
								return 'rgb(' + [
									Math.round(Math.random() * 160),
									Math.round(Math.random() * 160),
									Math.round(Math.random() * 160)
								].join(',') + ')';
							}
						},
						emphasis: {
							// focus: 'self',
							textStyle: {
								textShadowBlur: 5,
								textShadowColor: '#333'
							}
						},
						//数据
						data: this.worddata,
					}, ],
				});
				//随着屏幕大小调节图表
				window.addEventListener("resize", () => {
					myChart.resize();
				});
				//点击事件   
				myChart2.on('click', function(params) {
					alert(params.name);
				});
			},
		},
	};
</script>
<style scoped>
	.char2 {
		width: 600px;
		height: 600px;
	}
</style>

针筒图片代码：

横竖显示， 在两种颜色中随机。

<template>
	<div class="char2" id="char2" ref="chart"></div>
</template>
<script>
	import * as echarts from 'echarts';
	import 'echarts-wordcloud';
  
	//转换图片为base64函数
	function getBase64Image(img) {
    let width =500;
    let height =200;
		var canvas = document.createElement("canvas");
    // canvas.width = img.width;
    // canvas.height = img.height;	
    canvas.width = width;
		canvas.height = height;
		var ctx = canvas.getContext("2d");
		ctx.drawImage(img, 0, 0, width, height);
		var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
		var dataURL = canvas.toDataURL("image/" + ext);
		return dataURL;
	}
	export default {

		data() {
			return {
				worddata: [],
				image: ""
			};
		},
		mounted() {
			let list = []
			let i = 1;
			for (i; i < 220; i++) {
				let aa = {
					name: 'word' + i,
					value: i
				}
				list.push(aa)
			}
			this.worddata = list;

			var image = new Image();
			image.src = require('@/assets/msdebookh5/isPublic/zhen4.png');
			// image.src = require('@/assets/msdebookh5/isPublic/zhen.png');
			image.setAttribute("crossOrigin", 'Anonymous')
			image.onload = ()=> {
				var base64 = getBase64Image(image);
				this.initCharts(base64); //初始化
			}
		},
		beforeDestroy() {
			// if (!this.chart) {
			//   return;
			// }
			// this.chart.dispose();
			// this.chart = null;
		},
		methods: {
			initCharts(base64) {
				var maskImage = new Image();
				console.log(base64);


				maskImage.src = base64

				// console.log(this.worddata);

				let a = this.$refs.chart;

				let myChart2 = echarts.init(a);
        console.log('myChart2',myChart2);
				myChart2.setOption({
					title: {
						//text: "center"
					},
					backgroundColor: "#ffffff",
					tooltip: {},

					series: [{
						type: 'wordCloud',
						shape: 'circle',
						keepAspect: false,
						//此处添加图片的base64格式
						maskImage: maskImage,
						left: 'center',
						top: '-15px',
						width: '98%',
						height: '100%',
						right: null,
						bottom: null,
						// sizeRange: [0, 0],
						sizeRange: [2, 20],
						rotationRange: [90, 0],
						// rotationRange: [0, 90],
						// rotationRange: [-90, 90],
						rotationStep: 90,
            
						gridSize: 1,
						drawOutOfBound: false,
						layoutAnimation: true,
						textStyle: {
							// fontFamily: 'sans-serif',
							// fontWeight: 'bold',
              normal:{
                
                color: function() {
                  let arr = ['a', 'b']
                  let index = Math.floor(Math.random() * arr.length)
                  let yanse =  index=='1'?'#38A0E7':'#50C6A3'
                	return yanse;
                }
              }
						},
						emphasis: {
							// focus: 'self',
							textStyle: {
								textShadowBlur: 5,
								textShadowColor: '#333'
							}
						},
						//数据
						data: this.worddata,
					}, ],
				});
				//随着屏幕大小调节图表
				window.addEventListener("resize", () => {
					myChart.resize();
				});
				//点击事件   
				myChart2.on('click', function(params) {
					alert(params.name);
				});
			},
		},
	};
</script>
<style scoped>
	.char2 {
		width: 500px;
		height: 200px;
	}
</style>