关键词:
【中文标题】将svg转换为png时如何包含CSS样式【英文标题】:How to Include CSS style when converting svg to png 【发布时间】:2017-05-25 02:34:40 【问题描述】:我创建了一个简单的 SVG 元素,在单击按钮时会下载到 png,我的解决方案类似于 here
基本思路是: 1.svg 到画布 2.canvas转dataUrl 3.触发从dataUrl下载
问题是在下载 png 文件时,它不包含应用于 svg 的 css 样式 my solution result
注意 - 我知道有一个解决方法是通过移动元素上的“内联”样式,如 here 或通过挖掘 DOM 树并使用递归解决方案 getComputedStyle(element ,null);
问题: 1.这个问题的真正原因和解决方案是什么。(GPU加速是否与此有关?)2.我仍然如何克服这个问题当使用带有 Fontface 的自定义字体时
<button id="btn">svg to png</button>
<svg id="svg" >
<circle cx="50" cy="50" r="30" />
<text class="svgTxt" x="0" y="100">Hen's SVG Image</text>
</svg>
<canvas id="canvas" ></canvas>
我的 CSS:
/*adding exo2 font*/
@font-face
font-family: 'exo_2black';
src: url('./exo2font/Exo2-Black-webfont.eot');
src: url('./exo2font/Exo2-Black-webfont.eot?#iefix') format('embedded-opentype'),
url('./exo2font/Exo2-Black-webfont.woff') format('woff'),
url('./exo2font/Exo2-Black-webfont.ttf') format('truetype'),
url('./exo2font/Exo2-Black-webfont.svg#exo_2black') format('svg');
font-weight: normal;
font-style: normal;
/*change circle color depends on window size*/
@media screen and (min-width: 480px)
svg circle
fill: lightgreen;
/*style on the svg text*/
.svgTxt
font-family: 'exo_2black';
font-size: 30px;
fill: red;
我的代码:
//reference to elements
var btn = document.querySelector('#btn');
var svg = document.getElementById('svg');
var svgTexts = svg.getElementsByTagName('text');
var canvas = document.getElementById('canvas');
//Style definitions for svg elements defined in stylesheets are not applied to the generated canvas. This can be patched by adding style definitions to the svg elements before calling canvg.
//3.trigger download from dataUrl
function triggerDownload(imgURI)
var evt = new MouseEvent('click',
view: window,
bubbles: false,
cancelable: true
);
var a = document.createElement('a');
a.setAttribute('download', 'hen_saved_image.png');
a.setAttribute('href', imgURI);
a.setAttribute('target', '_blank');
a.dispatchEvent(evt);
//btn click event
btn.addEventListener('click', function ()
// 1.svg to canvas
var ctx = canvas.getContext('2d');
var data = (new XMLSerializer()).serializeToString(svg);//serialize the svg element to string
var DOMURL = window.URL || window.webkitURL || window;
var img = new Image();
var svgBlob = new Blob([data], type: 'image/svg+xml;charset=utf-8' );//A blob object represents a chuck of bytes that holds data of a file.
var url = DOMURL.createObjectURL(svgBlob);//creates a DOMString containing an URL representing the object given in paramete
$('svg').append(deletedSVGText);
img.onload = function ()
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
// 2.canvas to dataUrl
var imgURI = canvas
.toDataURL('image/png')
.replace('image/png', 'image/octet-stream');// returns a data URI containing a representation of the image in the format specified by the type parameter
triggerDownload(imgURI);
;
img.src = url;
);
【问题讨论】:
【参考方案1】:问题 1(上半部分): 真正的原因是什么(GPU 加速是否与此有关?)
不,GPU 加速与此无关。 最广泛的原因是隐私。
要使用drawImage
绘制您的svg,您必须将您的svg 作为外部文档加载到<img>
标记内。 SVG 可以是一种用于资源加载的非常复杂的图像格式(它实际上可以需要任何 HTML 文档可能需要的任何类型的资源)。因此,规范中已声明与<iframe>
元素或<object>
或类似元素的安全性相同,应适用于<img>
内容,甚至更严格:
<img>
内容不能需要任何外部资源,也不能访问主文档。
问题 1(下半场):以及这个问题的解决方案
您指出了一些已经回答它的 SO 问题,您也可以将主文档中的所有样式表包含在解析的 svg 节点中的 <style>
标记中,然后再从它创建 Blob。 dumb implementation here
问题 2: “在使用带有 Fontface 的自定义字体时,我如何克服这个问题”
对于外部资源,您必须将其编码为 dataURI,并在创建 Blob 之前将其包含在您的 svg 节点中。特别是对于字体,您需要在 <style>
元素中设置 font-face
属性。
所以最后,你的 svg 会有类似的东西
<defs>
<style>
/* all your parsed styles in here */
@font-face
font-family: foo;
src: url('data:application/font-woff;charset=utf-8;base64,...')
</style>
</defs>
在您提取其标记之前就在其本身。
【讨论】:
如何将 PNG 图像转换为 SVG? [关闭]
】如何将PNG图像转换为SVG?[关闭]【英文标题】:HowtoconvertaPNGimagetoaSVG?[closed]【发布时间】:2010-12-2402:24:16【问题描述】:如何将PNG图像转换为SVG?【问题讨论】:通过一些应用程序或通过操作系统命令?如果通过操作系统,请... 查看详情
在将 svg 转换为 img 中使用 css
】在将svg转换为img中使用css【英文标题】:Usingcssinconvertedsvgtoimg【发布时间】:2017-12-1110:07:01【问题描述】:我正在尝试将svg转换为图像格式。实际上很多工作都很好,我知道如何从SVG转换为画布,从画布转换为img。我的问题是... 查看详情
将 SVG 转换为 PNG,并将应用的图像作为 svg 元素的背景
】将SVG转换为PNG,并将应用的图像作为svg元素的背景【英文标题】:ConvertSVGtoPNGwithappliedimagesasbackgroundtosvgelements【发布时间】:2016-03-0616:54:09【问题描述】:我有一个外部SVG文件,其中包含一些嵌入的图像标签。每当我使用toData... 查看详情
将 SVG 转换为 PNG,并将应用的图像作为 svg 元素的背景
】将SVG转换为PNG,并将应用的图像作为svg元素的背景【英文标题】:ConvertSVGtoPNGwithappliedimagesasbackgroundtosvgelements【发布时间】:2021-08-0418:00:22【问题描述】:我有一个外部SVG文件,其中包含一些嵌入的图像标签。每当我使用toData... 查看详情
回形针 - 将 SVG 转换为 PNG 时保持透明度
】回形针-将SVG转换为PNG时保持透明度【英文标题】:Paperclip-MaintainingtransparencywhenconvertingSVGtoPNG【发布时间】:2012-03-2221:37:27【问题描述】:我有一个地方,我使用回形针上传SVG文件,并将其转换为具有相同尺寸的PNG。转换后,... 查看详情
如何在保留图层的同时将 SVG 转换为 PNG?
】如何在保留图层的同时将SVG转换为PNG?【英文标题】:HowtoconvertSVGtoPNGwhilestillpreservingthelayers?【发布时间】:2021-09-0917:19:48【问题描述】:我的SVG图像如下所示:这是该SVG文件的摘录:<gid="surface1"><gclip-path="url(#clip1)"clip-... 查看详情
如何在ghostscript中将svg、eps和ai转换为png
】如何在ghostscript中将svg、eps和ai转换为png【英文标题】:Howtocovertsvg,epsandaitopnginghostscript【发布时间】:2017-10-1304:21:46【问题描述】:我必须将svg、eps和ai文件转换为png以显示缩略图。以下命令支持ai和eps,但不适用于svg。有什... 查看详情
将png图片转换为字体图标(代码片段)
...发送请求造成的流量浪费,因此,我们可以将图标的icon转换成字体图标:方法:1.将png格式的图片转换成svg格式;网址:https://www.jinaconvert.com/cn/convert-to-svg.php2.将svg格式的图标转成字体图标:网址:https://icomoon.io/app/#/select ... 查看详情
Right ImageMagick 通过 php 从 yr.no 将 svg 转换为 png
】RightImageMagick通过php从yr.no将svg转换为png【英文标题】:RightImageMagickconvertsvgtopngbyphpfromyr.no【发布时间】:2021-12-2318:33:01【问题描述】:将svg转换为png时遇到问题Meteogrammatsvghttps://www.yr.no/en/content/67.568007,33.391146/meteogram.svg我做:$... 查看详情
如何制作图标字体(如何将svg转换为css可用的图标字体)
转自: 如何制作图标字体(如何将svg转换为css可用的图标字体)具体描述在项目开发当中,我们常常遇到需要将获取到的svg转换为,css可用的图标字体,那么具体该如何进行操作呢具体操作登录icomoon点击右上角登录旁边的ic... 查看详情
如何制作图标字体(如何将svg转换为css可用的图标字体)
转自: 如何制作图标字体(如何将svg转换为css可用的图标字体)具体描述在项目开发当中,我们常常遇到需要将获取到的svg转换为,css可用的图标字体,那么具体该如何进行操作呢具体操作登录icomoon点击右上角登录旁边的ic... 查看详情
转换为png时如何更改图像中的单一颜色?
】转换为png时如何更改图像中的单一颜色?【英文标题】:Howtochangeasinglecolourinanimagewhenconvertingtoapng?【发布时间】:2021-07-0507:11:30【问题描述】:目标:将图标(单色、黑色、透明背景)从svg或xcf转换为png并更改图标的颜色(例... 查看详情
使用 C# 将 SVG 转换为 PNG [关闭]
】使用C#将SVG转换为PNG[关闭]【英文标题】:ConvertingSVGtoPNGusingC#[closed]【发布时间】:2010-09-0816:54:09【问题描述】:我一直在尝试使用C#将SVG图像转换为PNG,而无需编写太多代码。任何人都可以推荐一个库或示例代码来执行此操作... 查看详情
如何使用 canvg.js 和 Canvas 将 SVG 导出为 PNG
】如何使用canvg.js和Canvas将SVG导出为PNG【英文标题】:HowtoexportSVGasPNGusingcanvg.jsandCanvas【发布时间】:2021-06-1012:23:11【问题描述】:我们正在尝试使用canvg.js将SVG图片导出为PNG,但是当我们单击按钮“截屏”时,控制台显示错误“... 查看详情
如何从 PNG 创建 SVG
...景的PNG格式。我已将其导入到inkscape中,因此我可以将其转换为SVG。但是,当我使用跟踪位图时,Inkscape会改变形状,使得1个像素宽的直线带有 查看详情
使用 PHP 将 SVG 图像转换为 PNG
】使用PHP将SVG图像转换为PNG【英文标题】:ConvertSVGimagetoPNGwithPHP【发布时间】:2011-06-1602:28:17【问题描述】:我正在开展一个网络项目,该项目涉及根据一组数据为不同州着色的美国动态生成地图。这个SVG文件给了我一张很好的... 查看详情
在 JavaScript 中将 SVG 转换为 PNG
】在JavaScript中将SVG转换为PNG【英文标题】:SVGtoPNGinjavascript【发布时间】:2020-02-2117:00:24【问题描述】:我在将svg转换为png(base64)时遇到问题。SVG到base64可以正常工作,因为它在浏览器中显示得很好。但是当我尝试加载图像时,... 查看详情
如何将内联 svg(在 DOM 中)绘制到画布上?
...1:42【问题描述】:好吧,我需要一些关于将.svg文件/图像转换为.png文件/图像的帮助...我的页面上显示了一个.svg图像。它保存在我的服务器上(作为.png文件)。我需要根据需要将其转换为.png文件(单击按钮)并将.png文件保存在... 查看详情