uniapp中封装一个svg转base64的组件_uniapp vue3 svg 转换base64

相关文章推荐
有爱心的松球 · 2024一建成绩查询时间-一建成绩查询入口- ...· 3 月前 ·
瘦瘦的伤痕 · 遥感技术_百度百科· 1 年前 ·
风流倜傥的作业本 · 办公室真实工作照片- 搜狗图片搜索· 1 年前 ·
爱喝酒的香瓜 · 为什么知乎上罕有对白右的批评？ - 知乎· 1 年前 ·
坚韧的萝卜 · 二次创业成功，何小鹏如何认知升级？· 1 年前 ·
uniapp中由于不支持svg--》base64，同时无法使用h5中atob，这里我们采用js-base64插件实现这样一个组件，只要传人svg的代码即可在uniapp中转为base64，同时支持自定义参数，比如宽度，高度,等
npm install --save js-base64
<template>
	<!-- <image 
	class="img"
	 :style="[{
				width:transformPxToVw(width) + 'vw',
				height:transformPxToVw(height) + 'vw',
                transform:'rotate(' + lastDeg + 'deg)'
	:src="base64String"></image> -->
</template>
<script>
	import { Base64 } from 'js-base64';
	export default {
		props:{
			svgTxt:{
				type:String,
				default:""
			width:{
				type:Number,
				default:20
			height:{
				type:Number,
				default:20
			deg:{
				type:Number,
				default:0
		mounted(){
			this.transformSvgToBase64(this.svgTxt)
		data() {
			return {
				base64String:"",
				toggle:false,
				lastDeg:0
		methods: {
			transformSvgToBase64(svgTxt){
				this.base64String = 'data:image/svg+xml;base64,' + Base64.encode(svgTxt);
			transformPxToVw(num,designWidth=375){
				let vwVal=(100/designWidth)*num;
				return vwVal.toFixed(3)
            handler(){
				this.toggle=!this.toggle
				this.lastDeg=this.toggle?this.deg:0
				console.log("this.lastDeg",this.lastDeg)
</script>
<style>
.img{
	display: inline-block;
</style>
3 引入组件 
<Arrow2 :svgTxt="svgTxt" :width="20" :height="20" :deg="90"></Arrow2>
data() {
			return {
				base64String:"",
				svgTxt:`<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
				<path d="M15.5705 8.26572C15.9061 7.95074 15.9227 7.42336 15.6078 7.0878C15.317 6.77805 14.8453 6.74 14.5105 6.98372L14.4298 7.05053L10.0061 11.204L5.5678 7.04969C5.25762 6.75939 4.78442 6.75194 4.4661 7.0168L4.38993 7.08869C4.09964 7.39887 4.09218 7.87207 4.35705 8.19039L4.42893 8.26655L9.43717 12.9538C9.73119 13.229 10.1747 13.2516 10.4933 13.0219L10.5769 12.953L15.5705 8.26572Z" fill="#A4A5B3"/>
			</svg>`,
4 添加动画 
本demo通过一个箭头的svg来做例子。该组件中通过点击箭头实现旋转动画。可以自己传参数来定义箭头的旋转方向本例是通过点击选择90度 
我们在组件内部定义了一个函数用于处理px单位的转化，因为style的设置无法实现px自动转为vw
                    uniapp中由于不支持svg--》base64，同时无法使用h5中atob，这里我们采用js-base64插件实现这样一个组件，只要传人svg的代码即可在uniapp中转为base64，同时支持自定义参数，比如宽度，高度等。我们在组件内部定义了一个函数用于处理px单位的转化，因为style的设置无法实现px自动转为vw。
    uni.getFileSystemManager().readFile({
     filePath: url, //选择图片返回的相对路径
     encoding: 'base64', //编码格式
     success: res => { //成功的回调
我们需要获取目标SVG： 
 var svg = document . querySelector ( 'svg' ) ;
 比我们必须创建宽度和高度完全像我们要转换的svg的画布： 
 var canvas = document . createElement ( 'canvas' ) ;
canvas . width = svg . getBoundingClientRect ( ) . width ;
canvas . height = svg . getBoundingClientRect ( ) . height ;
body . appendChild ( canvas ) ;
 ...魔术来了：
 XMLSerializer.serializeToSt
				created() {
    this.title = this.readFile("../../../static/images/雷达.svg");
    console.log(this.title,"svg文件读取");
    var newSvg=this.title.replace(/#(?:[0-9a-fA-F]{6})/, "#f1f1f1");
    console.lo...
				当前在做得小程序设计拍照识别，而服务器方需要前端提供图片的base64编码作为参数进行解析识别，一开始想着走原生JS的base64方法——借助canvas，当然我也试了，就在自己觉得没问题的时候，调试时终端报错了：ReferenceError: Image is not defined.
我着实懵了，也就是说Image对象实例化在小程序这边是无效的，查资料后真的很打脸，虽然人家微信不给Image用，但是人家给提供了转base64的方法。咱直接用就行了，唉，要是早一点对目标问题进行查询，早点看文档也许不用走
 随时随地将SVG转换为base64
如果像我一样，在开发时使用了大量的SVG，则可能已经到了需要将SVG用作背景图像或嵌入到javascript文件中的地步。 唯一的方法是将SVG文件转换为base64字符串，然后在需要时使用它。 该软件包正是这样做的-将SVG转换为base64。
 该软件包可在浏览器和Node环境中使用。 请继续阅读以了解操作方法。
npm i svg64
yarn add svg64
只需下载此存储库并使用dist文件夹中的文件
或从unpkg.com取消设置
< script src =" https://unpkg.com/svg64 " > </ script >
在浏览器中：
 // This is your SVG DOM element
const svg = document . getElementByI
				需要将端上传过来的svg文件解析为字符串，然后再生成jpeg格式图片，再将图片转成Base64格式进行使用首先引入如下以来。版本一定按照这个来，高版本会出现各种类丢失的问题。
再就是工具类代码
可以看到生成了base64字符串
进行转化后能够复原出图片
				文章目录SVG 简介什么是SVGSVG有哪些优势SVG在小程序中的使用获取SVG资源获取对应SVG代码将SVG代码转码为Base64编码格式在具体代码中引用SVG展示效果
SVG 简介
什么是SVG
SVG 意为可缩放矢量图形（Scalable Vector Graphics）。
SVG 使用 XML 格式定义图像。
它是可以用于描述静态图、动画，以及用户界面的一种图形格式。1999年由万维网联盟发布。于2013年成为W3C推荐标准。
SVG有哪些优势
SVG 可被非常多的工具读取和修改
SVG 与JPE
<foreignObject>是SVG的一个子标签，这个标签中可以用于显示普通的DOM标签。也就是渲染XHTML元素。
举个例子：
<svg xmlns="http://www.w3.org/2000/svg">
  <foreignObject width="120" height="50">
      <body xmlns="http://www.w3.org/1999/xhtml">
				要将SVG转换为Base64格式，可以使用代码或在线工具来完成。一种方法是在代码中使用data URI scheme，将SVG代码直接嵌入到CSS样式中。可以使用以下格式将SVG转换为Base64：
```css
background-image: url("data:image/svg+xml;base64,[Base64编码]");
其中，[Base64编码]是SVG代码经过Base64编码后的字符串。
另一种方法是使用在线工具进行转换。你可以复制SVG代码，并使用在线Base64编码工具将其转换为Base64格式。一些常用的在线工具包括：
- [base64.guru](https://www.base64.guru/converter/encode/image/svg)
- [FreeFormatter](https://www.freeformatter.com/base64-encoder.html)
- [Online Base64 Image Encoder](https://www.askapache.com/online-tools/base64-image-converter/)
在这些工具中，你只需要将SVG代码粘贴到指定的输入框中，然后点击转换按钮，即可获得转换后的Base64编码。请注意，不同工具的界面和操作可能会有所不同，但基本原理是一样的。
请根据你的具体需求选择适合的方法来将SVG转换为Base64格式。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
-  *1* [svg64:在Node和浏览器中将SVG转换为base64](https://download.csdn.net/download/weixin_42114041/18257082)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
-  *2* *3* [微信小程序 icon图标 SVG代码转码为Base64编码格式并使用（霸霸看了都说好）](https://blog.csdn.net/pujun1201/article/details/119756993)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]