byte二维码在img中展示

发表于2022-01-07|更新于2026-02-24

|浏览量:

睡在哪里都是睡在黑夜里。——贾平凹《废都》

我们使用hutool的工具类生成二维码图片后，如果转为byte数组，返还给前端，我们要放入img中显示

@GetMapping("generateCode")
@ResponseBody
public byte[] generateCode() {
    return QrCodeUtil.generatePng("https://VampireAchao.github.io/", QrConfig.create().setImg(ImgUtil.getImage(URLUtil.url("/img/oss/2020-06-01/head.jpg"))));
}

直接放到src是不行的，需要在前面加一个data:image/jpeg;base64,

最终变成这样

效果图：

前端

相关推荐

2025-11-17

mind-map

或许美化灵魂有不少途径，但我想，阅读是其中易走的，不昂贵的，不须求助他人的捷径。——严歌苓《读书与美丽》 https://github.com/wanglin2/mind-map 思绪 Simple mind map 深度解析：一个简单 & 强大的 Web 思维导图库与跨平台应用生态仓库地址：wanglin2/mind-map开发文档：https://wanglin2.github.io/mind-map-docs/在线使用（网页版思维导图）：https://wanglin2.github.io/mind-map/中文名：思绪思维导图（Simple mind map） 1. 项目定位Simple mind map 是一个不依赖任何前端框架的 JS 思维导图库，同时作者基于该库又构建了一个可直接在线使用的 Web 思维导图应用（基于 Vue2 + ElementUI）。它的目标不是“花哨”，而是专注于：核心逻辑简洁扩展机制清晰（插件化）高度可配置与自定义支持多结构、多格式、多媒体内容节点可以既做“库”又做“产品”，利于二次...

2022-07-14

vue-class-component

人的教养不能够靠别人传授，人必须进行自我修养。一切苦修也绝不是文化修养，教育是通过人的主动性来实现的，教育牢牢地钉在主动性上。——费希特官方文档：https://class-component.vuejs.org/ class-component是vue官方库之一，其可以让你使用class的方式定义、编写组件再加上ts的装饰器，最终效果如下： 12345678910111213141516171819202122232425262728<template> <div> <button v-on:click="decrement">-</button> {{ count }} <button v-on:click="increment">+</button> </div></template><script>import Vue from 'vue'...

2022-07-08

escape、unescape废弃

爱所有人，信任少数人，不负任何人。——莎士比亚今天看到这个API废弃了，提示使用 encodeURI 或 encodeURIComponent 代替。但是貌似有部分符号并没有转义成功最后在示例看到了解决办法 123456789101112131415161718192021222324252627282930var fileName = 'my file(2).txt';var header = "Content-Disposition: attachment; filename*=UTF-8''" + encodeRFC5987ValueChars(fileName);console.log(header);// 输出 "Content-Disposition: attachment; filename*=UTF-8''my%20file%282%29.txt"function encodeRFC5987ValueChars (str) &#...

2023-03-28

vue-smooth-dnd

愤怒是由于别人的过错而惩罚自己——蒲柏分享一个vue拖动组件 github：https://github.com/kutlugsahin/vue-smooth-dnd 在线Demo：https://kutlugsahin.github.io/vue-smooth-dnd/#/cards

2023-06-02

input+type=file同时支持文件和文件夹

1没有知识的旅游者是一只没有翅膀的鸟。——萨阿迪使用的dropzone库，你可以将任意类型的文件拖拽进去上传，如果是目录，则会获取目录内的文件 https://github.com/dropzone/dropzone 代码如下： 1234567891011121314151617181920<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css"/><script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script><div class="my-dropzone dz-clickable" style=" display: block; width: 100px; heigh...

2021-09-22

判断是否为数字

要知道对好事的称颂过于夸大，也会招来人们的反感轻蔑和嫉妒。——培根 JavaScript有一个函数isNaN NaN表示的是NOT A NUMBER(不是一个数字) 所以我们判断一个变量是否为数字，或者改字符串是否能转换成数字，就可以使用isNaN函数然后取反

阿超

我的名字叫阿超年龄25岁家在北京市职业是软件开发每天最晚也会在八点前回家不抽烟酒浅尝辄止晚上十二点上床保证睡足八个小时睡前写一篇博客再做二十分钟俯卧撑暖身然后再睡觉基本能熟睡到天亮像婴儿一样不留下任何疲劳和压力就这样迎来第二天的早晨健康检查结果也显示我很正常我想说明我是一个不论何时都追求内心平稳的人不拘泥于胜负不纠结于烦恼不树立使我夜不能寐的敌人这就是我在这社会的生活态度

数据加载中