当前位置: 首页 > news >正文

原生微信小程序如何动态修改svg图片颜色及尺寸、宽高(封装svgIcon组件)

最终效果

在这里插入图片描述

前言

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

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

把文件转成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',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再次封装基础组件文档

相关文章:

原生微信小程序如何动态修改svg图片颜色及尺寸、宽高(封装svgIcon组件)

最终效果 前言 动态设置Svg图片颜色就是修改Svg源码的path中的fill属性&#xff0c; 通过wx.getFileSystemManager().readFile读取.xlsx文件 把文件转成base64 封装svg-icon组件 1、在项目的components下新建svg-icon文件夹&#xff0c;新增base64.js文件 class Base64 {cons…...

Python从入门到网络爬虫(面向对象详解)

前言 Python从设计之初就已经是一门面向对象的语言&#xff0c;正因为如此&#xff0c;在Python中创建一个类和对象是很容易的。本章节我们将详细介绍Python的面向对象编程。如果你以前没有接触过面向对象的编程语言&#xff0c;那你可能需要先了解一些面向对象语言的一些基本…...

NPDP产品经理含金量高吗?难考吗?

NPDP的中文翻译为产品经理国际资格认证。NPDP考试起源于美国&#xff0c;由美国产品开发与管理协会&#xff08;PDMA&#xff09;发起。NPDP认证是集理论、方法与实践为一体的全方位知识体系&#xff0c;为公司组织层级进行规划、决策、执行提供良好的方法体系支撑。&#xff0…...

目标检测 YOLOv5 - 推理时的数据增强

目标检测 YOLOv5 - 推理时的数据增强 flyfish 版本 YOLOv5 6.2 参考地址 https://github.com/ultralytics/yolov5/issues/303在训练时可以使用数据增强&#xff0c;在推理阶段也可以使用数据增强 在测试使用数据增强有个名字叫做Test-Time Augmentation (TTA) 实际使用中使…...

篇二:springboot2.7 OAuth2 server使用jdbc存储RegisteredClient

上一篇 <<springboot 2.7 oauth server配置源码走读一>>中简单描述了oauth2 server的配置&#xff0c;其中使用了内存保存 RegisteredClient&#xff0c;本篇改用mysql存储。 db存储需要创建表&#xff0c;表结构应该是什么样的呢&#xff0c;从spring给我们封装好…...

卷积神经网络|导入图片

在学习卷积神经网络时&#xff0c;我们通常使用的就是公开的数据集&#xff0c;这里&#xff0c;我们不使用公开数据集&#xff0c;直接导入自己的图片数据&#xff0c;下面&#xff0c;就简单写个程序实现批量图片的导入。 import osfrom PIL import Imageimport numpy as np…...

关于unity的组件VerticalLayoutGroup刷新显示不正常的问题

先说明一下我是如何用到&#xff0c;有哪些处理的 用到这个组件基本上都是将列表进行排版操作的&#xff0c;竖着&#xff0c;或者横着&#xff0c;横着用HorizontalLayoutGroup 还有一个和这个组件搭配的组件叫ContentSizeFitter 先说我是怎么发现这个组件不好用的 //本地读取…...

wait 和 notify 这个为什么要在synchronized 代码块中?

一个工作七年的小伙伴&#xff0c;竟然不知道” wait”和“notify”为什么要在 Synchronized 代码块中 。 好吧&#xff0c;如果屏幕前的你也不知道&#xff0c;请在公屏上刷”不知道“。 对于这个问题&#xff0c;我们来看看普通人和高手的回答。 一、问题解析 1. wait 和 n…...

大白话说区块链和通证

1 区块链 简单地说&#xff0c;区块链其实就像是一个不可篡改的分布式数据库&#xff0c;该分布式数据库记录了一系列交易或事件。区块链运行在至少1个以上的节点上&#xff0c;每个节点都有自己的一个分布式数据库&#xff0c;也就是分布式账本。正常情况下&#xff0c;每个节…...

Jvm之垃圾收集器(个人见解仅供参考)

问&#xff1a;什么是垃圾收集算法中的分代收集理论&#xff1f; 答&#xff1a;分代收集理论是垃圾收集算法的一种思想&#xff0c;根据对象存活周期的不同将内存分为几块&#xff0c;一般将java堆分为新生代和老年代。这种理论使得我们可以根据各个年代的特点选择合适的垃圾收…...

Minitab 21软件安装包下载及安装教程

Minitab 21下载链接&#xff1a;https://docs.qq.com/doc/DUkNHZVhwTXhtTFla 1.选中下载好的安装包&#xff0c;鼠标右键解压到”Minitab 21“文件夹 2.选中”Setup.exe“&#xff0c;鼠标右击选择“以管理员身份运行” 3.点击“下一步” 4.点击“是” 5.点击“下一步” 6.勾选…...

Java版商城:Spring Cloud+SpringBoot b2b2c电子商务平台,多商家入驻、直播带货及免 费 小程序商城搭建

​随着互联网的快速发展&#xff0c;越来越多的企业开始注重数字化转型&#xff0c;以提升自身的竞争力和运营效率。在这个背景下&#xff0c;鸿鹄云商SAAS云产品应运而生&#xff0c;为企业提供了一种简单、高效、安全的数字化解决方案。 鸿鹄云商SAAS云产品是一种基于云计算的…...

阿里云被拉入黑洞模式怎么办?该怎么换ip-速盾网络

被拉入黑洞模式&#xff08;BGP黑洞路由&#xff09;意味着所有进入目标IP的流量都会被丢弃&#xff0c;从而导致目标IP对外完全不可访问。这种情况通常发生在面对大规模DDoS攻击时&#xff0c;为了防止攻击流量对其他网络造成影响。如果你使用的是阿里云服务并遭受到这种攻击&…...

Android 13.0 recovery竖屏界面旋转为横屏

1.概述 在13.0系统项目定制化开发中,由于平板固定横屏显示,而如果recovery界面竖屏显示就觉得怪怪的,所以需要recovery页面横屏显示的功能, 所以今天就来解决这个问题 2.实现功能相关分析 Android的Recovery中,利用 bootable\recovery下的minui库作为基础,采用的是直接…...

异地环控设备如何远程维护?贝锐蒲公英解决远程互联难题

青岛某企业致力于孵化设备、养禽设备和养猪设备的研发、生产和服务&#xff0c;历经三十多年发展&#xff0c;目前已成长为行业主要的养殖装备及工程服务提供商&#xff0c;产品覆盖养殖产业链中绝大多数环节&#xff0c;涉及自动化设备、环控设备、整体解决方案等。 在实际应用…...

flutter 判断是否是web环境

代码如下 import package:flutter/foundation.dart show kIsWeb;void main() {if (kIsWeb) {print(Running on the web!);} else {print(Not running on the web!);} } 如果是使用 Platform.isAndroid 会报错 所以使用上面的方式...

视频智能分析/云存储平台EasyCVR接入海康SDK,通道名称未自动更新该如何解决?

视频监控GB28181平台EasyCVR能在复杂的网络环境中&#xff0c;将分散的各类视频资源进行统一汇聚、整合、集中管理&#xff0c;在视频监控播放上&#xff0c;TSINGSEE青犀视频安防监控汇聚平台可支持1、4、9、16个画面窗口播放&#xff0c;可同时播放多路视频流&#xff0c;也能…...

后端开发——JDBC的学习(三)

本篇继续对JDBC进行总结&#xff1a; ①通过Service层与Dao层实现转账的练习&#xff1b; ②重点&#xff1a;由于每次使用连接就手动创建连接&#xff0c;用完后就销毁&#xff0c;这样会导致资源浪费&#xff0c;因此引入连接池&#xff0c;练习连接池的使用&#xff1b; …...

Redis 生产环境查找无过期时间的 key

在项目中,Redis 不应该被当作传统数据库来使用;储存大量没有过期时间的数据。如果储存大量无过期时间,而且无效的key的话;再加上 Redis 本身的过期策略没有被正确设置,就会大量占用内存。这样就会导致再多的内存资源也不够用。 情况大致是这样,项目中采用 Redis 二级存储…...

Visual Studio 2017编译Python3.8.18源码

一直纠结Python的开发环境没有升级到最新版3.8.18。这是当前的最新版&#xff0c;正在用的版本3.8.10。他是官方制作出安装包的最新版。 1、准备Visual C 2017的开发环境包括但不限于使用C的桌面开发x64 2、在Python官网下载Python3.8.18的源码。 3、解压缩源码 4、进入控制…...

【mujoco】Ubuntu20.04中解决mujoco报错raise error.MujocoDependencyError

【mujoco】Ubuntu20.04中解决mujoco报错raise error.MujocoDependencyError 文章目录 【mujoco】Ubuntu20.04中解决mujoco报错raise error.MujocoDependencyError1. 报错的具体情况2. 解决过程3. 其他问题3.1 ModuleNotFoundError: No module named OpenGL3.2 ModuleNotFoundEr…...

机器学习的三个方面

1 机器学习的三个方面 1.1 数据 包括数据采集、增强和质量管理&#xff0c;相当于给人工智能模型学习什么样的知识 第一、什么专业的知识&#xff1b; 第二、知识是否有体系&#xff0c;也就是说样本之间是否存在某种关联、差异等&#xff0c;这个涉及到样本选择等问题&#x…...

关于一名资深Java程序员在移动端的进阶之路

今天呢&#xff0c;就借此机会&#xff0c;跟大家聊一聊我的个人职业经历吧&#xff01; 那年刚毕业 刚毕业时候&#xff0c;入职的第一家公司&#xff0c;进去后&#xff0c;说实话&#xff0c;没有太大成长吧&#xff01;基本就是让我做一些可有可无的边缘性的工作&#xff…...

clickonce excel 插件发布安装的原理

ClickOnce 是一种由 Microsoft 提供的部署技术&#xff0c;用于简化和加速Windows应用程序的部署。ClickOnce 可以用于部署各种类型的应用程序&#xff0c;包括 Excel 插件。 以下是 ClickOnce Excel 插件发布和安装的一般原理&#xff1a; 1. 发布应用程序&#xff1a; -…...

关于MySQL Cluster

目录 1.MySQL Cluster2.MySQL Cluster架构3.MySQL Cluster 与 MySQL 主从架构有什么区别4.参考 MySQL Cluster是MySQL的一个高可用性&#xff0c;高性能的分布式数据库解决方案。它结合了内存数据库和共享无状态架构的技术&#xff0c;提供了99.999%的可用性&#xff0c;满足严…...

牵绳遛狗你我他文明家园每一天,助力共建文明社区,基于YOLOv7开发构建公共场景下未牵绳遛狗检测识别系统

遛狗是每天要打卡的事情&#xff0c;狗狗生性活泼爱动&#xff0c;一天不遛就浑身难受&#xff0c;遛狗最重要的就是要拴绳了&#xff0c;牵紧文明绳是养犬人的必修课。外出遛狗时&#xff0c;主人手上的牵引绳更多是狗狗生命健康的一道重要屏障。每天的社区生活中&#xff0c;…...

命令行艺术:简洁指南,效率倍增 | 开源日报 No.136

jlevy/the-art-of-command-line Stars: 141.7k License: NOASSERTION 这个项目是关于命令行的艺术&#xff0c;它提供了一系列有用的笔记和技巧&#xff0c;涵盖了基础知识、日常使用、文件和数据处理以及系统调试等方面。该指南旨在帮助初学者和经验丰富的用户掌握 Bash 命令…...

python基础教程五(字典概念和基本操作)

需要将一些列值组合成数据结构并通过编号来访问各个值时&#xff0c;列表很有用。本章介绍一种通过名称来访问各个值的数据结构。这种数据结构称为映射。字典是python中唯一的内置映射类型&#xff0c;其中的值不按顺序排列&#xff0c;而是存储在键下。键可能是数&#xff0c;…...

【Delphi 基础知识 11】重载函数的使用

在Delphi中使用重载函数时&#xff0c;你可以创建多个具有相同名称但参数列表不同的函数。这样&#xff0c;编译器可以根据函数调用时提供的参数类型或数量来确定要调用的具体函数。以下是一个简单的重载函数的例子&#xff1a; unit OverloadExample;interfaceusesSysUtils;t…...

经典目标检测YOLO系列(一)YOLOV1的复现(1)总体架构

经典目标检测YOLO系列(一)实现YOLOV1网络(1)总体架构 实现原版的YOLOv1并没有多大的意义&#xff0c;因此&#xff0c;根据《YOLO目标检测》(ISBN:9787115627094)一书&#xff0c;在不脱离YOLOv1的大部分核心理念的前提下&#xff0c;重构一款较新的YOLOv1检测器&#xff0c;来…...

网站管理制度建设/北京专业seo公司

如何快速响应市场的变化&#xff0c;如何推出更有竞争力的产品&#xff0c;如何在竞争中脱颖而出&#xff0c;是国内研发企业普遍面临的核心问题&#xff0c;为了解决这些问题&#xff0c;越来越多的企业开始重视创新与研发管理&#xff0c;加强研发过程的规范化&#xff0c;集…...

厦门网站开发培训/宁波品牌网站推广优化

ok 现在遇到一个问题&#xff0c;client new DatagramSocket(LocalPort) 是说端口已经被占用的意思 ref&#xff1a;&#xff01;&#xff01;https://community.oracle.com/thread/1149986 方法一&#xff1a; http://www.eoeandroid.com/forum.php?modviewthread&tid19…...

大兴网站制作/西安专业做网站公司

下面是主要的验证注解及说明&#xff1a; 注解 适用的数据类型 说明 AssertFalse Boolean, boolean 验证注解的元素值是false AssertTrue Boolean, boolean 验证注解的元素值是true DecimalMax&#xff08;valuex&#xff09; BigDecimal, BigInteger, String, byte,…...

网站不能访问的原因/seo专业培训课程

if(file_exists($log)){//判断$log是否存在&#xff0c;如果不存在则创建$logtouch($log);//touch是快速创建一个文件return $log; } 转载于:https://www.cnblogs.com/forphp/p/3504438.html...

做个视频网站/推广链接点击器网页

Description 物流公司要把一批货物从码头A运到码头B。由于货物量比较大&#xff0c;需要n天才能运完。货物运输过程中一般要转停好几个码头。物流公司通常会设计一条固定的运输路线&#xff0c;以便对整个运输过程实施严格的管理和跟踪。由于各种因素的存在&#xff0c;有的时候…...

做群头像的网站在线制作/2023新闻摘抄大全

让职业生涯中的沉闷与瓶颈彻底消失。下面十一项极具可操作性的措施足以帮助各位技术从业人士在IT海洋中开辟出新的航线&#xff0c;重新奔向充满生机的彼岸。卡在中间不上不下——心情也因此而低落&#xff1f;Eric Reed对于职业生涯中期的各种陷阱可谓甚为熟稔。他发现很多IT企…...