uni-app实现用AI自行绘制的SVG矢量图片-base64转换法

最新推荐文章于 2024-06-11 16:31:57 发布
最新推荐文章于 2024-06-11 16:31:57 发布
阅读量2.5k 收藏 2
点赞数
分类专栏： uniapp 文章标签： vue.js css less sass
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Darbuly/article/details/105899185
版权

1. 需求分析

想要在Uni-app下实现用AI自行绘制的SVG矢量图片

2. 实现思路

AI==>.svg==>base64==>css代码

2.1 先用AI绘制好AI图

先用AI绘制好AI图

2.2 导出SVG格式文档

注意，导出之前先把画板固定下来 “对象-画板-适和选中的图稿”

导出SVG格式文档

2.3 在线转换base64

在这里插入图片描述

2.4 复制到CSS中应用——以stylus语法为例

stylys应用
写样式

Darbuly小威
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用uniapp开发利用ai生成图片的应用
qq_34274756的博客
05-14 687
uniapp是Dcloud推出的一款跨端开发框架。是一个使用开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。使用uniapp开发小程序或者手机桌面应用，非常方便。而最近官方开放了一个叫做uniai的组件，可以让我们方便的利用ai能力来开发应用。这里就简单介绍一下ai的图片生成能力的使用方法。注意:HBuilderX版本需要在 3.8.2以上。
svg64:在Node和浏览器中将SVG转换为base64
04-30
SVG64 随时随地将SVG转换为base64关于如果像我一样，在开发时使用了大量的SVG，则可能已经到了需要将SVG用作背景图像或嵌入到javascript文件中的地步。 唯一的方法是将SVG文件转换为base64字符串，然后在需要时使用...
uniapp中封装一个svg转base64的组件
baidu_41601048的博客
02-02 964
uniapp中由于不支持svg--》base64，同时无法使用h5中atob，这里我们采用js-base64插件实现这样一个组件，只要传人svg的代码即可在uniapp中转为base64，同时支持自定义参数，比如宽度，高度等。我们在组件内部定义了一个函数用于处理px单位的转化，因为style的设置无法实现px自动转为vw。
svg图标封装--基于vue2适配uniapp全端
最新发布
2302_79245293的博客
06-11 557
注意:已注册为全局组件,可直接在页面中引用(注意,宽高有默认值可以不传参数,xin是文件名)在static目录下新建svg目录,后将所有svg图标都放到此文件夹。(注意：在根目录下新建components文件夹)在main.js文件下。
uni-app 如何使用svg
BradenHan的专栏
04-27 4607
在uni-app中使用SVG（Scalable Vector Graphics）可以采用多种方式，以下是几种常见的方法和步骤，包括直接引用、转换为base64编码、作为组件使用等。下面分别举例说明：虽然uni-app本身可能不直接支持标签，但可以通过以下方式间接使用：a. 作为Image组件的源将SVG文件作为静态资源放入项目中，然后通过组件的属性引用。这种方法适用于静态SVG图像。示例： 确保SVG文件（例如）已放置在项目的目录下。b. 作为Background Image如果需要将SVG作为背景图，可以
uniapp 使用 svg图片 绘制svg动态生成代码
rulai_qiaokeli的博客
09-03 1536
uniapp 使用svg动态图片
uniapp将图片转化为base64格式
记录本人工作中遇到的问题、经验总结以及分享。
03-10 6905
在做项目适合发现，想给一个css写入本地图片，图片很大并超过40k，需要转base64格式。
基于uni-app的JeeSite移动端框架设计源码
04-04
本设计源码提供了一个基于uni-app的JeeSite移动端框架。项目包含236个文件，主要使用Vue、JavaScript、HTML和CSS编程语言。文件类型包括112个Vue组件文件、52个JavaScript脚本文件、39个PNG图片文件、14个SCSS样式...
svg2ass:SVG2ASS-将SVG矢量图形转换为ASS字幕绘制指令
05-09
将SVG矢量图形转换为ASS字幕绘制指令。 概述 SVG2ASS接收SVG文件，并放下ASS对话框行，准备粘贴到例如Aegisub中。 仅支持一组基本的SVG功能，而大多数更高级的功能都将被忽略。 您可以通过将所有对象转换为路径并尽...
svg-to-base64-vanilla-js:使用纯JavaScript从SVG转换为Base64图像
05-17
用纯JavaScript编写的SVG到base64转换器 它易于使用-只需抓取要转换的SVG即可...做到这一点。 快速开始 我们需要获取目标SVG： var svg = document . querySelector ( 'svg' ) ; 比我们必须创建宽度和高度完全像...
基于uni-app的电影购票后台管理系统设计源码
04-09
本资源提供了一套基于uni-app的电影购票app的后台管理系统设计源码。该项目包含了97个Vue文件、56个JavaScript文件、22个PNG图像文件、16个SCSS样式文件、8个SVG图标文件、6个JSON文件、4个TypeScript文件以及1个...
uniapp获取图片后，base64位之间的转换
weixin_43374521的博客
05-18 4954
uniapp获取图片后，base64位之间的转换 uni.chooseImage之后会返回本地的base64位路径，提交上传服务端时，因为是本地路径的原因会读取不到。使用要进行特殊的转换，js代码如下。新建image-tools.js，放libs目录下。 // 将图片转成base64格式 function getLocalFilePath(path) { if (path.indexOf('_www') === 0 || path.indexOf('_doc') === 0 || path.inde
uni-app 中图片转 base64 以及 base64 转图片方式，超简单，超好用的图片转换工具，你值得拥有它。
跟着飞哥学编程（全栈联盟）
12-15 8271
图像转换工具，可用于如下环境：uni-app、微信小程序、5+APP、浏览器（需允许跨域）。
uniapp将本地图片/网络图片转为base64
qq_38736186的博客
01-04 2117
【代码】uniapp将本地图片/网络图片转为base64。
【uni-app】base64转图片
loyd3的博客
04-30 3420
const fsm = wx.getFileSystemManager(); const FILE_BASE_NAME = 'tmp_base64src'; //自定义文件名 function base64src(base64data, cb) { const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || []; if (!format) { return (new Error('ERR
uniapp将图片地址base64格式相互转换
青衫折扇的博客
04-04 1402
【代码】uniapp将图片地址base64格式相互转换。
uniapp 将svg转换为css可用的图标字体
xiyunmengyuan的博客
07-27 2034
1.转换平台链接 https://icomoon.io 2.转换步骤 2.1 打开https://icomoon.io/ 后，点击右上角登录旁边的icoMoon App进行登录 2.2 具体流程图 2.3 代码配置 .将style.css和fonts文件放到项目的静态资源文件下并全局设置引入 <i style="font-size: 48upx;position: absolute;left: 20rpx;color: #fff;" class="melyshop-melyshop-uniE90
ai_495 uniapp 01
Aojianga的博客
11-19 251
@hyl_495 新人上路 没完整认真学过什么框架 希望通过这次学习 能对这块有一定对了解 hh 加油加油加油加油！！！ uniapp + iview 1. 必备基础知识 html + css + javascript基础知识 小程序知识 vuejs知识 2. 框架下载及环境搭建 uniapp官网下载地址 ...
百度AI，实现图像增强，Base64 图片转化问题
weixin_44377911的博客
04-04 1476
本文主要是结合了几个技术，整合一下，根据自己的需求，实现了图像增强 首先需要用到的是百度AI技术，使用的技术是引入SDK包，这个可以调用里面Jar包的现成方法，不用自己编写图像增强方法。 可以具体参考如下官方技术文档连接 图像增强技术文档链接 需要先注册个百度云账户，登陆成功之后，点击控制台，出现如下图片，选择图像增强（百度AI其他功能类似） 然后点击创建应用，这个步骤很关键，因为创建成功后，有三...
uni-app 使用svg
01-06
uni-app是一个跨平台应用开发框架，支持将代码编译成各种平台的原生应用。在uni-app的开发中，使用SVG（可缩放矢量图形）可以带来许多好处。 首先，SVG是一种矢量图形格式，它以XML格式描述图形，可以无损地放大或缩小，适应不同分辨率的屏幕而不失真，这使得应用在不同平台上都能呈现出良好的视觉效果。在uni-app的开发中，使用SVG可以轻松地实现图标、图形等矢量图形的展示。 其次，SVG本身支持基本的图形绘制、路径绘制、文本渲染等功能，这些功能在uni-app中也可以借助SVG实现。开发者可以利用SVG提供的丰富功能，灵活地设计和呈现应用中的各种图形元素，丰富用户界面的表现形式。 另外，uni-app对SVG的支持也较为完善，开发者可以直接在uni-app中引入SVG文件，然后在页面和组件中直接使用。uni-app还提供了一些封装好的SVG组件，方便开发者快速地集成和使用SVG图形。 总的来说，uni-app使用SVG可以带来更好的视觉效果和用户体验，同时也为开发者提供了更加灵活和丰富的图形展示方式，使得应用在不同平台上都能展现出统一且优秀的视觉效果。因此，在uni-app的开发中，合理地利用SVG是非常值得推荐的做法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值