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

svg图片代码data:image/svg+xml转png图片方法

news 文章来源：https://blog.csdn.net/viqecel/article/details/132871836 2024/11/17 3:31:59

把代码保存为html格式的文件中,用浏览器访问,即可右键保存
从AI软件或其它网站得到svg图片代码后,把他复制到下面源码上
注意:src=""图片地址中,一些参数的含义
d=‘这里是图片代码数据’
viewBox是图片显示区域,宽,高等
fill='%23000000’这里表示颜色 ,后面6位0表示黑色,只修改后6位即可
fill-opacity为1表示图片不透明.小数为透明.其它参数 不用修改

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>svg转png</title>
</head>
<body>
<img id="test" src="data:image/svg+xml;
utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' 
viewBox='0 0 555 344' width='555' 
height='344'%3E%3Cpath 
fill='%23000000' 
fill-opacity='1' 
d='M33.7 33.8v-7.5c0-8.2-3.8-11.7-8.1-11.7-6.7 0-8.9 3.5-8.9'
%3E%3C/path%3E%3C/svg%3E"><p style="border:1px solid #ccc;color:red">
右键点击,图片另存为,png格式的
<img id="png"src=""href="" />
</p><script type="text/javascript">var test = document.getElementById('test');var svghtml = test.getAttribute('src');
var png = document.getElementById('png');var img = new Image();img.setAttribute('src', svghtml);img.onload = function () {var canvas = document.createElement('canvas');canvas.width = test.offsetWidth;canvas.height = test.offsetHeight;var context = canvas.getContext('2d');context.drawImage(img, 0, 0);var canvasData = canvas.toDataURL('image/png');var a = document.createElement('img');var img2 = document.createElement('img');img2.setAttribute('src', canvasData);
png.setAttribute('src', canvasData);//  img2.onload = function() {//  var a = document.createElement('a');// a.href = url;//   a.download = 'svg.png';//  a.href = img2.getAttribute('src');// a.click();//  }}
</script>
</body>
</html>

相关文章：

svg图片代码data:image/svg+xml转png图片方法

把代码保存为html格式的文件中,用浏览器访问,即可右键保存 从AI软件或其它网站得到svg图片代码后,把他复制到下面源码上 注意:src""图片地址中,一些参数的含义 d‘这里是图片代码数据’ viewBox是图片显示区域,宽,高等 fill%23000000’这里表示颜色 ,后面6位0表示黑色…...

编程日记 2023/9/17 18:12:34

解决问题：Replace `‘vue‘；⏎` with `“vue“；`

使用vscode写vue文件的问题&#xff1a; Replace vue;⏎ with "vue"; error Replace v-model:value"xxx"placeholder"inputsearch prettier/prettier 7:38 error Insert ⏎ potentially fixable with the --fix option 原因&#xff1a;格式问题&a…...

编程日记 2023/9/17 18:11:33

ThinkPHP 5.0通过composer升级到5.1，超级简单

事情是这样的&#xff0c;我实现一个验证码登录的功能&#xff0c;但是这个验证码的包提示tp5的版本可以是5.1.1、5.1.2、5.1.3。但我使用的是5.0&#xff0c;既然这样&#xff0c;那就升个级呗&#xff0c;百度了一下&#xff0c;结果发现大部分都是讲先备份application和修改…...

编程日记 2023/9/17 18:09:31

计算机竞赛 多目标跟踪算法 实时检测 - opencv 深度学习 机器视觉

文章目录 0 前言2 先上成果3 多目标跟踪的两种方法3.1 方法13.2 方法2 4 Tracking By Detecting的跟踪过程4.1 存在的问题4.2 基于轨迹预测的跟踪方式 5 训练代码6 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 深度学习多目标跟踪 …...

编程日记 2023/9/17 18:05:26

一文了解大模型工作原理——以ChatGPT为例

文章目录 写在前面1.Tansformer架构模型2.ChatGPT原理3.提示学习与大模型能力的涌现3.1 提示学习3.2 上下文学习3.3 思维链 4.行业参考建议4.1 拥抱变化4.2 定位清晰4.3 合规可控4.4 经验沉淀 写在前面 2022年11月30日&#xff0c;ChatGPT模型问世后&#xff0c;立刻在全球范围…...

编程日记 2023/9/17 18:04:26

CPP-Templates-2nd--第十九章 萃取的实现 19.7---

目录 19.7 其它的萃取技术 19.7.1 If-Then-Else 19.7.2 探测不抛出异常的操作 19.7.3 萃取的便捷性&#xff08;Traits Convenience&#xff09; 别名模板和萃取&#xff08;Alias Templates And Traits) 变量模板和萃取&#xff08;Variable Templates and Traits&…...

编程日记 2023/9/17 18:03:25

python 采用selenium+cookies 获取登录后的网页

百度网页由于需要登陆手机短信验证。比较麻烦 这里我采用先人工登录百度账号&#xff0c;然后将百度账号的相关cookies保存下来 然后采用selenium动态登录网页 整体代码如下 from selenium import webdriverimport timeoptions webdriver.ChromeOptions()options.add_argu…...

编程日记 2023/9/17 18:02:24

【测试开发】答疑篇 · 什么是软件测试

【测试开发】答疑篇 文章目录 【测试开发】答疑篇1. 生活中的测试2. 什么是软件测试3. 为什么要有测试/没有测试行不行4. 软件测试和软件开发的区别5. 软件测试和软件调试之间的区别6. 软件测试的岗位7. 优秀测试人员具备的素质 【测试开发】答疑篇 软件不一定是桌面应用&#…...

编程日记 2023/9/17 18:01:23

深入解析顺序表：揭开数据结构的奥秘，掌握顺序表的精髓

&#x1f493; 博客主页&#xff1a;江池俊的博客⏩ 收录专栏&#xff1a;数据结构探索&#x1f449;专栏推荐&#xff1a;✅C语言初阶之路 ✅C语言进阶之路&#x1f4bb;代码仓库&#xff1a;江池俊的代码仓库&#x1f525;编译环境&#xff1a;Visual Studio 2022&#x1f38…...

编程日记 2023/9/17 17:59:21

数据风险量化评估方案

一、企业面临数据安全的痛点 1、企业缺少清晰的数据安全意识 各部门重视度不够&#xff0c;缺少主动数据安全管控意识。数据安全管控架构不清晰&#xff0c;职责划分不明确。对数据安全管控认识不全面、不深刻。工作人员对于所持有的数据缺乏概念&#xff0c;导致数据的价值无…...

编程日记 2023/9/17 17:57:20

EasyAVFilter代码示例之将视频点播文件转码成HLS（m3u8+ts）视频点播格式

以下是一套完整的视频点播功能开发源码&#xff0c;就简简单单几行代码&#xff0c;就可以完成原来ffmpeg很复杂的视频点播转码调用流程&#xff0c;而且还可以集成在自己的应用程序中调用&#xff0c;例如java、php、cgo、c、nodejs&#xff0c;不需要再单独一个ffmpeg的进程来…...

编程日记 2023/9/17 17:56:19

day-50 代码随想录算法训练营（19）动态规划 part 11

123.买卖股票的最佳时机||| 分析&#xff1a;只能买卖两次&#xff0c;就是说有五个状态&#xff1a; 没有买过第一次买入第一次卖出第二次买入第二次卖出 思路&#xff1a;二维数组&#xff0c;记录五个状态 1.dp存储&#xff1a;dp[i][1] 第一次买入 dp[i][2] 第一次卖…...

编程日记 2023/9/17 17:55:18

自定义权限指令与防止连点指令

1.权限指令 // 注册一个全局自定义权限指令 v-permission Vue.directive(permission, {inserted: function(el, binding, vnode) {const {value} binding; // 指令传的值// user:edit:phone,sysData:sampleconst permissions [user:edit:address, sysData:entrust, sysData:…...

编程日记 2023/9/17 17:54:16

UE5、CesiumForUnreal实现瓦片坐标信息图层效果

文章目录 1.实现目标2.实现过程2.1 原理简介2.2 cesium-native改造2.3 CesiumForUnreal改造2.4 运行测试3.参考资料1.实现目标 参考CesiumJs的TileCoordinatesImageryProvider，在CesiumForUnreal中也实现瓦片坐标信息图层的效果，便于后面在调试地形和影像瓦片的加载调度等过…...

编程日记 2023/9/17 17:50:11

PostgreSQL执行计划

1. EXPLAIN命令 1)PostgreSQL中EXPLAIN命令的语法格式: postgres# \h explain Command: EXPLAIN Description: show the execution plan of a statement Syntax: EXPLAIN [ ( option [, ...] ) ] statement EXPLAIN [ ANALYZE ] [ VERBOSE ] statementwhere option can be…...

编程日记 2023/9/17 17:48:10

【2023 睿思芯科 笔试题】~ 题目及参考答案

文章目录 1. 题目 & 答案单选题编程题问题1&#xff1a;解析1&#xff1a;问题2&#xff1a;解析2&#xff1a; 声明 名称如标题所示&#xff0c;希望大家正确食用&#xff08;点赞转发评论&#xff09; 本次笔试题以两种形式考察的&#xff0c;分别是&#xff1a;选择题&a…...

编程日记 2023/9/17 17:46:08

Java手写AVL树

Java手写AVL树 1. AVL树实现思路原理 为了解释AVL树的实现思路原理&#xff0c;下面使用Mermanid代码表示该算法的思维导图&#xff1a; #mermaid-svg-ycH8kKpzVk2HWEby {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid…...

编程日记 2023/9/17 17:45:07

运维自动化：提高效率的秘诀

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…...

编程日记 2023/9/17 17:43:05

C++设计模式_05_Observer 观察者模式

接上篇&#xff0c;本篇将会介绍C设计模式中的Observer 观察者模式&#xff0c;和前2篇模板方法Template Method及Strategy 策略模式一样&#xff0c;仍属于“组件协作”模式。Observer 在某些领域也叫做 Event 。 文章目录 1. 动机&#xff08; Motivation&#xff09;2. 代码…...

编程日记 2023/9/17 17:41:03

github网站打不开，hosts文件配置

首先获取github官网的ip地址&#xff0c; 打开cmd&#xff0c;输入ping github.com 配置&#xff1a; #github 140.82.114.4 github.com 199.232.69.194 github.global.ssl.fastly.net 185.199.108.153 assets-cdn.github.com 185.199.110.153 assets-cdn.github.com 185.199…...

编程日记 2023/9/17 17:40:03

总结PCB设计的经验

一般PCB基本设计流程如下&#xff1a;前期准备->PCB结构设计->PCB布局->布线->布线优化和丝印->网络和DRC检查和结构检查->制版。: : 　　第一&#xff1a;前期准备。这包括准备元件库和原理图。“工欲善其事&#xff0c;必先利其器”&#xff0c;要做出一…...

编程日记 2023/9/17 17:39:02

HCIE-HCS规划设计搭建

1、相关术语 1、等价路由 等价路由&#xff08;Equal-cost routing&#xff09;是一种网络路由策略&#xff0c;用于在网络中选择多个具有相同路由度量&#xff08;路由距离或成本&#xff09;的最佳路径之一来转发数据流量。 当存在多个路径具有相同的路由度量时&#xff0c;…...

编程日记 2023/9/17 17:38:01

c语言输出杨辉三角

#include<stdio.h> int main() {int x 0; //表示杨辉三角的的大小int y 1;printf("请输入x的值: ");scanf("%d", &x);for (int i 0; i < x; i) {for (int j 0; j < i; j) {if (j 0 || i 0) {y 1;}else {y y * (i - j 1) / j;}pri…...

编程日记 2023/9/17 17:37:00

性能测试-持续测试及性能测试建设（22）

什么是持续测试？ 持续测试定义为：在软件交付流水线中执行自动化测试的过程，目的是获得关于预发布软件业务风险的即时反馈。 完成持续测试，我们还是需要回到定义中，它有3个关键词：软件交付流水线、自动化测试、即时反馈。 首先，持续测试需要具备一条完整的流水线，其代表…...

编程日记 2023/9/17 17:31:55

嵌入式C 语言中的三块技术难点

​ C 语言在嵌入式学习中是必备的知识&#xff0c;甚至大部分操作系统都要围绕 C 语言进行&#xff0c;而其中有三块技术难点&#xff0c;几乎是公认级别的“难啃的硬骨头”。 今天就来带你将这三块硬骨头细细拆解开来&#xff0c;一定让你看明白了。 0x01 指针 指针是公认…...

编程日记 2023/9/17 17:27:52

【斗破年番】紫研新形象，萧炎终成翻海印，救援月媚，三宗决战

Hello,小伙伴们&#xff0c;我是小郑继续为大家深度解析斗破年番。 斗破苍穹年番动画更新了&#xff0c;小医仙帅气回归&#xff0c;萧炎紫妍成功进入山谷闭关苦修&#xff0c;美杜莎女王守护没多久&#xff0c;就因蛇人族求救离开。从官方公布的最新预告来看&#xff0c;萧炎紫…...

编程日记 2023/9/17 17:26:51

差分方程模型：国民总收入(GDP)的乘数-加速数模型

【背景知识-凯恩斯经济增长模型】 凯恩斯(John M.Keynes)建立了著名的国民经济增长模型。令Y表示国民总收入&#xff0c;C表示总消费&#xff0c;E为总支出&#xff0c;I表示投资&#xff0c;G为政府的投入&#xff08;如基建等&#xff09;。那么有 【6.1】 其中&#xff0…...

编程日记 2023/9/17 17:25:50

【C语言】指针和数组笔试题解析（1）

指针是C语言的灵魂&#xff0c;他的玩法多种多样&#xff0c;这篇文章带来指针的笔试题详解&#xff0c;可以帮助我们更好的理解与巩固指针的知识 目录 预备知识&#xff1a;题目&#xff1a;一维数组&#xff1a;二维数组&#xff1a; 题目比较多&#xff0c;但切记戒骄戒躁&a…...

编程日记 2023/9/17 17:24:49

Vue中组件的三种注册方式

组件的注册 1.全局注册&#xff1a; 在全局注册中&#xff0c;你需要确保在 Vue 根实例之前导入并注册组件。通常&#xff0c;你会在入口文件&#xff08;例如 main.js&#xff09;中执行这些操作。 // main.jsimport Vue from vue; import App from ./App.vue;// 导入全局组…...

编程日记 2023/9/17 17:23:48

docker 和k8s 入门

docker 和k8s 入门 本文是云原生的学习记录&#xff0c;可以参考以下文档 k8s https://www.yuque.com/leifengyang/oncloud 相关视频教程可参考如下 https://www.bilibili.com/video/BV13Q4y1C7hS?p2&vd_source0882f549dac54045384d4a921596e234 相对于公有云&#x…...

编程日记 2023/9/17 17:22:47

图片二维码生成器在线制作/上海快速排名优化

原文在此https://docs.chef.io/nodes.html节点分好几种又加了一台机器[rootchefnode ~]# cat /etc/hosts先确保hosts里面都有解析[rootchefserver chef]# scp chefdk-2.4.17-1.el7.x86_64.rpm rootchefnode:/root/chef先安装DKrpm –ivh chefdk-2.4.17-1.el7.x86_64.rpm 安装之…...

编程日记 2024/11/17 0:17:57

营销型网站建设软件/免费网站推广群发软件

工作回顾前几天&#xff0c;我在公园里进行了一次冲刺回顾。 阳光普照&#xff0c;我们所有人都在努力完成积压工作&#xff0c;因此&#xff0c;这对每个人的努力都是一种不错的回报。 在户外举行回顾展也可以使它充满活力和热情&#xff0c;而这在小房间里很难找到。 我以前…...

编程日记 2024/11/16 19:52:56

适合中考做的微机题网站/福州网站开发公司

Memcached Memcached 是一个高性能的分布式内存对象缓存系统&#xff0c;用于动态Web应用以减轻数据库负载。它通过在内存中缓存数据和对象来减少读取数据库的次数&#xff0c;从而提高动态、数据库驱动网站的速度。Memcached基于一个存储键/值对的hashmap。其守护进程&#xf…...

编程日记 2024/11/16 15:03:29

京东商城网站建设策划书/网络推广教程

2.3 不合法的常量有&#xff1a;0892&#xff1b;3.8E-3.14 2.4 "Hello!" 长度&#xff1a;6字节 占内存 7字节 &#xff1b;“ABC\n\\TH\064\?” 长度&#xff1a;9字节 占内存 10字节 注&#xff1a;\n换行符 不占长度 、\\ 转义字符 只取 \、\064 表示64位 取ASC…...

编程日记 2024/11/16 13:32:59

豫icp郑州网站建设/百度地图关键词排名优化

网络的核心设备并不在应用层上起作用&#xff0c;而仅在较底层起作用&#xff0c;特别是在网络层及下面的层次起作用&#xff1b;特别是在网络层及下面层次起作用。这种基本设计&#xff0c;即将应用层软件限制在端系统的方法&#xff0c;促进了大量的网络应用程序的迅速研发和…...

编程日记 2024/11/16 12:33:14

机关单位特色的网站建设/月嫂免费政府培训中心

Visual Studio 2010其他版本此主题尚未评级 评价此主题静态构造函数用于初始化任何 静态 数据&#xff0c;或用于执行仅需执行一次的特定操作。 在创建第一个实例或引用任何静态成员之前&#xff0c;将自动调用静态构造函数。 C#class SimpleClass {// Static variable that mu…...

编程日记 2024/11/16 12:01:26