当前位置：首页 > news >正文

验证码通过“Canvas 绘制”与“Base64 图片”渲染两种不同的实现方式显示

news 来源：原创 2025/7/15 14:30:25

文章目录

🎉验证码通过“Canvas 绘制”与“Base64 图片”渲染两种不同的实现方式显示
- 一、Canvas 绘制：接口回调“字符串”通过绘制的方式显示到前端✨
- - 1、前端代码（Canvas 绘制）：包含验证码区域、绘制验证码方法🎊
  - 2、效果🎊
- 二、Base64 图片渲染：接口回调直接显示服务器返回的 “Base64 图片”显示到前端✨
- - 1、前端代码（Canvas 绘制）：包含验证码区域、绘制验证码方法🎊
  - 2、效果🎊
- 三、总结🪄
- - 1、修改方案对比
  - 2、注意事项
  - - 1. Base64 格式处理
    - 2. 图片适配样式
    - 3. 缓存问题
    - 4. 安全性增强
  - 3、后端接口建议
  - 4、性能优化

🎉验证码通过“Canvas 绘制”与“Base64 图片”渲染两种不同的实现方式显示

一、Canvas 绘制：接口回调“字符串”通过绘制的方式显示到前端✨

1、前端代码（Canvas 绘制）：包含验证码区域、绘制验证码方法🎊

<view @tap="refreshCaptcha" class="captcha-container"><canvas type="2d" id="captchaCanvas"></canvas>
</view>

/**获取账号密码登录的图片验证码*/refreshCaptcha() {const that = this;uni.request({url: that.$helper.HHH,method: 'POST',data: {},success: res => {if (res.data.result) {that.originalValidCode = res.data.data2; // 保存验证码文本that.drawCaptcha(res.data.data); // 绘制验证码} else {uni.showToast({title: '获取验证码失败',icon: 'none'});}},fail: () => {uni.showToast({title: '获取验证码失败',icon: 'none'});}});},/**绘制验证码，直接使用即可*/async drawCaptcha(text) {try {// 获取 canvas 实例const query = uni.createSelectorQuery().in(this);const canvas = await new Promise(resolve => {query.select('#captchaCanvas').fields({node: true,size: true}).exec((res) => {resolve(res[0].node);});});const ctx = canvas.getContext('2d');// 设置 canvas 大小const dpr = uni.getSystemInfoSync().pixelRatio;canvas.width = 100 * dpr;canvas.height = 32 * dpr;ctx.scale(dpr, dpr);// 清空画布ctx.clearRect(0, 0, 100, 32);// 设置背景色ctx.fillStyle = '#f0f0f0';ctx.fillRect(0, 0, 100, 32);// 绘制文字ctx.fillStyle = '#333333';ctx.font = 'bold 20px Arial';ctx.textBaseline = 'middle';// 计算文字总宽度以居中显示const textWidth = ctx.measureText(text).width;const startX = (100 - textWidth) / 2;// 随机倾斜每个字符for (let i = 0; i < text.length; i++) {const x = startX + i * (textWidth / text.length);const y = 16; // 垂直居中ctx.save();// 随机旋转角度const angle = (Math.random() - 0.5) * 0.3;ctx.translate(x, y);ctx.rotate(angle);ctx.fillText(text[i], 0, 0);ctx.restore();}// 添加干扰线for (let i = 0; i < 3; i++) {ctx.beginPath();ctx.strokeStyle = `rgb(${Math.random()*150},${Math.random()*150},${Math.random()*150})`;ctx.moveTo(Math.random() * 100, Math.random() * 32);ctx.lineTo(Math.random() * 100, Math.random() * 32);ctx.stroke();}// 添加干扰点for (let i = 0; i < 30; i++) {ctx.fillStyle = `rgb(${Math.random()*150},${Math.random()*150},${Math.random()*150})`;ctx.beginPath();ctx.arc(Math.random() * 100, Math.random() * 32, 1, 0, 2 * Math.PI);ctx.fill();}} catch (e) {console.error('绘制验证码失败:', e);}},

2、效果🎊

二、Base64 图片渲染：接口回调直接显示服务器返回的 “Base64 图片”显示到前端✨

1、前端代码（Canvas 绘制）：包含验证码区域、绘制验证码方法🎊

确保后端返回的 Base64 数据 不带前缀（如 data:image/png;base64,），前端需要手动拼接：
```
this.captchaImage = `data:image/png;base64,${res.data.base64}`;
```

<view @tap="refreshCaptcha" class="captcha-container"><canvas type="2d" id="captchaCanvas"></canvas>
</view>

// 1. 定义数据
data() {return {captchaImage: '' // 存储 Base64 图片数据}
},// 2. 获取验证码（从后端接口）
methods: {async refreshCaptcha() {try {const res = await api.getCaptcha(); // 替换为你的接口this.captchaImage = `data:image/png;base64,${res.data.base64}`;} catch (error) {console.error('获取验证码失败:', error);}}
},// 3. 初始化时加载
onLoad() {this.refreshCaptcha();
}

2、效果🎊

三、总结🪄

通过用 Base64 图片渲染验证码，你实现了以下优化：

降低前端复杂度：无需维护 Canvas 绘制逻辑。
提升安全性：验证码由后端生成，避免前端模拟。
更好兼容性：Base64 图片在所有平台表现一致。

1、修改方案对比

特性	Canvas 绘制	Base64 图片渲染
实现方式	动态生成图形/文字	直接显示服务器返回的 Base64 图片
性能	依赖前端计算	直接渲染，性能更优
维护性	需维护绘制逻辑	仅替换图片源即可
安全性	前端生成，可能被破解	后端生成，更安全

2、注意事项

1. Base64 格式处理

确保后端返回的 Base64 数据 不带前缀（如 data:image/png;base64,），前端需要手动拼接：
```
this.captchaImage = `data:image/png;base64,${res.data.base64}`;
```

2. 图片适配样式

添加 CSS 确保图片显示正常：

.captcha-container image {width: 100%;  /* 宽度自适应容器 */height: auto; /* 高度按比例缩放 */
}

3. 缓存问题

如果验证码图片不变，浏览器可能缓存旧图。解决方法：
- 在 URL 后加随机参数（如 ?t=${Date.now()}）
- 或要求后端在 HTTP 头中设置 Cache-Control: no-cache。

4. 安全性增强

建议后端对验证码 Base64 数据加密，前端解密后使用（防止中间人攻击）。

3、后端接口建议

确保后端返回的数据结构包含原始 Base64 数据：

{"code": 200,"data": {"base64": "iVBORw0KGgoAAAANSUhEUgAAAMgAA..." // 纯 Base64 字符串}
}

4、性能优化

压缩图片：后端应返回压缩后的 Base64 数据（减少传输体积）。
懒加载：验证码图片仅在需要时请求（如点击刷新时）。

验证码通过“Canvas 绘制”与“Base64 图片”渲染两种不同的实现方式显示

文章目录 🎉验证码通过“Canvas 绘制”与“Base64 图片”渲染两种不同的实现方式显示一、Canvas 绘制：接口回调“字符串”通过绘制的方式显示到前端✨1、前端代码（Canvas 绘制）：包含验证码区域、绘制验证码方法&#x…...

编程日记 2025/7/15 14:30:25

FALL靶场通关攻略

1，下载好靶机后打开，通过kali扫描靶机ip和端口，得到靶机ip为192.168.50.144 2，扫描目录 3，访问靶机 4，访问扫描到的test.php,得到缺少GET请求参数的提示 5，使用FUZZ来扫出参数为file 6&#xff…...

编程日记 2025/7/11 7:25:07

(学习总结31)Linux 进程地址空间与进程控制

Linux 进程地址空间与进程控制进程地址空间Linux 进程地址空间分布虚拟地址空间和页表创建子进程与写时拷贝权限访问缺页中断 Linux 虚拟内存管理mm_struct 内存描述符区域划分vm_area_struct 独立虚拟内存区域虚拟地址空间的作用进程控制进程创建fork 函数介绍写时拷贝作用…...

编程日记 2025/7/15 14:14:45

基于Springboot的网上订餐系统【源码】+【PPT】+【开题报告】+【论文】

网上订餐系统是一个基于Java语言和Spring Boot框架开发的Web应用，旨在为用户和管理员提供一个便捷的订餐平台。该系统通过简化餐饮订购和管理流程，为用户提供快速、高效的在线订餐体验，同时也为管理员提供完善的后台管理功能，帮助…...

编程日记 2025/7/15 13:33:31

Axure设计之中继器表格——拖动行排序教程（中继器）

一、原理介绍在Axure中实现表格行的拖动排序，主要依赖于中继器的排序事件。然而要实现拖动效果，就必须结合动态面板，因为动态面板可以设置拖动事件，之所以使用动态面板或许是因为它可以更灵活地处理位置变化。用户拖动行时&…...

编程日记 2025/7/15 13:06:08

GAUSSDB 分布式存储机制深度解析

GAUSSDB 分布式存储机制深度解析一、核心机制概览 GAUSSDB 的分布式存储通过数据分片、多副本管理和全局事务控制实现高可用与水平扩展。以下为关键机制详解： 二、数据分片（Sharding） 1. 分片策略 GAUSSDB 支持多种分片规则&#xff…...

编程日记 2025/7/15 13:51:22

目录一、ELMo 2018 训练目标二、GPT-1 2018 训练目标三、BERT 2018 训练目标四、Ernie —— baidu 2019 五、Ernie —— Tsinghua 2019 六、GPT-2 2019 七、UNILM 2019 八、Transformer - XL & XLNet 2019 1.模型结构 Ⅰ、循环机制 Recurrence Mechanism Ⅱ、相对位置…...

编程日记 2025/7/15 12:38:09

汽车加气站操作工证书报考条件是什么？

关于汽车加气站操作工的资格证书： 一、核心证书要求 CNG充装人员上岗证这是加气站加气工的核心资质证书，需通过专业培训并考核。该证书由相关部门颁发，证明持证人具备从事CNG（压缩天然气）充装操作的专业技能&#xf…...

编程日记 2025/7/12 8:21:17

材质及制作笔记

基本流程： 建中模——zb雕刻高模——maya拓扑低模——拆uv——sp烘焙贴图——sp绘制材质——渲染 1 材质贴图： diffuse/albedo/basecolor：漫反射 reflection/specular：反射 metalness：金属度 glossiness&#xf…...

编程日记 2025/7/14 23:45:09

Opencv 图像读取与保存问题

本文仅对 Opencv图像读取与保存进行阐述，重在探讨图像读取与保存过程中应注意的细节问题。 1 图像读取首先看一下，imread函数的声明： // C: Mat based Mat imread(const string& filename, int flags1 );// C: IplImage based IplImage*…...

编程日记 2025/7/15 14:13:47

Flutter 2025生态全景：从跨端到嵌入式开发的新机遇

一、技术演进：从"一次编写多端运行"到"全场景覆盖" 1.1 渲染引擎革命：Impeller 2.0的性能突破 // 启用Impeller的配置示例（android/app/build.gradle） def enableImpeller true android {defaultConfig {…...

编程日记 2025/7/10 1:22:42

Idea中诡异的文件编码问题：设置fileCodeing为UTF8但不生效

在fileCoding配置了编码utf-8，右下角的文件里编码格式却是ISO-8859-1，git后到远程仓库里却是ISO-8859-1的乱码，怎么修改都不生效，重启也不行，恶心的不行。最后发现修复方案是： 1. 先随便做个变更&#x…...

编程日记 2025/7/15 14:22:27

Linux中逻辑卷的使用、扩容与磁盘配额

目录一.逻辑卷概述 1.普通分区的优缺点 2.逻辑卷的优点 3.逻辑卷概述二.逻辑卷的创建 1.逻辑卷相关命令 2.创建步骤三.逻辑卷的扩容 1.扩容步骤四.磁盘配额 1.概念及注意点 2.使用条件 3.相关命令一.逻辑卷概述 1.普通分区的优缺点普通分区优点&#xff1a…...

编程日记 2025/7/15 13:03:20

Java版Manus实现来了，Spring AI Alibaba发布开源OpenManus实现

此次官方发布的 Spring AI Alibaba OpenManus 实现，包含完整的多智能体任务规划、思考与执行流程，可以让开发者体验 Java 版本的多智能体效果。它能够根据用户的问题进行分析，操作浏览器，执行代码等来完成复杂任务等。项目源码及…...

编程日记 2025/7/15 13:59:27

关于IP免实名的那些事

IP技术已成为个人与企业保护隐私、提升网络效率的重要工具。其核心原理是通过中介服务器转发用户请求，隐藏真实IP地址，从而实现匿名访问、突破地域限制等目标。而“免实名”代理IP的出现，进一步简化了使用流程，用户无需提交身份信…...

编程日记 2025/7/15 13:07:14

从零构建大语言模型全栈开发指南：第二部分：模型架构设计与实现-2.2.3实战案例：在笔记本电脑上运行轻量级LLM

👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路文章大纲实战案例：在笔记本电脑上运行轻量级LLM2.2.3 模型架构设计与实现1. 环境与工具准备1.1 硬件要求1.2 软件栈选择2. 轻量级模型架构设计2.1 模型参数配置2.2 关键技术优化3. 实战流程3.1 数据准备流程3.2…...

编程日记 2025/7/15 13:35:24

Labview信号分析系统（含报告）

1.摘要本文详细介绍了基于LabVIEW的轴承故障信号分析系统的设计与实现。该系统以凯斯西储大学轴承驱动端的振动信号为研究对象，涵盖了正常信号以及内圈、滚珠、外圈三种故障信号的分析。系统可以对信号进行滤波、时域分析、频域分析和时频域分析等。系统的功能如下…...

编程日记 2025/7/15 13:17:46

基于FastAPI与Kimi AI的智能聊天应用开发实践

一、项目概述本文介绍一个基于现代Web技术栈的智能对话系统，前端采用响应式设计实现聊天界面，后端通过FastAPI框架构建高性能API服务，集成Moonshot AI大语言模型实现智能对话功能。系统具备完整的消息交互流程，支持参数定制化配…...

编程日记 2025/7/15 14:00:22

Android 蓝牙/Wi-Fi通信协议之：经典蓝牙（BT 2.1/3.0+）介绍

在 Android 开发中，经典蓝牙（BT 2.1/3.0）支持多种协议，其中 RFCOMM/SPP（串口通信）、A2DP（音频流传输）和 HFP（免提通话）是最常用的。以下是它们在 Android 中的…...

编程日记 2025/7/15 13:50:26

介绍FRAMES：一个统一的检索增强生成评估框架

引言大型语言模型（LLMs）在认知任务上取得了显著进步，检索增强生成（RAG）技术成为提升模型性能的重要方法。然而，现有的评估方法往往孤立地测试模型的检索能力、事实性和推理能力，无法全面反映模…...

编程日记 2025/7/15 13:08:34

云钥科技多通道工业相机解决方案设计

项目应用场景分析与需求挑战 1. 应用场景 ‌目标领域‌：工业自动化检测（如精密零件尺寸测量、表面缺陷检测）、3D立体视觉（如物体建模、位姿识别）、动态运动追踪（如高速生产线监控）等。 ‌核心…...

编程日记 2025/7/9 13:19:01

微信小程序逆向开发

一.wxapkg文件如何查看微信小程序包文件： 回退一级点击进入这个目录这个就是我们小程序对应的文件 .wxapkg概述 .wxapkg是微信小程序的包文件格式，且其具有独特的结构和加密方式。它不仅包含了小程序的源代码，还包括了图像和其他资源文…...

编程日记 2025/7/11 15:04:32

Debian ubuntu源

配置文件路径 /etc/apt/sources.list 阿里 deb http://mirrors.aliyun.com/ubuntu/ $(lsb_release -cs) main restricted universe multiverse deb-src http://mirrors.aliyun.com/ubuntu/ $(lsb_release -cs) main restricted universe multiverse deb http://mirrors.aliyun.…...

编程日记 2025/7/5 18:25:37

几个工作中常用的网站

1.思维导图流程图在线版 ProcessOn思维导图流程图-在线画思维导图流程图_在线作图实时协作 2.编码转换及报文格式化 ESJSON在线工具首页(ES JSON在线工具) JSON在线解析格式化验证 - JSON.cn 3.AI助手通义 - 你的个人AI助手文心一言谷灵AI，你的工作好帮手…...

编程日记 2025/7/15 11:21:56

《Apipost如何超越Postman与Apifox？SocketIO调试工具横评》

实时通信调试工具可能已「过时」！许多主流工具如Apifox不支持SocketIO协议，导致调试效率低下。而Apipost作为国产工具，原生支持SocketIO，提供自定义事件管理、连接状态可视化等功能，极大提升了实时通信开发的效率和准确…...

编程日记 2025/7/10 7:53:44

为什么要将项目部署到外部tomcat

一、是什么指将你的Java Web应用程序（如WAR包）安装并运行在一个独立安装的、位于项目外部的Tomcat服务器上，而不是使用内嵌的或开发环境自带的服务器。外部Tomcat 指独立安装的Tomcat服务器（如从Apache官网下载的Tomcat&#…...

编程日记 2025/7/15 1:30:56

小迪安全109-php模型动态调试，反序列化，变量覆盖，tp框架，原生pop链

案例一原生代码变量覆盖，duomicms 变量覆盖是什么这个时候为什么会输出xiaodi呢就是因为$ab所以$$a$b 所以就让$bxiaodi 搞不到源码，看老师的学吧这一般在web端页面是看不到，也不好发现，代码可以看关键字和函数例如$$这…...

编程日记 2025/7/13 4:47:03

Python 练习项目：MBTI 命令行测试工具

在当今数字化的时代，心理测试工具越来越受到欢迎，它们帮助人们更好地了解自己，做出更明智的职业选择，甚至改善人际关系。MBTI（迈尔斯-布里格斯性格分类法）是其中一种广为人知的人格测试，通过评估个人在四个维度上的偏好（外向-内向、实感-直觉、理智-情感、判断-理解），…...

编程日记 2025/7/11 16:19:49

zynq7000 + ucos3 + lwip202_v1_2调试过程

1 现在裸机应用上验证lwip 跑起来可能会报错，看下面的链接解决 zynq 网卡Phy setup error问题 zynq 网卡Phy setup error问题-CSDN博客 2 ping同以后，在zynq上添加ucos系统链接如下： ZYNQ移植uCOSIII_zynq ucos-CSDN博客 3 移植lwip协议…...

编程日记 2025/7/10 11:37:40

Oracle数据库数据编程SQL＜2.2 DDL 视图、序列＞

目录一、Oracle 视图(Views) （一） Oracle 视图特点 （二）Oracle 视图创建语法关键参数： （三）Oracle 视图类型 1、普通视图 2、连接视图（可更新） 3、对象视图 4…...

编程日记 2025/7/10 4:59:25

关于bug总结记录

1、vs中出现bug error C1083:无法打开文件链接：vs中出现bug error C1083:无法打开文件_vs20151083错误解决方法-CSDN博客 2、 VS小技巧：系统却提示：示msvcp120.dll丢失链接：VS小技巧：系统却提示：示msvc…...

编程日记 2025/6/28 5:46:16

ClickHouse与TiDB实操对比：从入门到实战的深度剖析

ClickHouse与TiDB实操对比：从入门到实战的深度剖析宝子们，在当今数据驱动的时代，选择合适的数据库对于处理海量数据和支撑业务发展至关重要。ClickHouse和TiDB作为两款备受关注的数据库，各自有着独特的优势和适用场景。今天&…...

编程日记 2025/7/11 9:03:57

【测试开发】OKR 小程序端黑盒测试报告

【测试报告】OKR 小程序端项目名称版本号测试负责人测试完成日期联系方式OKR 小程序端4.0马铭胜2025-03-2515362558972 1、项目背景 1.1 OKR 用户端在如今这个快节奏的时代中，个人和组织的成长往往依赖于清晰、明确且意义深远的目标。然而，如何设定…...

编程日记 2025/7/11 9:11:19

LibVLC —— 《基于Qt的LibVLC专业开发技术》视频教程

🔔 LibVLC/VLC 相关技术、疑难杂症文章合集（掌握后可自封大侠 ⓿_⓿）（记得收藏，持续更新中…）《基于Qt的LibVLC专业开发技术》课程视频，（CSDN课程主页、51CTO课程主页）适合具有一些C++/Qt编程基础，想要进一步提高或涉足音视频行业的。本课程分7章节，共计35小节。…...

编程日记 2025/7/10 6:29:40

故障识别 | 基于改进螂优化算法（MSADBO）优化变分模态提取（VME）结合稀疏最大谐波噪声比解卷积（SMHD）进行故障诊断识别，matlab代码

基于改进螂优化算法（MSADBO）优化变分模态提取（VME）结合稀疏最大谐波噪声比解卷积（SMHD）进行故障诊断识别一、引言 1.1 机械故障诊断的背景和意义在工业生产的宏大画卷中，机械设备的稳定运行…...

编程日记 2025/7/10 4:51:07

2025年最新自动化/控制保研夏令营预推免面试真题分享（东南大学苏州校区/华东理工/南航/天大）

笔者来2021级本科自动化专业，以下部分将介绍我在夏令营以及预推免期间发生经历和问题东南大学苏州校区蒙纳士大学联培东南大学苏州校区的项目算是一个比较小众的项目，是第一年在苏州校区，二三年到南京校区找导师（不提供住宿自…...

编程日记 2025/7/10 8:58:02

深度学习笔记19-YOLOv5-C3模块实现(Pytorch)

🍨 本文为🔗365天深度学习训练营中的学习记录博客 🍖 原作者：K同学啊一、前期工作 1.导入数据并读取 import torch import torch.nn as nn import torchvision.transforms as transforms import torchvision from torchvisio…...

编程日记 2025/7/11 18:21:34

SpringCloud-环境和工程搭建

前言 JDK用17，MySQL用8.0 微服务就是微小的服务一个微服务只做一个事情基本概念打开官网 spring springcloud就是给我们提供工具，方便我们来弄微服务 springcloud是分布式微服务架构的一站式解决方案 Distributed/versioned configuration 分布…...

编程日记 2025/7/3 19:15:01

React 中shouldComponentUpdate生命周期方法的作用，如何利用它优化组件性能？

大白话React 中shouldComponentUpdate生命周期方法的作用，如何利用它优化组件性能？ 在 React 里，shouldComponentUpdate 这个生命周期方法就像是一个“关卡守卫”，它能决定组件是否需要重新渲染。组件重新渲染是个挺费性能的事儿…...

编程日记 2025/7/10 22:57:04

AI写一个视频转图片帧工具(python)

现在的AI写python太方便了说的话我想用python实现一个能够将视频的所有帧数转化为图片的软件，可以自由配置转换的帧率或者全部，需要有界面，我需要增加一点功能，就是我需要读取出视频的分辨率，然后设置输出帧的分辨…...

编程日记 2025/7/15 1:14:55

React第三十一章(组件实战)

组件实战这一章建议大家看完hooks css 原理组件这些章节之后再来看，这样会更好理解。本章是额外新增的，因为之前的知识大家都掌握的差不多了，所以这一章节主要是让大家动手实践，巩固一下前面的知识。那么你会学到什么&#…...

编程日记 2025/7/15 7:50:09

详细介绍WideCharToMultiByte()

书籍：《Visual C 2017从入门到精通》的2.7 字符串环境：visual studio 2022 内容：几个字符串类型->（将单字节char*转换为宽字节wchar_t *）（将宽字节wchar_t* 转换为单字节char *） WideChar…...

编程日记 2025/7/3 4:11:54

Qt开发：QFileDialog的使用

文章目录一、QFileDialog的介绍二、QFileDialog的常用静态方法三、完整示例一、QFileDialog的介绍 QFileDialog 是 Qt 框架中提供的一个用于文件选择的标准对话框类，它允许用户在应用程序中选择文件或目录。它是跨平台的，在不同操作系统上会自动适配本…...

编程日记 2025/7/15 12:27:28

深度学习篇---回归分类任务的损失函数

文章目录前言一、分类任务常用损失函数1. 交叉熵损失（Cross-Entropy Loss）数学形式使用场景特点训练状态分析损失下降损失震荡训练损失低但是验证损失高 2. Hinge Loss（合页损失）数学形式适用场景特点训练状态分析损失趋近于0损失…...

编程日记 2025/7/11 11:04:19

【MLP-BEV(10)】BEVPooling V1和BEVPooling V2的view_transformer，进行鱼眼图片实践

文章目录先说说 BEVPoolv1步骤1：3D点生成步骤2 2D特征采样和BEV特征生成特点再谈谈BEVPoolv2步骤1：3D点生成步骤2：计算索引关系步骤3： `voxel_pooling`计算鱼眼图片进行实践步骤1、3D点生成(基于Kannala-Brandt 进行调整)步骤2、2D特征采样和BEV特征生成(1) 体素化 (Voxe…...

编程日记 2025/7/15 1:37:35

上海SMT贴片技术解析与行业趋势

内容概要随着长三角地区电子制造产业集群的快速发展，上海作为核心城市正引领着SMT贴片技术的革新浪潮。本文聚焦表面组装技术在高密度互连、微间距贴装等领域的突破性进展，通过解析焊膏印刷精度控制、元件定位算法优化等核心工艺，展现上海企…...

编程日记 2025/7/10 7:22:35

RAG优化：python从零实现[吃一堑长一智]循环反馈Feedback

本文将介绍一种有反馈循环机制的RAG系统，让当AI学会"吃一堑长一智"，给传统RAG装了个"后悔"系统，让AI能记住哪些回答被用户点赞/拍砖，从此告别金鱼记忆：每次回答都像在玩roguelike：失败结局会强化下次冒险悄悄把优质问答变成新知识卡牌，实现"以…...

编程日记 2025/7/9 23:10:50

Ubuntu 防火墙配置

Ubuntu 防火墙配置一、UFW 基础操作二、核心规则配置三、高级功能四、特殊场景配置五、规则管理六、默认策略与安全建议七、故障排除一、UFW 基础操作检查 UFW 状态 sudo ufw status # 查看防火墙状态 sudo ufw status verbose # 显示详细规则 sudo ufw status numbered #…...

编程日记 2025/7/10 18:33:41

网络运维学习笔记（DeepSeek优化版） 024 HCIP-Datacom OSPF域内路由计算

文章目录 OSPF域内路由计算：单区域的路由计算一、OSPF单区域路由计算原理二、1类LSA详解2.1 1类LSA的作用与结构2.2 1类LSA的四种链路类型三、OSPF路由表生成验证3.1 查看LSDB3.2 查看OSPF路由表3.3 查看全局路由表四、2类LSA详解4.1 2类LSA的作用与生成条件4.2 2…...

编程日记 2025/7/13 15:57:02

【实战ES】实战 Elasticsearch：快速上手与深度实践-2.2.1 Bulk API的正确使用与错误处理

👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路文章大纲 Elasticsearch Bulk API 深度实践：性能调优与容错设计1. Bulk API 核心机制解析1.1 批量写入原理剖析1.1.1 各阶段性能瓶颈 2. 高性能批量写入实践2.1 客户端最佳…...

编程日记 2025/7/10 14:15:30

文章目录

🎉验证码通过“Canvas 绘制”与“Base64 图片”渲染两种不同的实现方式显示

一、Canvas 绘制：接口回调“字符串”通过绘制的方式显示到前端✨

1、前端代码（Canvas 绘制）：包含验证码区域、绘制验证码方法🎊

2、效果🎊

二、Base64 图片渲染：接口回调直接显示服务器返回的 “Base64 图片”显示到前端✨

1、前端代码（Canvas 绘制）：包含验证码区域、绘制验证码方法🎊

2、效果🎊

三、总结🪄

1、修改方案对比

2、注意事项

1. Base64 格式处理

2. 图片适配样式

3. 缓存问题

4. 安全性增强

3、 后端接口建议

4、 性能优化

相关文章：

3、后端接口建议

4、性能优化