svg图片如何渲染到页面,以及svg文件的上传

news2024/11/14 12:12:59

svg图片渲染到页面的几种方式

  • 背景
  • 🟡require.context获取目录下的所有文件
  • 🟡方式1: 直接在html中渲染
  • 🟡方式: 发起ajax请求,获取SVG文件

背景

需要实现从本地目录下去获取所有的svg图标进行预览,将选中的图片显示在另一个地方,再上传。

🟡require.context获取目录下的所有文件

require.context中传入三个参数:一 个要搜索的目录,一个标记位表示是否还搜索其子目录, 以及一个匹配文件的正则表达式

// 获取该目录下的所有svg文件
const files = require.context('static/topology/icon', false, /\.svg$/);
const imgs = files.keys().map((key) => files(key));// 返回一个数组,存储的是base64字符串

这个字符串是一段base64编码后的SVG图片数据,可以直接在HTML/CSS中使用,进行图片的预览
在这里插入图片描述
🔸如果还想获取该svg图片的文件名

const iconImgs= ref<{ url: string; name: string }[]>([]);
 const files = require.context('static/topology/icon', false, /\.svg$/);
   const imgs = files.keys().map((key) => {
        iconImgs.value = key.split('/').pop(); // 提取文件名部分
        return {
            url: files(key), // base64编码的字符串
            name: fileName, // 文件名  xx.svg
        };
    });

🔸注意:如果在ts中使用会出现以下的警告: 类型"NodeRequire”上不存在属性"context”
在这里插入图片描述
🔸解决方法

npm install --save-dev @types/webpack-env
{
  "compilerOptions": {
    // other options...
    "types": [
      // other types...
      "webpack-env"
    ]
  }
}

🟡方式1: 直接在html中渲染

将base64字符串直接绑定到imgsrc上,一般用于图片的预览。

<div  v-for="(item, index) in iconImgs" :key="index" >
              <div
                :title="item.name.split('.')[0]">
                <img :src="item.url" />
              </div>
       </div>

🟡方式: 发起ajax请求,获取SVG文件

一般用于图片的回显,根据名称或者i d.

async function getImage(name = 'default') {
  try {
    const iconName = name || 'default';
    iconUrl = `${window.__ctx}/static/icon/${iconName}.svg`;
    //发起ajax请求,获取SVG文件
    const res = await $.ajax({
      url: iconUrl,
      type: 'GET',
      dataType: 'xml',
    });
    console.log('res', res);//打印见下图1
    
    // 解析SVG文件,获取SVG元素
    var svg = $(res).find('svg');
    console.log('svg:', svg);//打印见下图2
    
    if (!svg || svg.length === 0) throw new Error(`${name}.svg 图标不存在`);
    svg.css({ width: '96px', height: '96px' });//给svg图片设置样式
    // 将 svg 元素的 HTML 内容赋值给 iconImage,绑定到div的v-html就可以显示了
    iconImage.value = svg.prop('outerHTML');
    console.log('iconImage:', iconImage.value);//打印见下图2
    // 将svg图片变成文件,待上传
    //注意:这里传的一定是svg字符串,而且type一定是image/svg+xml格式(这边之前踩了坑!!)
      iconFile.value = new File([new Blob([iconImage.value], { type: 'image/svg+xml' })], `${name}.svg`, {
      type: 'image/svg+xml',
    });
  } catch (err) {
    console.log(`[log] - getImage - err:`, err);
    // 如果获取不到图标则使用默认图标
    if (name !== 'default') {
      await getImage('default');
    }
  }
}

🔸【图1】:是一个document文档
在这里插入图片描述
🔸【图2】:是一个svg元素,可使用$(res).find('svg')去获取.
将获取到的SVG文件内容转换成jQuery对象,然后通过jQuery对象的find()方法,筛选出其中的SVG元素。
在这里插入图片描述

🔸不借助jQuery的实现方法:
1.使用原生的DOMParser去解析

const parser = new DOMParser();
const xmlDoc = parser.parseFromString(svgStr, 'image/svg+xml');

2. querySelector 或者getElementsByTagName 方法获取 SVG 元素

const svgElement = xmlDoc.querySelector('svg');
const pathElements = xmlDoc.getElementsByTagName('path');

🔸【图3】:svg元素的内容,通过svg.prop('outerHTML')可以得到。
在这里插入图片描述
🔸将svg元素的内容显示在页面上:

         <div
            title="点击选择图标"
            style="width: 112px; height: 112px; border: 1px solid #c3cdd7"
            @click="showIconDialog"
            v-html="iconImage"></div>

💦小插曲
之前将svg转成文件后上传,服务器显示的文件是[object XMLDocument], 是由于请求的参数类型不正确导致的。
在这里插入图片描述

![在这里插入图片描述](https://img-blog.csdnimg.cn/6aad3817ffef420d96525e64fb358535.png
一开始的错误写法:将svg文档转成字节流了

iconFile.value = new File([new Blob([res], { type: 'image/svg+xml' })], `${name}.svg`);

🔸正常的传参显示:svg元素的内容
在这里插入图片描述
🔸svg内容的两种形式的区别
在这里插入图片描述
前面的这个包含了一些冗余数据,后面这个是经过压缩的,只有 svg 路径数据。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/909966.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

合并jar包导致gradle传递依赖失效

目录 零、背景一、合并jar包1.1、自定义一组jar包1.2、自定义合并jar的任务1.3、定义打包jar的任务 二、发布jar包2.1、未合并jar包之前的合并方式2.2、合并jar包之后的合并方式 三、发现问题3.1、确定gradle中的依赖关系3.2、对比maven是否缺失依赖3.3、对比合并前后的pom.xml…

【生态经济学】利用R语言进行经济学研究技术——从数据的收集与清洗、综合建模评价、数据的分析与可视化、因果推断等方面入手

查看原文>>>如何快速掌握利用R语言进行经济学研究技术——从数据的收集与清洗、综合建模评价、数据的分析与可视化、因果推断等方面入手 近年来&#xff0c;人工智能领域已经取得突破性进展&#xff0c;对经济社会各个领域都产生了重大影响&#xff0c;结合了统计学、…

Midjourney API 国内申请及对接方式

在人工智能绘图领域&#xff0c;想必大家听说过 Midjourney 的大名吧&#xff01; Midjourney 以其出色的绘图能力在业界独树一帜。无需过多复杂的操作&#xff0c;只要简单输入绘图指令&#xff0c;这个神奇的工具就能在瞬间为我们呈现出对应的图像。无论是任何物体还是任何风…

7-10 查验身份证

分数 15 全屏浏览题目 切换布局 作者 陈越 单位 浙江大学 一个合法的身份证号码由17位地区、日期编号和顺序编号加1位校验码组成。校验码的计算规则如下&#xff1a; 首先对前17位数字加权求和&#xff0c;权重分配为&#xff1a;{7&#xff0c;9&#xff0c;10&#xff0c…

No mapping found for HTTP request with URI

参考: 参考地址 说明 ssm老项目,接过来别人的项目 临时建了一个Controller方便测试用的,结果访问掉不通,报: No mapping found for HTTP request with URIxxxx 这样的错误 解决办法 看了下web,xml配置 在 webmvc-config.xml 配置文件里面添加了几行配置 说明: com.iph.h…

如何使用 JavaScript Promise – 回调、异步等待和 Promise 方法解释

在本教程中,您将学习有关在 JavaScript 中使用 Promise 和 async/await 所需了解的所有内容。 那么让我们开始吧。 为什么在 JavaScript 中使用 Promise? ES6 引入了 Promise 作为原生实现。在 ES6 之前,我们使用回调来处理异步操作。 让我们了解什么是回调以及 Promise…

8.部署项目

项目地址&#xff1a;RuoYi-Cloud-Plus: 项目正式入驻 dromara 开源社区 迁移地址: https://gitee.com/dromara/RuoYi-Cloud-Plus 1.获取源码 需要有gitee账户 先把源码fork到自己的仓库中 需要多等待一段时间 勾选对应的环境 构建项目 2.sql导入 将sql导入到与sql文件名…

PHP 房产网站系统Dreamweaver开发mysql数据库web结构php编程计算机网页项目

一、源码特点 PHP 房产网站系统是一套完善的WEB设计系统&#xff0c;对理解php编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。 源码 https://download.csdn.net/download/qq_41221322/88233553 论文 https://download…

深入理解Java线程

进程、线程和协程 进程 程序由指令和数据组成&#xff0c;但程序要运行就要将指令加载进CPU以及数据加载进内存&#xff0c;并且在指令运行过程中可能还会用到磁盘、网络等设备。进程就是用来加载指令、管理内存和IO的。当一个程序被运行&#xff0c;从磁盘加载这个程序的代码…

基本定时器

1.简介 1. 基本定时器 TIM6 和 TIM7 包含一个 16 位自动重载计数器 2. 可以专门用于驱动数模转换器 (DAC), 用于触发 DAC 的同步电路 3. 16 位自动重载递增计数器 4. 16 位可编程预分频器 5. 计数器溢出时, 会触发中断/DMA请求 从上往下看 1.开始RCC供给定时器的时钟 RCC_APB1…

python解析小说

前言 在信息爆炸的时代&#xff0c;网络上充斥着大量的小说资源&#xff0c;让人们能够随时随地尽享阅读的乐趣。然而&#xff0c;有些小说网站要求用户付费才能获取完整的内容&#xff0c;这给许多人带来了困扰&#xff0c;尤其是像我这类对金钱概念模糊的人。不过&#xff0…

Android 12 源码分析 —— 应用层 二(SystemUI大体组织和启动过程)

Android 12 源码分析 —— 应用层 二&#xff08;SystemUI大体组织和启动过程&#xff09; 在前一篇文章中&#xff0c;我们介绍了SystemUI怎么使用IDE进行编辑和调试。这是分析SystemUI的最基础&#xff0c;希望读者能尽量掌握。 本篇文章&#xff0c;将会介绍SystemUI的大概…

工业类LMQ61460AASRJRR,汽车类LMQ61460AFSQRJRRQ1、LMQ61460AASQRJRRQ1 6A、降压转换器简化原理图

一、LMQ61460AASRJRR器件概述&#xff1a; LMQ61460 是一款具有集成旁路电容器的高性能直流/直流同步降压转换器。该器件具有集成式高侧和低侧MOSFET&#xff0c;能够在 3.0V 至 36V 的宽输入电压范围内提供高达 6A 的输出电流&#xff1b;可耐受 42V 电压&#xff0c;简化了输…

智影 R100:首款三维Mesh建模的SLAM激光扫描仪

近年来&#xff0c;激光SLAM系统凭借其更加快速且准确获取更丰富信息的优势&#xff0c;迅速风靡测绘领域&#xff0c;让原本耗时耗力的外业测量变得更加高效。手持激光扫描仪作为基于激光SLAM技术衍生的众多产品之一&#xff0c;相较于架站式激光扫描仪更加轻巧便利&#xff0…

AUTOSAR规范与ECU软件开发(实践篇)5.2 ETAS ISOLAR-A工具入门

目录 1、 ISOLAR-A安装方法 2 、ISOLAR-A界面说明 1、 ISOLAR-A安装方法 ISOLAR-A工具安装方法较为便捷, 按照安装提示默认操作即可。双击打开ETAS ISOLAR-A的安装包文件夹, 双击运行Autostart.exe, 会出现如图5.2所示的安装界面, 然后点击Main, 会弹出如图5.3所示界面,…

Stable Diffusion web UI 部署详细教程

前言 本文使用 AutoDL 平台进行 Stable Diffusion web UI 云端部署 AutoDL 官网&#xff1a;AutoDL算力云 | 弹性、好用、省钱。租GPU就上AutoDL Stable Diffusion web UI 官网&#xff1a;AUTOMATIC1111/stable-diffusion-webui: Stable Diffusion web UI (github.com) 步…

string(模拟实现与深拷贝)

目录 深拷贝与浅拷贝 浅拷贝&#xff1a; 深拷贝 写时拷贝(了解) 模拟实现 准备 完整代码 深拷贝与浅拷贝 浅拷贝&#xff1a; 也称位拷贝&#xff0c;编译器只是将对象中的值拷贝过来。如果对象中管理资源&#xff0c;最后就会导致多个对象共享同一份资源&#xff0c;当一…

AMSET计算极化声子频率

前面已有文章介绍过amset这个软件&#xff0c;包括形变势VASPAMSET计算形变势、迁移率散射AMSET计算不同散射机制下载流子迁移率的计算和绘制功能中能带结构VASPAMSET plot 绘制能带图的使用。 同时&#xff0c;通过amset可以处理密度泛函微扰计算&#xff08;DFPT&#xff09;…

软件产品鉴定测试需要哪些材料?选择第三方软件检测机构的必要性

在当今数字化时代&#xff0c;软件产品无论是在企业还是个人生活中都扮演着重要的角色。然而&#xff0c;随着软件产品的不断增多和市场竞争的加剧&#xff0c;软件产品进行鉴定测试显得尤为重要。 一、软件鉴定测试需要提供哪些材料? 1、软件产品的版本号和更新说明 2、软…

2023国赛数学建模思路 - 案例:感知机原理剖析及实现

文章目录 1 感知机的直观理解2 感知机的数学角度3 代码实现 4 建模资料 # 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 感知机的直观理解 感知机应该属于机器学习算法中最简单的一种算法&#xff0c;其…