转为png保存效果

在svg中引入图标是使用Image标签，根据xlink:href引入，而将svg转换为png/jpg等格式图片，实际过程是：首先将svg转换为canvas；然后将canvas保存为图片。在这个过程中xlink:href出现了问题，因为xlink:href是图片路径。

解决方法1：

绘制Image标签时， xlink:href使用base64编码

将图片转为base64编码的 在线网站 ，网上有很多，可以自行搜索。

转换后将base编码放在Image标签的xlink_href上引用，之后下载的效果如下：

解决方法2：

将svg转换为canvas之后，再读取Image标签里引入图片的路径(xlink:href)，然后将图片画在canvas上。

需要重新定位Image标签图片的位置，然后画上去。

代码如下：

	// svg转图像
    svg2png = () => {
        let serializer = new XMLSerializer();  
        let source = serializer.serializeToString(this.svg.node());
        source = '<?xml version="1.0" standalone="no"?>\r\n' + source;  
        let url = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source);
        document.write('<img src="' + url + '"/>');
        let canvas = document.createElement("canvas");  
        canvas.width = this.width;
        canvas.height = this.height;
        let context = canvas.getContext("2d");  
        let image = new Image();  
        image.src = document.getElementsByTagName('img')[0].src;
        let image2 = new Image(this.width, this.height);
        image2.src = "tree1.png"
        let saveLink = document.createElement("a");  
        saveLink.download = this.name+"横断面图.png";
        saveLink.target = "_blank";
        saveLink.style.display = "none";
        document.body.appendChild(saveLink);
        image.onload = function() {  
            image2.onload = function() {
                // 画入canvas
                context.drawImage(image, 0, 0);
                context.drawImage(image2, 0, 0);
                // 创建链接
                saveLink.href = canvas.toDataURL("image/png");
                saveLink.click();
                document.body.removeChild(saveLink);
如果位置正确，那么效果也是一样，这里只给出个效果，具体自己去修改context.drawImage(image2, 0, 0)里的坐标，如果图片有很多，可以写个Promise进行图片加载。
 
                    问题介绍：SVG显示效果转为png保存效果在svg中引入图标是使用Image标签，根据xlink:href引入，而将svg转换为png/jpg等格式图片，实际过程是：首先将svg转换为canvas；然后将canvas保存为图片。在这个过程中xlink:href出现了问题，因为xlink:href是图片路径。解决方法1：绘制Image标签时，xlink:href使用bas...
				
浏览并下载网页上的图片。
Image Downloader不出售，并且将始终是免费，开源的，并且没有广告或任何形式的跟踪算法！
您可以在此处找到源代码：https://github.com/vdsabev/image-downloader Image Downloader =================如果您需要从网页批量下载图像，使用此扩展程序，您可以：-查看页面包含的图像以及链接到的图像-按宽度，高度和URL进行过滤；
支持通配符和正则表达式-（可选）仅显示链接中的图像-通过单击图像选择要下载的图像-使用专用按钮下载或在新标签页中打开单个图像-自定义图像的显示宽度，列，边框大小和颜色-隐藏过滤器，不需要的按钮和通知按下“下载”按钮时，所有选定的图像都将保存到Chrome的默认下载目录，或者如果指定子文件夹名称，则保存到其中的目录。
警告：如果尚未设置默认的下载目录，则必须手动选择每个图像的保存位置，这可能会打开许多​​弹出窗口。
不建议您尝试一次在没有默认下载目录的情况下一次下载太多图像。
已知问题===============此扩展程序无法始终提取单击照片时打开的全分辨率图像（例如，在Facebook相册中）。
那是因为页面没有直接链接到图像，而是使用了脚本。
如果您需要那种功能，那么即使您无法大量下载图像，也可以使用诸如Hover Zoom的其他扩展。
更改日志=============== 2.4.2：-Chrome不允许访问跨域CSS规则的解决方法2.4.1：-修复了无效URL会破坏扩展名的问题- https://github.com/vdsabev/image-downloader/issues/23-将Zepto.js更新为1.2.0 2.4：-添加了在下载2.3前重命名文件的选项：-添加了对BMP，SVG和WebP图像的支持-增加了对相对URL的支持-通过搜索更少的元素提高了弹出窗口的加载速度-用chrome.runtime 2.2代替了不推荐使用的chrome.extension调用：-删除了访问标签的不必要权限-删除了由于提示而导致的捐赠提示一些用户认为它在第一次出现后并没有消失；
现在，将在首次安装时打开选项页-保存URL过滤器的值-修复某些尺寸调整问题的另一种尝试2.1：-添加了图像宽度/高度过滤器-由于某些原因，一次性重置了所有设置遇到尺寸问题的人-删除了按URL排序选项2.0：-添加了将文件保存到子文件夹的功能-利用Google Chrome下载API-实施了基于网格的更简洁设计-单击图像URL文本框现在将自动选择文本以便用户可以复制文本-修复了一些小的显示问题-添加了列数设置，删除了边框样式设置-选项页1.3中添加了捐赠按钮：-现在，样式标签中使用的图像也将包含在列表的末尾。
仅包含来自元素的内联样式属性的图像。
-新增了对数据URI的支持-若干错误修复和优化1.2：-更改了要显示在只读文本框中的图像上方的URL-将图像复选框移至顶部，并在每个图像复选框下方添加了打开和下载按钮-最初禁用了“下载”按钮和“所有”复选框-引入了一些新选项来隐藏过滤器，按钮和通知-删除了正文宽度选项；
弹出窗口的宽度现在相对于最大图像宽度选项重新调整大小-简化了设计1.1：-修复了最小和最大图像宽度的保存-在图像本身上方添加了URL以及用于切换的选项-添加了通配符过滤器模式（沿正常和正则表达式）-现在将保存所选过滤器的状态-将“按URL排序”选项移回过滤器-在选项页面中添加了“清除数据”按钮。
尽管该扩展程序尚未使用大量本地存储，但有人可能会喜欢此选项。
-重构了大量代码，尤其是本地存储1.0.13的使用：-添加了一条通知，使用户知道下载已开始-添加了一些动画并进一步完善了选项通知-修复了一些正在处理的事件处理程序多次附加1.0.12：-迁移到jQuery-为“所有”复选框实现了不确定的状态-如果未选中任何图像，则将禁用“下载”按钮-修复了带有重置选项的错误-现在用户可以选择保存重置值或只是通过重新加载页面来取消重置-就像通知1.0.11中所述：-更改了下载机制以支持Chrome v21 +-添加了“仅显示链接的图像”过滤器选项，当您只想下载页面上URL中的图像。
1.0.10：-添加了下载确认1.0.9：-图片数量现在将显示在“所有”复选框1.0.8旁：-添加了对锚定标记中的图片URL的检测；
请注意，此功能将不会检测不具有.jpg，.jpeg，.gif或.png文件扩展名的URL-它依赖于正则表达式，以避免可能向外部服务器发送1.0.7的数百个请求：-已删除当您按下“下载”时弹出的桌面通知系统，显示的文字描述应该易于控制（通过“选项”）并且不易受到干扰；
这也需要较少的扩展权限-添加了隐藏下载通知的选项；
				
【H5】   svg内text、image、path标签的使用：
text标签：
<div id='wrap' style="width: 500px;height: 500px;border: 2px solid pink;margin: 50px auto 0;">
        <svg xmlns="http://www.w3.org/2000/svg" width='...
				
其实如果是真的svg图片是可以显示的，当我把svg放在vscode里出现的是这样的
可以看到，其实是用的image这个标签引入的png的base64，所以本质上还是png图片，当然也可以引入其他格式的图片，所以此时的svg并不是矢量图，在html里直接写上上面的svg代码，就可以显示。但是因为不是矢量图，所以放大依然会失真，svg的意义就没有了。
				
CopyQ 是具有编辑和脚本功能的高级剪贴板管理器。CopyQ 监视系统剪贴板并将其内容保存在自定义选项卡中。保存的剪贴板可以在以后复制并直接粘贴到任何应用程序中。本站也有其它剪贴板管理工具，功能上也是大同小异，部分也有商业收费的。如果你想使用免费的，不妨来试试 CopyQ。
剪贴板管理工具 CopyQ 中文版
剪贴板管理工具 CopyQ 中文版
CopyQ 特色
支持 Linux，Windows 和 OS X 10.9+
存储文本，HTML，图像或任何其他自定义格式
 快速浏览和过滤剪贴板历史记录中的项目
 排序，创建，编辑，删除，复制/粘贴，拖放选项卡中的项目
 为项目添加注释或标签
 具有可自定义命令的系统范围快捷方式
 使用快捷方式或从托盘或主窗口粘贴项目
 完全可定制的外观
 高级命令行界面和脚本
 忽略从某些窗口复制或包含一些文本的剪贴板
 支持简单的类似 Vim 的编辑器和快捷方式
 更多功能等等
如何使用 CopyQ
要启动应用程序，请双击程序图标或运行 CopyQ。通过单击系统托盘图标或运行 CopyQ 切换，可以访问包含剪贴板历史记录的列表。将文本或图像复制到剪贴板将在列表中创建新项目。
选定的项目可以是：
 编辑（F2），
 删除（Delete），
 排序（Ctrl + Shift + S，Ctrl + Shift + R），
 四处移动（使用鼠标或 Ctrl + UP/Down），
 复制回剪贴板（Ctrl + C）或
 粘贴到先前活动的窗口（Enter）。
 下次启动应用程序时，将恢复所有项目。
要退出应用程序，请从托盘菜单中选择退出或在应用程序窗口中按 Ctrl-Q 键。
 要创建可以从菜单，快捷方式或剪贴板更改时执行的自定义操作：
转到命令对话框（F6快捷方式），
 单击“添加”按钮并选择预定义命令或创建新命令，
 可选择更改命令详细信息（快捷方式，名称），
 单击“确定”以保存命令。
 一个非常有用的预定义命令是“显示/隐藏主窗口”。
CopyQ 命令行
CopyQ 具有强大的命令行和脚本界面。注意：必须运行主应用程序才能使用命令行发出命令。
打印一些有用的命令行参数的帮助：
copyq –help
 copyq –help add
在历史记录中插入一些文字：
copyq add “first item” “second item” “third item”
打印前三项的内容：
copyq read 0 1 2
 copyq separator “,” read 0 1 2
显示当前剪贴板内容：
copyq clipboard
 copyq clipboard text/html
 copyq clipboard \? # 列出剪贴板中的格式
Copy text to the clipboard:
将文本复制到剪贴板：
copyq copy “Some Text”
将文件内容加载到剪贴板：
copyq copy – < file.txt
 copyq copy text/html < index.html
 copyq copy image/jpeg – < image.jpg
创建图片项：
copyq write image/gif – < image.gif
 copyq write image/svg – < image.
				
一般我们会在webpack里配置
但是我遇到配置完也不能在线上正常显示，这里已经找不出其他原因，但是png能够显示，所以我考虑到换成png，但是放大会模糊，这也是这个的缺点，于是我只好转成base64去显示
可以在线上手动转换后引入
https://base64.guru/converter/encode/image/svg
<img  src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4K
				
在小程序中使用 image 标签显示 SVG 图片可以使用下面的方式：
1. 将 SVG 图片转换为 base64 编码的字符串，并将其作为 image 标签的 src 属性的值。
2. 在 image 标签的样式中添加 "mode" 属性，并将其值设置为 "widthFix"，这样图片就可以根据容器的宽度进行等比缩放。
3. 在 image 标签的样式中添加 "lazy-load" 属性，并将其值设置为 "true"，这样图片就可以延迟加载，提高页面性能。
<image src="{{svgBase64}}" mode="widthFix" lazy-load="true" />
请注意，在某些情况下，您可能需要在服务器上进行转换，因为小程序不支持在客户端进行 base64 转换。