正文 

当前位置： 首页 > 问答 >

将svg转换为png时如何包含CSS样式

     2023-03-06     185

关键词：

【中文标题】将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 作为外部文档加载到&lt;img&gt; 标记内。 SVG 可以是一种用于资源加载的非常复杂的图像格式（它实际上可以需要任何 HTML 文档可能需要的任何类型的资源）。因此，规范中已声明与&lt;iframe&gt; 元素或&lt;object&gt; 或类似元素的安全性相同，应适用于&lt;img&gt; 内容，甚至更严格：

&lt;img&gt; 内容不能需要任何外部资源，也不能访问主文档。

问题 1（下半场）：以及这个问题的解决方案

您指出了一些已经回答它的 SO 问题，您也可以将主文档中的所有样式表包含在解析的 svg 节点中的 &lt;style&gt; 标记中，然后再从它创建 Blob。 dumb implementation here

问题 2： “在使用带有 Fontface 的自定义字体时，我如何克服这个问题”

对于外部资源，您必须将其编码为 dataURI，并在创建 Blob 之前将其包含在您的 svg 节点中。特别是对于字体，您需要在 &lt;style&gt; 元素中设置 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文件保存在... 查看详情