小程序画布功能+JAVA用KUMO生成词云图片

迈不过友情╰ 2022-03-27 20:37 257阅读 0赞

# 小程序画布功能+JAVA用KUMO生成词云图片 #

KUMO git地址：[https://github.com/kennycason/kumo][https_github.com_kennycason_kumo]  
原理：利用Kumo生成词云，并转换成64位传到小程序，小程序转码64位，并利用画布合成生成图片

### 先看后台代码 ###

依赖引入(gradle方式,maven的一样)  
![在这里插入图片描述][20190110144631534.png]  
生成词云代码并转64位

@ResponseBody
    @RequestMapping("/test/ciyun")
    public String getCloud() throws IOException{ 
      FrequencyAnalyzer frequencyAnalyzer = new FrequencyAnalyzer();  
      frequencyAnalyzer.setWordFrequenciesToReturn(600);  
      frequencyAnalyzer.setMinWordLength(2);  
      frequencyAnalyzer.setWordTokenizer(new ChineseWordTokenizer()); //引入中文解析器
      final List<WordFrequency> wordFrequencyList = new ArrayList<>();
       //随机生成一些文字
       for(int i=0;i<20;i++) {
    	   WordFrequency a = new WordFrequency("哈哈"+i, 1);
    	   wordFrequencyList.add(a);
       }
       //final List<WordFrequency> wordFrequencyList = frequencyAnalyzer.load("C:\\aaa.txt");  //可以通过加载本地文件来读入文字
       Dimension dimension = new Dimension(520,520);  //设置图片分辨率  
       WordCloud wordCloud = new WordCloud(dimension,CollisionMode.PIXEL_PERFECT);  //此处的设置采用内置常量即可生成词云对象  
       wordCloud.setPadding(5);  //设置边界 
       Font font = new Font("STSong-Light", 2, 12);  //设置字体2, 1+(int)(Math.random()*(20+1-1))
       wordCloud.setColorPalette(new ColorPalette(new Color(0x4747EA), new Color(0x408DF1), new Color(0xBBB1FA), new Color(0xABABBA), new Color(0x93DCB8), new Color(0x82E4FF)));  //设置词云显示的三种颜色越靠前设置表示词频越高的词语的颜色  
       wordCloud.setKumoFont(new KumoFont(font));  
       wordCloud.setBackgroundColor(new Color(255,255,255));   //设置背景色  
       wordCloud.setBackground(new CircleBackground(255));   //设置背景图层为圆形  
       wordCloud.setFontScalar(new SqrtFontScalar(25, 26));  
       wordCloud.build(wordFrequencyList); //生成词云 
       File htmlFile = File.createTempFile("temp"+1+(int)(Math.random()*(100000000+1-1)), ".png"); //创建临时文件
       wordCloud.writeToFile(htmlFile.getCanonicalPath()); //词云图片生成到临时文件中
       //wordCloud.writeToFile("C:\\qqqq.png"); //词云生成到本地文件中
       String base64 = getImageStr(htmlFile.getCanonicalPath());
       deleteFile(htmlFile); // 删除文件
       return base64;
       }
       //图片转64位
       public String getImageStr(String imgFile) {
    		InputStream inputStream = null;
    	    byte[] data = null;
    	    try {
    	        inputStream = new FileInputStream(imgFile);
    	        data = new byte[inputStream.available()];
    	        inputStream.read(data);
    	        inputStream.close();
    	    } catch (IOException e) {
    	        e.printStackTrace();
    	    }
    	    // 加密
    	    BASE64Encoder encoder = new BASE64Encoder();
    	    return encoder.encode(data);
    	}
       //删除文件
       private void deleteFile(File file) { 
    	if (file.exists()) {//判断文件是否存在 
    		if (file.isFile()) {//判断是否是文件 
    			file.delete();//删除文件 
    		} else if (file.isDirectory()) {//否则如果它是一个目录 
    			File[] files = file.listFiles();//声明目录下所有的文件 files[]; 
    			for (int i = 0;i < files.length;i ++) {//遍历目录下所有的文件 
    			this.deleteFile(files[i]);//把每个文件用这个方法进行迭代 
    		} 
    			file.delete();//删除文件夹 
    		} 
    	} else { 
    		System.out.println("所删除的文件不存在"); 
    	} 
    }

小程序代码  
![在这里插入图片描述][20190110143808277.png]

import base64src from '@/utils/base64src'//注意存放目录
    const context = wx.createCanvasContext('canvasId');
    wx.request({
        url: ip+'/test/ciyun', //开发者服务器接口地址",
        method: 'POST',
        dataType: 'json', //如果设为json，会尝试对返回的数据做一次 JSON.parse
        success: res => {
                let array = wx.base64ToArrayBuffer(res)
                let base64 = wx.arrayBufferToBase64(array)
                context.setFillStyle('#FFF')
                context.fillRect(0, 0, 300, 460)
                context.setFillStyle("#FF6948")
                context.fillRect(0, 0, 300, 40)
                context.setFontSize(18)
                context.setFillStyle("#FFF")
                context.fillText("2019年度关键词", 20, 25, 300)
                base64src.base64src(base64,function(path){
                    context.drawImage(path, 0, 50, 300, 300)
                    context.draw()
                })
        },
        fail: () => {},
        complete: () => {} 
      });
    },
    //base64src.js文件
    const fsm = wx.getFileSystemManager();
    const FILE_BASE_NAME = 'tmp_base64src';
    export function base64src(base64data,callback) {
    const format = "png"
    const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;
    const buffer = wx.base64ToArrayBuffer(base64data);
    fsm.writeFile({
        filePath,
        data: buffer,
        encoding: 'binary',
        success() {
            callback(filePath)
        },
        fail() {
            return (new Error('ERROR_BASE64SRC_WRITE'));
        },
    });
    };
    
    export default {
        base64src
    }

效果图：  
![在这里插入图片描述][20190110144148145.png]  
qqqq.png  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTM3NzIy_size_16_color_FFFFFF_t_70]

## 欢迎评论留言 ##

[https_github.com_kennycason_kumo]: https://github.com/kennycason/kumo
[20190110144631534.png]: /images/20220328/fb629d5328db437fa4a56d88ebe9a779.png
[20190110143808277.png]: /images/20220328/a31269b3856a4c3fb3178566bd15ff82.png
[20190110144148145.png]: /images/20220328/02b18d89b19241378a180581278e9123.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTM3NzIy_size_16_color_FFFFFF_t_70]: /images/20220328/e6f0812b09c14734a19644bbb4cc2fc3.png