湖南中耀建设集团有限公司网站,凡科建站公司,基础微网站开发动态,网页设计报告需求分析svg图片渲染到页面的几种方式 背景#x1f7e1;require.context获取目录下的所有文件#x1f7e1;方式1: 直接在html中渲染#x1f7e1;方式: 发起ajax请求#xff0c;获取SVG文件 背景
需要实现从本地目录下去获取所有的svg图标进行预览#xff0c;将选中的图片显示在另… 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字符串直接绑定到img的src上一般用于图片的预览。
div v-for(item, index) in iconImgs :keyindex div:titleitem.name.split(.)[0]img :srcitem.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);//打印见下图2if (!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/svgxml格式这边之前踩了坑iconFile.value new File([new Blob([iconImage.value], { type: image/svgxml })], ${name}.svg, {type: image/svgxml,});} 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/svgxml);2. querySelector 或者getElementsByTagName 方法获取 SVG 元素
const svgElement xmlDoc.querySelector(svg);
const pathElements xmlDoc.getElementsByTagName(path);【图3】svg元素的内容通过svg.prop(outerHTML)可以得到。 将svg元素的内容显示在页面上: divtitle点击选择图标stylewidth: 112px; height: 112px; border: 1px solid #c3cdd7clickshowIconDialogv-htmliconImage/div小插曲 之前将svg转成文件后上传服务器显示的文件是[object XMLDocument], 是由于请求的参数类型不正确导致的。 一开始的错误写法将svg文档转成字节流了
iconFile.value new File([new Blob([res], { type: image/svgxml })], ${name}.svg);正常的传参显示svg元素的内容 svg内容的两种形式的区别 前面的这个包含了一些冗余数据后面这个是经过压缩的只有 svg 路径数据。
