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,

最终变成这样

效果图：

前端

相关推荐

2022-01-25

水波纹按钮动画

生活是种律动，须有光有影，有左有右，有晴有雨。——老舍代码： 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .login { display: flex; align-items: center; justify-content: center; margin-top: 200px; } ...

2023-10-13

ar.js

没有希望的地方，就没有奋斗。——约翰生 https://github.com/AR-js-org/AR.js AR.js 是用于 Web 上的增强现实的轻量级库，其中包括图像跟踪、基于位置的 AR 和标记跟踪等功能 AR.js Documentation

2022-06-20

虚拟列表

我来到这个世界，为了看看太阳和蓝色的地平线。——《城门开》分享一个vue虚拟列表的组件： https://github.com/tangbc/vue-virtual-scroll-list 官方文档： https://tangbc.github.io/vue-virtual-scroll-list 沙盒： https://codesandbox.io/s/live-demo-virtual-list-e1ww1 使用方式： 1pnpm install vue-virtual-scroll-list --save 示例： 12345678910111213141516171819202122232425<template> <div> <virtual-list style="height: 360px; overflow-y: auto;" // make list scrollable :data-key="'uid'" :data-sources=&q...

2024-07-17

进阶学习css的filter属性

经常谈论别人的短处只会使一个人心胸狭窄，使一个人变得非常多疑，非常无聊。——泰戈尔首先是这个教程 Filter | CSS-Tricks 还有这个 Filter | CSS-Tricks 这里还有一个在线演示的网址 CSS filter Editor 你可以任意滑动值查看效果 See the Pen CSS filter Editor by Mads Stoumann (@stoumann) on CodePen.

2022-03-16

自定义scroll滑块样式

这个天地，我来过，我奋战过，我深爱过，我不在乎结局。——今何在《悟空传》代码如下： 12345678910111213141516171819202122232425262728/* 滚动条整体部分 */::-webkit-scrollbar { width: 12px;}/* 滚动条两端的按钮 */::-webkit-scrollbar-button {}/* 外层轨道 */::-webkit-scrollbar-track { background: #eee; border-radius: 18px;}/* 内层滚动槽 */::-webkit-scrollbar-track-piece { }/* 滚动的滑块 */::-webkit-scrollbar-thumb { border-radius: 18px; background: #bbb;}/* 边角 */::-webkit-scrollbar-corner { }/* 定义右下...

2026-08-13

diagram-design

学习要有三心，一信心，二决心，三恒心。—— 陈景润 Diagram Design：让技术图不再像模板拼装，而像一篇真正被设计过的编辑作品项目地址：https://github.com/cathrynlavery/diagram-design 一张图，常常比一段长篇解释更快抵达读者。架构如何连接，流程在哪里分叉，数据怎样流动，团队如何协作，时间如何推进，系统边界在哪里，复杂问题往往需要借助视觉结构才能被真正看清。但现实中的技术图，常常陷入两种尴尬。一种是内容很对，视觉却像从默认组件库里匆忙拼出来的。圆角卡片、阴影、渐变、密集的连线和随处可见的颜色，让读者还没理解结构，就先被视觉噪声拖住。另一种是画面很漂亮，却缺乏准确性。它像一张精致海报，却没有承担信息组织的职责。 Diagram Design 想解决的，正是这个中间地带的问题。它是一套面向 Claude Code、Codex 与 Pi 的图表设计技能。它不把图当作随手生成的装饰，也不把技术结构塞进千篇一律的模板，而是尝试用一套带有编辑感的设计系统，把复杂内容整理成清晰、克制、可阅读的视觉表达。它的目标并不是制造更多...

阿超

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

数据加载中