原生微信小程序如何动态修改svg图片颜色及尺寸、宽高(封装svgIcon组件)解决ios不显示问题

最终效果

在这里插入图片描述

前言

动态设置Svg图片颜色就是修改Svg源码的path中的fill属性,

通过wx.getFileSystemManager().readFile读取.xlsx文件

ios不显示需要把encoding设置 binary

把文件转成base64

封装svg-icon组件

1、在项目的components下新建svg-icon文件夹,新增base64.js文件

class Base64 {constructor() {}_keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";encode(input) {var output = "";var chr1, chr2, chr3, enc1, enc2, enc3, enc4;var i = 0;input = this._utf8_encode(input);while (i < input.length) {chr1 = input.charCodeAt(i++);chr2 = input.charCodeAt(i++);chr3 = input.charCodeAt(i++);enc1 = chr1 >> 2;enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);enc4 = chr3 & 63;if (isNaN(chr2)) {enc3 = enc4 = 64;} else if (isNaN(chr3)) {enc4 = 64;}output = output + this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) + this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);}return output;};// public method for decodingdecode(input) {var output = "";var chr1, chr2, chr3;var enc1, enc2, enc3, enc4;var i = 0;input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");while (i < input.length) {enc1 = this._keyStr.indexOf(input.charAt(i++));enc2 = this._keyStr.indexOf(input.charAt(i++));enc3 = this._keyStr.indexOf(input.charAt(i++));enc4 = this._keyStr.indexOf(input.charAt(i++));chr1 = (enc1 << 2) | (enc2 >> 4);chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);chr3 = ((enc3 & 3) << 6) | enc4;output = output + String.fromCharCode(chr1);if (enc3 != 64) {output = output + String.fromCharCode(chr2);}if (enc4 != 64) {output = output + String.fromCharCode(chr3);}}output = this._utf8_decode(output);return output;};// private method for UTF-8 encoding_utf8_encode(string) {string = string.replace(/\r\n/g, "\n");var utftext = "";for (var n = 0; n < string.length; n++) {var c = string.charCodeAt(n);if (c < 128) {utftext += String.fromCharCode(c);} else if ((c > 127) && (c < 2048)) {utftext += String.fromCharCode((c >> 6) | 192);utftext += String.fromCharCode((c & 63) | 128);} else {utftext += String.fromCharCode((c >> 12) | 224);utftext += String.fromCharCode(((c >> 6) & 63) | 128);utftext += String.fromCharCode((c & 63) | 128);}}return utftext;};// private method for UTF-8 decoding_utf8_decode(utftext) {var string = "";var i = 0;var c = 0;var c1 = 0;var c2 = 0;while (i < utftext.length) {c = utftext.charCodeAt(i);if (c < 128) {string += String.fromCharCode(c);i++;} else if ((c > 191) && (c < 224)) {c2 = utftext.charCodeAt(i + 1);string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));i += 2;} else {c2 = utftext.charCodeAt(i + 1);c3 = utftext.charCodeAt(i + 2);string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));i += 3;}}return string;}
}export {Base64
}

2、在项目的components下新建svg-icon文件夹,新增index.js文件

// component/svg.js
const fs = wx.getFileSystemManager()import { Base64 } from './base64.js';
const base64 = new Base64()Component({properties: {// svg图片路径src: {type: String,value: ''},// svg颜色color: {type: String,value: ''},// svg宽度width: {type: String,value: '60rpx'},// svg高度height: {type: String,value: '60rpx'}},observers: {'src,color': function (src, color) {this.getSvgFile(src, color)}},data: {svgData: ''},methods: {getSvgFile(src, color) {let that = this;fs.readFile({filePath: src,// encoding: 'UTF-8',encoding: 'binary', // 解决ios不显示问题position: 0,success(res) {let sourceFile = res.data;let newFile = that.changeColor(sourceFile, color);let svgBase64File = base64.encode(newFile);that.setData({svgData: 'data:image/svg+xml;base64,' + svgBase64File})},fail(res) {console.error(res)}})},changeColor(sourceFile, color) {let newSvg;if (/fill=".*?"/.test(sourceFile)) {newSvg = sourceFile.replace(/fill=".*?"/g, `fill="${color}"`);  // SVG有默认色} else {newSvg = sourceFile.replace(/<svg /g, `<svg fill="${color}" `); // 无默认色}return newSvg}}
})

3、在项目的components下新建svg-icon文件夹,新增index.json文件

{"component": true,"usingComponents": {}
}

4、在项目的components下新建svg-icon文件夹,新增index.wxml文件

<block wx:if="{{svgData}}"><image style="width: {{width}};height: {{height}};" src="{{svgData}}"></image>
</block>

使用svg-icon组件

1、在使用的页面引入组件(即在json文件中引入)

{"usingComponents": {"svg-icon": "/components/svg-icon/index"}
}

2、在wxml文件中如下使用即可

<svg-icon src="/assets/imgs/userCenter/wocwin.svg" color="#3fb65f" />

相关文章

基于ElementUi再次封装基础组件文档


基于ant-design-vue再次封装基础组件文档


vue3+ts基于Element-plus再次封装基础组件文档

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

iec104和iec61850

iec104和iec61850 IEC104 规约详细解读(一) 协议结构 IEC104 规约详细解读(二)交互流程以及协议解析 61850开发知识总结与分享【1】 Get the necesarry projects next to each other in the same directory; $ git clone https://github.com/robidev/iec61850_open_server.g…

基于单片机的农田灌溉系统(论文+源码)

1.系统设计 本系统主要实现如下目标&#xff1a; 1&#xff0e;可以实时监测土壤湿度&#xff1b; 2&#xff0e;土壤湿度太低时&#xff0c;进行浇水操作&#xff1b; 3&#xff0e;可以按键设置湿度的触发阈值&#xff1b; 4. 可以实现远程操控 5&#xff0e;可以实现手…

wsl(ubuntu)创建用户

我们打卡ubuntu窗口&#xff0c;如果没有创建用户&#xff0c;那么默认是root用户 用户的增删改查 查 查询所有的用户列表 cat /etc/passwd | cut -d: -f1cat /etc/passwd: 这个命令用于显示 /etc/passwd 文件的内容。/etc/passwd 文件包含了系统上所有用户的基本信息。每一…

低代码开发会取代传统开发吗? 两者有什么区别 该如何选择

低代码开发技术在近几年逐渐被普及&#xff0c;帮助很大一部分开发者完成了复杂的工作。由于低代码开发方案入门门槛低且上手难度小&#xff0c;所以即使是非专业人士也可借助其便利性自主开发软件系统&#xff0c;整个开发过程几乎不需要专业程序员。久而久之就出现了一种声音…

C++上位软件通过Snap7开源库访问西门子S7-1200/S7-1500数据块的方法

前言 本人一直从事C上位软件开发工作较多&#xff0c;在之前的项目中通过C访问西门子PLC S7-200/S7-1200/S7-1500并进行数据交互的应用中一直使用的是ModbusTCP/ModbusRTU协议进行。Modbus上位开源库采用的LibModbus。经过实际应用发现Modbus开源库单次发送和接受的数据不能超过…

静态网页设计——红旗汽车官网(HTML+CSS+JavaScript)

前言 声明&#xff1a;该文章只是做技术分享&#xff0c;若侵权请联系我删除。&#xff01;&#xff01; 感谢大佬的视频&#xff1a; https://www.bilibili.com/video/BV1gK411x7Bg/?vd_source5f425e0074a7f92921f53ab87712357b 使用技术&#xff1a;HTMLCSSJS&#xff08;…

STM32CubeMX教程13 ADC - 单通道转换

目录 1、准备材料 2、实验目标 3、ADC概述 4、实验流程 4.0、前提知识 4.1、CubeMX相关配置 4.1.1、时钟树配置 4.1.2、外设参数配置 4.1.3、外设中断配置 4.2、生成代码 4.2.1、外设初始化调用流程 4.2.2、外设中断调用流程 4.2.3、添加其他必要代码 5、常用函数…

FreeRTOS 实时操作系统第十二讲 - 计数信号量

一、信号量的概念 1、信号量的基本概念 消息队列是实现任务与任务或任务与中断间通信的数据结构&#xff0c;可类比裸机编程中的数组 信号量是实现任务与任务或任务与中断间通信的机制&#xff0c;可以类比裸机编程中的标志位 信号量 (semaphore) 可以实现任务与任务或任务与中…

maven、springboot项目编译打包本地jar、第三方jar包

0. 引言 一般我们在maven项目中都是通过引入pom坐标的形式来引入第三方jar包&#xff0c;但某些场景下&#xff0c;第三方是直接提供的jar包文件&#xff0c;这就需要我们从本地引入第三方包并进行打包。所以我们今天来看下如何进行本地引入第三方包操作 1. 步骤 1、在项目下…

GNSS位移监测站对尾矿库坝体表面位移进行自动化监测

表面位移监测&#xff1a;通过GNSS位移监测站对尾矿库坝体表面位移进行自动化监测&#xff0c;掌握尾矿坝整体表面位置的变化及其变化速率&#xff08;包括平面位移和垂直沉降&#xff09;&#xff0c;确定尾矿坝坝体整体位移变形的情况&#xff0c;是确定尾矿库安全性的重要指…

基于Java+SpringBoot+Vue志愿者服务平台设计和实现

博主介绍&#xff1a;✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行交流合作✌ 主要内容&#xff1a;SpringBoot、Vue、SSM、HLM…

[技术杂谈]使用VLC将视频转成一个可循环rtsp流

通过vlc播放器&#xff0c;将一个视频转成rtsp流&#xff0c;搭建一个rtsp服务器。rtsp客户端可访问这个视频的rtsp流。 1. 打开vlc播放器&#xff0c;使用的版本如下 2. 菜单&#xff1a;媒体 ---> 流 3. 添加视频文件&#xff0c;点击添加一个mp4 文件 4. 选择串流&…

Servlet 3.0的异步处理

1、传统Servlet处理 Web容器会为每个请求分配一个线程&#xff0c;默认情况下&#xff0c;响应完成前&#xff0c;该线程占用的资源都不会被释放。若有些请求需要长时间(例如长处理时间运算、等待某个资源)&#xff0c;就会长时间占用线程所需资源&#xff0c;若这类请求很多&…

Spring中的数据校验

文章目录 引言摘要正文基于 ValidationUtils的简单校验基于自定义 Validator的校验Spring内置校验 LocalValidatorFactoryBeanHibernateValidator校验使用HibernateValidator自定义校验规则 总结 引言 我们在日常的软件开发过程中&#xff0c;尤其是WEB开发过程中&#xff0c;…

antd Table 动态数据 合并单元格(合并行)

antd Table 组件动态合并单元格 最近处理table的时候 遇到了要合并同一列的几行的情况&#xff0c;比如第一列的前面三行都是同一个对象的名字&#xff0c;此时合并显示比较妥当&#xff0c;但是数据是后端接口来的&#xff0c;而且可以筛选条件&#xff0c;搜索出来的数据就是…

Linux的ping命令、wget命令、curl命令

一、ping命令 通过ping命令&#xff0c;可以检查指定的网络服务器是否是可联通状态 形式&#xff1a;ping [-c num] ip或主机名 -c&#xff1a;检查的次数&#xff0c;不使用-c&#xff0c;将无限次数持续检查 ip或主机名&#xff1a;被检查的服务器的ip地址或主机名地址 …

Jenkins分布式实现: 构建弹性和可扩展的CI/CD环境!

Jenkins是一个流行的开源持续集成&#xff08;Continuous Integration&#xff0c;CI&#xff09;和持续交付&#xff08;Continuous Delivery&#xff0c;CD&#xff09;工具&#xff0c;它通过自动化构建、测试和部署过程&#xff0c;帮助开发团队更高效地交付软件。Jenkins的…

AtomicReference自旋加CAS保证对象引用原子性

AtomicReference类提供了对象引用的非阻塞原子性读写操作&#xff0c;并且提供了其他一些高级的用法&#xff0c;对象的引用其实是一个4字节的数字&#xff0c;代表着在JVM堆内存中的引用地址&#xff0c;对一个4字节数字的读取操作和写入操作本身就是原子性的 package Atomic…

数据结构入门到入土——ArrayList与顺序表

目录 一&#xff0c;线性表 二&#xff0c;顺序表 1.接口实现 三&#xff0c;ArrayList简介 四&#xff0c;ArrayList使用 1.ArrayList的构造 2.ArrayList常见操作 3.ArrayList的遍历 4.ArrayList的扩容机制 五&#xff0c;ArrayLisit的具体使用 杨辉三角 一&#x…

【SpringMVC】常用注解

什么是MVC&#xff1f; MVC是一种程序分层开发模式&#xff0c;分别是Model&#xff08;模型&#xff09;&#xff0c;View&#xff08;视图&#xff09;以及Controller&#xff08;控制器&#xff09;。这样做可以将程序的用户界面和业务逻辑分离&#xff0c;使得代码具有良好…