uniapp使用Canvas生成電子名片

uniapp使用Canvas生成電子名片

工作中有生成電子名片的一個需求，剛剛好弄了發一下分享分享

文章目錄

  • uniapp使用Canvas生成電子名片
  • 前言
  • 一、上代碼？
  • 總結

前言

先看效果
在這里插入圖片描述

一、上代碼？

不對不對應該是上才藝，哈哈哈

	<template><view class="container"><view class="head" style="height: 7rem;"><view style="color:#fff;position: fixed;top: 4rem;left: 1rem;"><br><text style="font-size: 11px;"></text></view></view><view style="width: 100%; height: 7.5rem;"></view><scroll-view scroll-y style="height: 100vh;" class="content"><view style="padding-top: 30rpx;"><!-- 立體名片卡片 --><view class="card-container" id="cardContainer"><view class="business-card"><!-- 頂部彩色邊緣標簽 --><view class="card-edge"></view><view class="card-content"><view class="card-title">褲架工廠</view><view class="card-subtitle">專做軟體沙發</view><view class="card-details"><view class="detail-item"><view>高級產品設計師</view></view><view class="detail-item"><view>創新事業部 | ABC科技</view></view><view class="detail-item"><view>工廠地址：上海浦東新區三林東地鐵左邊大廈23</view></view></view></view><!-- 雙二維碼容器 --><view class="qrcode-column"><view class="qrcode-item"><view class="card-image-container"><image class="card-image"src="https://linda-uni.oss-cn-guangzhou.aliyuncs.com/images/and/app_20230925_20250529092745.png"mode="aspectFit"></image></view><view class="qrcode-label">微信聯系</view></view><view class="qrcode-item"><view class="card-image-container"><image class="card-image"src="https://linda-uni.oss-cn-guangzhou.aliyuncs.com/images/and/app_20230925_20250529092745.png"mode="aspectFit"></image></view><view class="qrcode-label">官方網站</view></view></view><!-- 角落裝飾 --><view class="card-corner corner-tl"></view><view class="card-corner corner-br"></view></view></view><view class="save-btn" @click="saveCardImage"><text>保存名片圖片</text></view></view></scroll-view><canvas canvas-id="cardCanvas":style="{ position: 'absolute', left: '-9999px', width: canvasWidth + 'px', height: canvasHeight + 'px' }"></canvas></view></template><script>export default {data() {return {canvasWidth: 1100,canvasHeight: 630,dpr: 1,qrcode1: 'https://linda-uni.oss-cn-guangzhou.aliyuncs.com/images/and/app_20230925_20250529092745.png',qrcode2: 'https://linda-uni.oss-cn-guangzhou.aliyuncs.com/images/and/app_20230925_20250529092745.png',backgroundImage: 'https://linda-uni.oss-cn-guangzhou.aliyuncs.com/images/and/550e8a1a-e450-4880-9441-33608476b32a.jpg'}},mounted() {},methods: {// 保存名片為圖片   async saveCardImage() {uni.showLoading({title: '生成中...',mask: true});try {// 1. 繪制Canvasawait this.drawCardCanvas();// 2. 生成臨時圖片路徑const tempPath = await new Promise((resolve, reject) => {uni.canvasToTempFilePath({canvasId: 'cardCanvas',quality: 1,fileType: 'png',width: this.canvasWidth * this.dpr,height: this.canvasHeight * this.dpr,destWidth: this.canvasWidth * this.dpr,destHeight: this.canvasHeight * this.dpr,success: res => resolve(res.tempFilePath),fail: err => reject(err)});});// 3. 保存到相冊await new Promise((resolve, reject) => {uni.saveImageToPhotosAlbum({filePath: tempPath,success: () => resolve(),fail: err => reject(err)});});uni.hideLoading();uni.showToast({title: '保存成功',icon: 'success'});} catch (err) {uni.hideLoading();uni.showToast({title: '保存失敗: ' + (err.errMsg || err),icon: 'none'});console.error('保存失敗:', err);}},// 繪制名片到Canvasasync drawCardCanvas() {const ctx = uni.createCanvasContext('cardCanvas', this);const dpr = this.dpr;const width = this.canvasWidth;const height = this.canvasHeight;const padding = 30 * dpr;// 清除畫布ctx.clearRect(0, 0, width, height);// 1. 繪制背景// ctx.setFillStyle('#1F1F1F');// ctx.fillRect(0, 0, width, height);// 2. 繪制名片背景const cardWidth = width - padding * 2;const cardHeight = height - padding * 2;// 繪制名片背景if (this.backgroundImage) {// 使用圖片背景try {await this.drawRoundedImage(ctx,this.backgroundImage,padding,padding,cardWidth,cardHeight,20 * dpr);} catch (e) {console.error('背景圖片加載失敗:', e);// 回退到默認背景this.drawDefaultBackground(ctx, padding, cardWidth, cardHeight);}} else {// 使用顏色背景this.drawDefaultBackground(ctx, padding, cardWidth, cardHeight);}// // 漸變背景// const gradient = ctx.createLinearGradient(0, 0, cardWidth, cardHeight);   // gradient.addColorStop(0, '#302f30');// gradient.addColorStop(1, '#282728');// ctx.setFillStyle(gradient);// // 圓角矩形// this.drawRoundedRect(ctx, padding, padding, cardWidth, cardHeight, 20 * dpr);// ctx.fill();// 3. 頂部彩色邊緣（帶圓角）const topHeight = 16 * dpr; // 邊緣高度const topRadius = 20 * dpr; // 圓角半徑// 創建漸變const edgeGradient = ctx.createLinearGradient(padding, padding, padding + cardWidth, padding);edgeGradient.addColorStop(0, '#ff9a9e');edgeGradient.addColorStop(0.3, '#fad0c4');edgeGradient.addColorStop(0.6, '#a18cd1');edgeGradient.addColorStop(1, '#fbc2eb');ctx.setFillStyle(edgeGradient);// 繪制帶圓角的頂部邊緣（僅左上和右上圓角）ctx.beginPath();// 從左上圓角結束點開始ctx.moveTo(padding + topRadius, padding);// 繪制上邊緣線ctx.lineTo(padding + cardWidth - topRadius, padding);// 繪制右上圓角ctx.arcTo(padding + cardWidth, padding,padding + cardWidth, padding + topHeight,topRadius);// 繪制右邊緣ctx.lineTo(padding + cardWidth, padding + topHeight);// 繪制下邊緣（向左）ctx.lineTo(padding, padding + topHeight);// 繪制左邊緣（向上）ctx.lineTo(padding, padding + topRadius);// 繪制左上圓角ctx.arcTo(padding, padding,padding + topRadius, padding,topRadius);ctx.closePath();ctx.fill();// 4. 設置字體  ctx.setFontSize(40 * dpr);ctx.setFillStyle('#f0f0f0');ctx.fillText('褲架工廠', padding + 40 * dpr, padding + 80 * dpr);ctx.setFontSize(28 * dpr);ctx.setFillStyle('#CCCCCC');ctx.fillText('專做軟體沙發', padding + 40 * dpr, padding + 130 * dpr);// 繪制下劃線ctx.setStrokeStyle('#ff9a9e');ctx.setLineWidth(6 * dpr);ctx.beginPath();ctx.moveTo(padding + 40 * dpr, padding + 90 * dpr);ctx.lineTo(padding + 120 * dpr, padding + 90 * dpr);ctx.stroke();// 5. 繪制詳情信息const details = ['高級產品設計師','創新事業部 | ABC科技','工廠地址：上海浦東新區三林東地鐵左邊大廈23'];ctx.setFontSize(28 * dpr);ctx.setFillStyle('#b0b0b0');details.forEach((text, i) => {ctx.fillText(text, padding + 40 * dpr, padding + 200 * dpr + i * 50 * dpr);});// 6. 繪制二維碼 (修改部分開始)const qrSize = cardWidth * 0.12; // 縮小二維碼尺寸const qrY = padding + 350 * dpr;const qrSpacing = 30 * dpr; // 二維碼間距const qrRadius = 20 * dpr; // 圓角半徑const wxX = padding + 40 * dpr;await this.drawRoundedImage(ctx,this.qrcode1,wxX,qrY,qrSize,qrSize,qrRadius);// 官網二維碼 (靠左，在微信二維碼右側)const webX = wxX + qrSize + qrSpacing;await this.drawRoundedImage(ctx,this.qrcode2,webX,qrY,qrSize,qrSize,qrRadius);ctx.setFontSize(24 * dpr);ctx.setFillStyle('#e0e0e0');// 微信文字居中ctx.setTextAlign('center');ctx.fillText('客戶群', wxX + qrSize / 2, qrY + qrSize + 30 * dpr);// 官網文字居中ctx.setTextAlign('center');ctx.fillText('國內站', webX + qrSize / 2, qrY + qrSize + 30 * dpr);// 恢復對齊方式ctx.setTextAlign('left');// 執行繪制ctx.draw();// 返回繪制完成的Promisereturn new Promise(resolve => {setTimeout(resolve, 500);});},// 新增方法：繪制圓角圖片async drawRoundedImage(ctx, src, x, y, width, height, radius) {return new Promise((resolve, reject) => {uni.getImageInfo({src: src,success: (res) => {// 保存當前狀態ctx.save();// 創建圓角矩形路徑   this.drawRoundedRect(ctx, x, y, width, height, radius);ctx.clip(); // 裁剪為圓角矩形// 繪制圖片ctx.drawImage(res.path, x, y, width, height);// 恢復狀態ctx.restore();resolve();},fail: reject});});},// 工具方法：繪制圓角矩形drawRoundedRect(ctx, x, y, width, height, radius) {ctx.beginPath();ctx.moveTo(x + radius, y);ctx.lineTo(x + width - radius, y);ctx.arcTo(x + width, y, x + width, y + radius, radius);ctx.lineTo(x + width, y + height - radius);ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);ctx.lineTo(x + radius, y + height);ctx.arcTo(x, y + height, x, y + height - radius, radius);ctx.lineTo(x, y + radius);ctx.arcTo(x, y, x + radius, y, radius);ctx.closePath();},drawDefaultBackground(ctx, padding, cardWidth, cardHeight) {const gradient = ctx.createLinearGradient(0, 0, cardWidth, cardHeight);gradient.addColorStop(0, '#302f30');gradient.addColorStop(1, '#282728');ctx.setFillStyle(gradient);this.drawRoundedRect(ctx, padding, padding, cardWidth, cardHeight, 20);ctx.fill();},// 工具方法：繪制裝飾角drawCorner(ctx, x, y, size, position) {ctx.setStrokeStyle('#ff9a9e');ctx.setLineWidth(3 * this.dpr);ctx.beginPath();// 圓角半徑const radius = 12 * this.dpr;if (position === 'tl') {// 左上角 - 包圍式圓角ctx.moveTo(x - size, y);ctx.lineTo(x, y);ctx.lineTo(x, y - size);// 添加圓角效果ctx.moveTo(x, y - radius);ctx.arc(x + radius, y - radius, radius, Math.PI, 1.5 * Math.PI);} else if (position === 'br') {// 右下角 - 包圍式圓角ctx.moveTo(x + size, y);ctx.lineTo(x, y);ctx.lineTo(x, y + size);// 添加圓角效果ctx.moveTo(x, y + radius);ctx.arc(x - radius, y + radius, radius, 0.5 * Math.PI, Math.PI);}ctx.stroke();},// 工具方法：繪制圖片（支持網絡圖片）drawImage(ctx, src, x, y, width, height) {return new Promise((resolve, reject) => {uni.getImageInfo({src: src,success: res => {ctx.drawImage(res.path, x, y, width, height);resolve();},fail: (err) => {console.error('圖片加載失敗:', err);reject(err);}});});}},}</script><style>page {background-color: #1F1F1F;}.container {position: relative;height: 100vh;width: 100vw;overflow: hidden;}.head {width: 100%;position: fixed;top: 0px;left: 0%;z-index: 99999;}/* 新增樣式 */.card-container {position: relative;width: 88%;margin: 0 auto 40rpx;perspective: 1000px;}.business-card {background: linear-gradient(145deg, #302f30, #282728);border-radius: 20rpx;padding: 30rpx;/* display: flex; */justify-content: space-between;box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.4);position: relative;overflow: hidden;transform: translateY(0);transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);}.business-card:active {transform: translateY(-10rpx);box-shadow: 0 15rpx 40rpx rgba(0, 0, 0, 0.6);}/* 邊緣裝飾效果 */.card-edge {position: absolute;top: 0;left: 0;width: 100%;height: 16rpx;background: linear-gradient(90deg, #ff9a9e, #fad0c4, #a18cd1, #fbc2eb);border-radius: 20rpx 20rpx 0 0;}.card-corner {position: absolute;width: 40rpx;height: 40rpx;border: 3rpx solid #ff9a9e;}.corner-tl {top: 20rpx;left: 20rpx;border-right: none;border-bottom: none;border-top-left-radius: 12rpx;}.corner-br {bottom: 20rpx;right: 20rpx;border-left: none;border-top: none;border-bottom-right-radius: 12rpx;}.card-content {flex: 1;padding-right: 20rpx;}.card-title {font-size: 40rpx;font-weight: bold;color: #f0f0f0;margin-bottom: 16rpx;position: relative;display: inline-block;}.card-title::after {content: '';position: absolute;bottom: -8rpx;left: 0;width: 80rpx;height: 6rpx;background: linear-gradient(90deg, #ff9a9e, #fad0c4);border-radius: 4rpx;}.card-subtitle {font-size: 28rpx;color: #CCCCCC;margin: 30rpx 0 20rpx;line-height: 1.5;}.card-details {display: flex;flex-direction: column;gap: 20rpx;margin-top: 30rpx;}.detail-item {display: flex;align-items: center;font-size: 28rpx;color: #b0b0b0;}.detail-icon {width: 50rpx;color: #ff9a9e;font-size: 32rpx;margin-right: 15rpx;}.card-image-container {flex-shrink: 0;width: 180rpx;height: 180rpx;border-radius: 15rpx;overflow: hidden;box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.3);border: 2rpx solid rgba(255, 255, 255, 0.1);position: relative;background: #fff;display: flex;align-items: center;justify-content: center;transition: all 0.3s ease;}.card-image-container:active {transform: scale(1.05);box-shadow: 0 12rpx 25rpx rgba(0, 0, 0, 0.5);}.card-image {width: 90%;height: 90%;display: block;}/* 雙二維碼樣式 */.qrcode-column {display: flex;/* flex-direction: column; *//* align-items: center; *//* justify-content: center; */flex-shrink: 0;width: 100%;gap: 25rpx;margin-top: 20rpx;}.qrcode-item {display: flex;flex-direction: column;align-items: center;}.qrcode-label {color: #e0e0e0;font-size: 24rpx;text-align: center;margin-top: 10rpx;font-weight: 500;}.save-btn {margin: 40rpx auto;padding: 20rpx 40rpx;background: linear-gradient(90deg, #ff9a9e, #a18cd1);color: white;border-radius: 50rpx;width: 60%;text-align: center;font-weight: bold;box-shadow: 0 8rpx 20rpx rgba(161, 140, 209, 0.4);}</style>

總結

這里面就js 里面的有用，其他的我也沒有刪除，要用的可以自己刪除就可以了，go,卷起來

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/81868.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/81868.shtml
英文地址，請注明出處：http://en.pswp.cn/web/81868.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

PostgreSQL ALTER TABLE 命令詳解

PostgreSQL ALTER TABLE 命令詳解

PostgreSQL ALTER TABLE 命令詳解 引言 PostgreSQL 是一款功能強大的開源關系型數據庫管理系統&#xff0c;它提供了豐富的命令來幫助數據庫管理員和開發者管理數據庫中的表。其中&#xff0c;ALTER TABLE 命令是 PostgreSQL 中最常用的命令之一&#xff0c;用于修改表的結構…
閱讀更多...
Kafka KRaft + SSL + SASL/PLAIN 部署文檔

Kafka KRaft + SSL + SASL/PLAIN 部署文檔

本文檔介紹如何在 Windows 環境下部署 Kafka 4.x&#xff0c;使用 KRaft 模式、SSL 加密和 SASL/PLAIN 認證。stevensu1/kafka_2.13-4.0.0 1. 環境準備 JDK 17 或更高版本Kafka 4.x 版本&#xff08;本文檔基于 kafka_2.13-4.0.0&#xff09; 2. 目錄結構 D:\kafka_2.13-4.…
閱讀更多...
MQTT協議,EMQX部署,MQTTX安裝學習

MQTT協議,EMQX部署,MQTTX安裝學習

一、MQTT概述 1.什么是MQTT MQTT是一種基于“發布訂閱“”模式的消息傳輸協議。 消息&#xff1a;設備和設備之間傳輸的數據&#xff0c;或者服務和服務之間要傳輸的數據。 協議&#xff1a;傳輸數據時所遵循的規范。 2.常見的通訊模式 &#xff08;1&#xff09;客戶端-服…
閱讀更多...
Java Web 開發詳細流程

Java Web 開發詳細流程

&#x1f9ed; 一、項目立項與需求分析階段&#xff08;0%&#xff09; 1.1 商業需求確認 與產品經理溝通核心業務目標 目標&#xff1a;構建一個圖書管理系統用戶&#xff1a;圖書管理員、普通用戶功能&#xff1a;登錄、查看、增刪改圖書、權限控制、分頁、搜索 1.2 輸出文…
閱讀更多...
學習路之PHP--easyswoole_panel安裝使用

學習路之PHP--easyswoole_panel安裝使用

學習路之PHP--easyswoole_panel安裝使用 一、新建文件夾二、安裝三、改配置地址四、訪問 IP:Port 自動進入index.html頁面 一、新建文件夾 /www/wwwroot/easyswoole_panel 及配置ftp 解壓easyswoole_panel源碼 https://github.com/easyswoole-panel/easyswoole_panel 二、安…
閱讀更多...
軟件設計綜合知識

軟件設計綜合知識

software-design 軟考中級-軟件設計師-綜合知識&#xff1a;計算機系統基礎、操作系統、計算機網絡與信息安全、程序語言基礎、數據庫基礎、數據結構與算法、軟件工程基礎知識、標準與知識產權等。 —— 2025 年 3 月 5 日 甲辰年二月初六 驚蟄 目錄 software-design1、計算機基…
閱讀更多...
海思 35XX MIPI讀取YUV422

海思 35XX MIPI讀取YUV422

1.項目背景&#xff1a; 使用海思芯片&#xff0c;接收FPGA發送的MIPI數據&#xff0c;不需要ISP處理&#xff0c;YUV圖像格式為YUV422。 2.移植MIPI驅動 修改IMX347的驅動遠嗎&#xff0c;將I2C讀寫的部分注釋&#xff0c;其他的不用再做修改。 int imx347_slave_i2c_init(ot…
閱讀更多...
算力租賃革命：彈性模式如何重構數字時代的創新門檻?

算力租賃革命：彈性模式如何重構數字時代的創新門檻?

一、算力革命&#xff1a;第四次工業革命的核心驅動力? 在科技飛速發展的當下&#xff0c;我們正悄然迎來第四次工業革命。華為創始人任正非在一場程序設計競賽中曾深刻指出&#xff0c;這場革命的基礎便是大算力。隨著 5G、人工智能、大數據、物聯網等信息技術的迅猛發展&am…
閱讀更多...
改寫自己的瀏覽器插件工具 myChromeTools

改寫自己的瀏覽器插件工具 myChromeTools

1. 起因&#xff0c; 目的: 前面我寫過&#xff0c; 自己的一個瀏覽器插件小工具 最近又增加一個小功能&#xff0c;可以自動滾動頁面&#xff0c;尤其是對于那些瀑布流加載的網頁。最新的代碼都在這里 2. 先看效果 3. 過程: 代碼 1, 模擬鼠標自然滾動 // 處理滾動控制邏輯…
閱讀更多...
深度學習篇---OC-SORT簡介

深度學習篇---OC-SORT簡介

OC-SORT&#xff08;Observation-Centric SORT&#xff09;是一種以觀測為中心的多目標跟蹤算法&#xff0c;旨在解決傳統 SORT 算法在目標遮擋、外觀變化和復雜交互場景下關聯準確性不足的問題。以下是其詳細介紹&#xff1a; 核心創新點 以觀測為中心的在線平滑&#xff08…
閱讀更多...
硬件工程師筆記——二極管Multisim電路仿真實驗匯總

硬件工程師筆記——二極管Multisim電路仿真實驗匯總

目錄 1 二極管基礎知識 1.1 工作原理 1.2 二極管的結構 1.3 PN結的形成 1.4 二極管的工作原理詳解 正向偏置 反向偏置 multisim使用說明鏈接 2 二極管特性實驗 2.1 二極管加正向電壓 2.2 二極管加反向電壓 2.3 二極管兩端的電阻 2.4 交流電下二級管工作 2.5 二極…
閱讀更多...
vscode中讓文件夾一直保持展開不折疊

vscode中讓文件夾一直保持展開不折疊

vscode中讓文件夾一直保持展開不折疊 問題 很多小伙伴使用vscode發現空文件夾會折疊顯示, 讓人看起來非常難受, 如下圖 解決辦法 首先打開設置->setting, 搜索compact Folders, 去掉勾選即可, 如下圖所示 效果如下 看起來非常爽 ! ! !
閱讀更多...
設計模式學習筆記

設計模式學習筆記

設計模式 一&#xff1a;分類&#xff1a; 創建型模式 用于描述“怎樣創建對象”&#xff0c;它的主要特點是“將對象的創建與使用分離”。GoF&#xff08;四人組&#xff09;書中提供了單例、原型、工廠方法、抽象工廠、建造者等 5 種創建型模式。 結構型模式 用于描述如何將…
閱讀更多...
Kaggle-Predict Calorie Expenditure-(回歸+xgb+cat+lgb+模型融合+預測結果)

Kaggle-Predict Calorie Expenditure-(回歸+xgb+cat+lgb+模型融合+預測結果)

Predict Calorie Expenditure 題意&#xff1a; 給出每個人的基本信息&#xff0c;預測運動后的卡路里消耗值。 數據處理&#xff1a; 1.構造出人體機能、運動相關的特征值。 2.所有特征值進行從新組合&#xff0c;注意唯獨爆炸 3.對連續信息分箱變成離散 建立模型&#x…
閱讀更多...
第十二篇：MySQL 分布式架構演進與云原生數據庫探索

第十二篇：MySQL 分布式架構演進與云原生數據庫探索

本篇聚焦 MySQL 在互聯網架構演進過程中的角色變化&#xff0c;探討其從單體向分布式、再向云原生架構轉型的關鍵技術路徑與實踐建議。 一、傳統單體架構下的 MySQL 應用模式 在早期項目中&#xff0c;MySQL 多用于中小型應用&#xff1a; 單節點部署&#xff1b; 水平擴展難…
閱讀更多...
JVM——回顧：JVM的起源、特性與系統構成

JVM——回顧：JVM的起源、特性與系統構成

引入 在當今數字化時代&#xff0c;Java語言及其運行環境Java虛擬機&#xff08;JVM&#xff09;在軟件開發領域占據著舉足輕重的地位。從大型企業級應用到各類移動應用&#xff0c;JVM憑借其獨特的特性和強大的功能&#xff0c;為開發者提供了高效且穩定的運行環境。 JVM的起…
閱讀更多...
大疆上云API+流媒體服務器部署實現直播功能

大疆上云API+流媒體服務器部署實現直播功能

根據官網文檔上云API&#xff0c;先將官方提供的Demo部署起來&#xff0c;后端和前端服務環境搭建請參考官方文檔。因為官方文檔沒有對直播這塊的環境搭建進行說明&#xff0c;所以下面主要對直播功能環境搭建做一個記錄&#xff0c;僅供參考&#xff0c;如有不足之處&#xff…
閱讀更多...
計算機網絡 HTTP篇常見面試題總結

計算機網絡 HTTP篇常見面試題總結

HTTP各版本區別 HTTP 1.0 無狀態、無連接&#xff1a;每次請求都需要建立新的 TCP&#xff0c;處理完后立即關閉&#xff0c;導致開銷較大。隊頭阻塞&#xff1a;每個請求必須按照順序依次處理&#xff0c;前面的請求未完成&#xff0c;后面的請求只能等待&#xff0c;減低了…
閱讀更多...
目標檢測：YOLO 模型詳解

目標檢測：YOLO 模型詳解

目錄 一、YOLO&#xff08;You Only Look Once&#xff09;模型講解 YOLOv1 YOLOv2 (YOLO9000) YOLOv3 YOLOv4 YOLOv5 YOLOv6 YOLOv7 YOLOv8 YOLOv9 YOLOv10 YOLOv11 YOLOv12 其他變體&#xff1a;PP-YOLO 二、YOLO 模型的 Backbone&#xff1a;Focus 結構 三、…
閱讀更多...
開源 FcDesigner 表單設計器組件事件詳解

開源 FcDesigner 表單設計器組件事件詳解

FcDesigner 是一款基于Vue的開源低代碼可視化表單設計器工具&#xff0c;通過數據驅動表單渲染。可以通過拖拽的方式快速創建表單&#xff0c;提高開發者對表單的開發效率&#xff0c;節省開發者的時間。并廣泛應用于在政務系統、OA系統、ERP系統、電商系統、流程管理等領域。 …
閱讀更多...
最新文章

Copyright @ 2022~2023