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

把代码保存为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>

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

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

相关文章

Vercel.json配置路由重定向(重写)【vue项目】

在项目根目录创建vercel.json {"rewrites": [{"source": "/(.*)","destination": "/"}] } vue-router 路由模式改为 history&#xff08;vue2版本&#xff09; createWebHistory&#xff08;vue3版本&#xff09;

7、DVWA——SQL盲注

文章目录 一、概述二、low2.1 通关思路&#xff08;布尔盲注&#xff09;&#xff08;1&#xff09;判断是否存在SQL注入漏洞&#xff08;2&#xff09;判断属于数字型注入还是字符型注入&#xff08;3&#xff09;判断结果集中的字段数&#xff08;4&#xff09;猜数据库名长度…

ArcGIS Pro将SHP文件转CAD并保留图层名称

相信大家应该都使用过ArcGIS将SHP文件转CAD格式&#xff0c;转换过后所有的要素都在一个图层内&#xff0c;那么有没有办法将SHP文件某个字段的值作为CAD的图层名字呢&#xff0c;答案是肯定的&#xff0c;这里就为大家介绍一下ArcGIS Pro转CAD文件并且保留图层名称的方法&…

Windows编程dll基本知识点

前言 本篇博客主要是记录windows系统下dll开发的相关基本知识点&#xff0c;并使用相关分析工具分析&#xff0c;有利于初学者学习&#xff0c;更是为开发者查缺补漏&#xff1b; 使用dumpbin查看dll,lib,exe相关信息 VS编译器提供了查看链接库相关的工具&#xff0c;安装后…

【c++GDAL】IHS融合

【c&GDAL】IHS融合 基于IHS变换融合&#xff0c;实现多光谱和全色影像之间的融合。IHS分别指亮度(I)、色度(H)、饱和度(S)。IHS变换融合基于亮度I进行变换&#xff0c;色度和饱和度空间保持不变。 IHS融合步骤&#xff1a; &#xff08;1&#xff09;将多光谱RGB影像变换到…

网络安全:保护你的系统

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

FLASK中的鉴权的插件Flask-HTTPAuth

在 Web 应用中&#xff0c;我们经常需要保护我们的 api&#xff0c;以避免非法访问。比如&#xff0c;只允许登录成功的用户发表评论等。Flask-HTTPAuth 扩展可以很好地对 HTTP 的请求进行认证&#xff0c;不依赖于 Cookie 和 Session。本文主要介绍两种认证的方式&#xff1a;…

地牢大师问题(bfs提高训练 + 免去边界处理的特殊方法)

地牢大师问题 文章目录 地牢大师问题前言题目描述题目分析输入处理移动方式【和二维的对比】边界判断问题的解决 代码总结 前言 在之前的博客里面&#xff0c;我们介绍了bfs 基础算法的模版和应用,这里我们再挑战一下自己&#xff0c;尝试一个更高水平的题目&#xff0c;加深一…

点云从入门到精通技术详解100篇-基于点云语义分割的电力线提取及聚类研究(下)

目录 3.4.3 MSIDA-Net 与主成分分析法对比 基于簇最低点聚类算法的电力线聚类及重建

Docker部署单点Elasticsearch与Kibana

一 、 创建网络 因为需要部署kibana容器&#xff0c;因此需要让es和kibana容器互联。这里创建一个网络&#xff1a; docker network create es-net # 创建一个网络名称为:es-net 二 、拉取并加载镜像 方式一 docker pull elasticsearch:7.12.1 版本为elasticsearch的7…

列属性与数据完整性

1.2 数据类型——值类型 1.2.1 整型 类型字节范围tinyint1-128~127smallint2-32768~32767mediumint3-8388608~8388607int4-231~231-1bigint8-263~263-1 1、无符号整数&#xff08;unsigned&#xff09;&#xff1a;无符号数没有负数&#xff0c;正数部分是有符号的两倍。 例…

Linux驱动之INPUT子系统框架

目录 一、input 子系统简介 二、input 驱动编写流程 1、注册 input_dev 2、上报输入事件 三、input_event 结构体 按键、鼠标、键盘、触摸屏等都属于输入(input)设备&#xff0c; Linux 内核为此专门做了一个叫做 input子系统的框架来处理输入事件。输入设备本质上还是字符设…

Go语言开发环境搭建指南:快速上手构建高效的Go开发环境

Go 官网&#xff1a;https://go.dev/dl/ Go 语言中文网&#xff1a;https://studygolang.com/dl 下载 Go 的语言包 进入官方网站 Go 官网 或 Go 语言中文网&#xff1a; 选择下载对应操作系统的安装包&#xff1a; 等待下载完成&#xff1a; 安装 Go 的语言包 双击运行上…

udp的简单整理

最近思考udp处理的一些细节&#xff0c;根据公开课&#xff0c;反复思考&#xff0c;终于有所理解&#xff0c;做整理备用。 0&#xff1a;简单汇总 1&#xff1a;udp是基于报文传输的&#xff0c;接收方收取数据时要一次性读完。 2&#xff1a;借助udp进行发包&#xff0c;…

51单片机 串口通信

UART.h #ifndef __UART_H__ #define __UART_H__void UART_Init(); void UART_SendByte(unsigned char Byte);#endifUART.H #include <REGX52.H>/*** brief 串口初始化&#xff0c;4800bps12.000MHz* param 无* retval 无*/ void UART_Init() {SCON0x40;PCON | 0x80;T…

C++数据结构 -- 哈希表

目录 一、哈希概念二、 哈希冲突三、 哈希函数四、 减少哈希冲突常用的方法4.1 闭散列4.1.1 闭散列的开放定址法的增容4.1.2 闭散列的开放定址法的哈希结构的实现 4.3 开散列4.3.1 开散列概念4.3.2 插入元素4.3.2 删除元素4.3.3 开散列的哈希桶的增容4.3.4 开散列的哈希桶(拉链…

CentOS7下yum安装php7

1.安装epel-release EPEL&#xff08;Extra Packages for Enterprise Linux&#xff09;存储库提供了标准 Red Hat 和 CentOS 存储库中未包含的其他软件包。EPEL 存储库的创建是因为 Fedora 贡献者希望使用他们在 Red Hat Enterprise Linux&#xff08;RHEL&#xff09;及其衍…

快速搭建SpringBoot3.x项目

快速搭建SpringBoot3.x项目 写在前面一、创建项目二、配置多环境三、连接数据库查询数据3.1 新建数据库mybatisdemo并且创建sys_user表3.2 创建实体类3.2 创建Mapper接口3.3 添加mybatis.xml文件3.4 新建service 接口及实现类3.5 创建Controller 四、封装统一结果返回4.1 定义 …

Attention is all you need 论文笔记

该论文引入Transformer&#xff0c;主要核心是自注意力机制&#xff0c;自注意力&#xff08;Self-Attention&#xff09;机制是一种可以考虑输入序列中所有位置信息的机制。 RNN介绍 引入RNN为了更好的处理序列信息&#xff0c;比如我 吃 苹果&#xff0c;前后的输入之间是有…

【PowerQuery】PowerBI的增量刷新设置

在进行数据库查询的过程中,如果查询的数据量非常大就会存在查询效率问题。在PowerBI中在进行SQL Server数据库查询的过程中,支持两种不同的方式:数据导入方式和DirectQuery方式。Direct Query 是实现即时数据查询,数据将不会保存在PowerBI的数据缓存中。但是如果我们采用的…