将内联 SVG 保存为 JPEG/PNG/SVG

问题描述

我的 html 中有一个内联 SVG，我需要能够将其保存为 JPEG、PNG 或 SVG.

I have an inline SVG in my html, and I need to be able to save this as either a JPEG, PNG or SVG.

我尝试了几种不同的方法，将 SVG 转换为画布，然后再转换为 JPEG，但我一直无法让这些工作.

I have tried a few different methods with converting the SVG to canvas and then converting to JPEG, but I haven't been able to get these working.

这是我的内联 SVG 的示例.

Here is an example of my inline SVG.

.font {
	color: #ffffff;
	font-family: Roboto;
	font-weight: bold;
	text-transform: uppercase;
}
.name {
	font-size: 64pt;
}
.top-bar-text {
	font-size: 32pt;
}
.font tspan {
	dominant-baseline: middle;
}

<link href='http://fonts.googleapis.com/css?family=Roboto:700' rel='stylesheet' type='text/css'>

<svg width="256" height="256" id="icon">
  <rect class="bg1" id="bg_color_1" x="0" y="0" width="256" height="256" fill="#4cbc5a" />
  <path class="bg2" id="bg_color_2" d="M 0 96 L0,256 L256,256 L256,96 s -128 96 -256 0" fill="#08a21c" />
  <text id="left_corner_text" x="24" y="36" width="48" height="64" class="top_bar lct font top-bar-text" text-anchor="middle" fill="#ffffff"><tspan>1</tspan></text>
  <text id="right_corner_text" x="232" y="36" width="48" height="64" class="top_bar rct font top-bar-text" text-anchor="middle" fill="#ffffff"><tspan>2</tspan></text>
  <text id="line_1_text" transform="scale(1,2)" x="128" y="90" width="256" height="192" class="l1t font name" text-anchor="middle" fill="#ffffff"><tspan>ABC</tspan></text>
</svg>

此外，并非所有元素都需要导出，因为用户可以选择删除顶角数字.

Also, not all the elements need to be exported, as some of the options the user has is to remove the top corner numbers.

我希望将其转换为直接下载到浏览器.

I would like for when it's been converted to download straight to the browser.

推荐答案

现在这很简单.

基本思想是:

1. SVG 到画布
2. 画布到 dataUrl
3. 触发从 dataUrl 下载

---

它实际上在 Stack Overflow 代码段之外工作

var btn = document.querySelector('button');
var svg = document.querySelector('svg');
var canvas = document.querySelector('canvas');

function triggerDownload (imgURI) {
  var evt = new MouseEvent('click', {
    view: window,
    bubbles: false,
    cancelable: true
  });

  var a = document.createElement('a');
  a.setAttribute('download', 'MY_COOL_IMAGE.png');
  a.setAttribute('href', imgURI);
  a.setAttribute('target', '_blank');

  a.dispatchEvent(evt);
}

btn.addEventListener('click', function () {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var data = (new XMLSerializer()).serializeToString(svg);
  var DOMURL = window.URL || window.webkitURL || window;

  var img = new Image();
  var svgBlob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
  var url = DOMURL.createObjectURL(svgBlob);

  img.onload = function () {
    ctx.drawImage(img, 0, 0);
    DOMURL.revokeObjectURL(url);

    var imgURI = canvas
        .toDataURL('image/png')
        .replace('image/png', 'image/octet-stream');

    triggerDownload(imgURI);
  };

  img.src = url;
});

<button>svg to png</button>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="200" height="200">
  <rect x="10" y="10" width="50" height="50" />
  <text x="0" y="100">Look, i'm cool</text>
</svg>

<canvas id="canvas"></canvas>

关于下载部分，你可以设置文件名等(虽然在这个例子中没有).几天前，我回答了一个关于如何从给定页面下载特​​定 HTML 部分的问题.关于下载部分可能有用:https://stackoverflow.com/a/28087280/2178180

Regarding the downloading part, you can set up a filename and etc etc (although not in this example). Some days ago I answered a question on how to download a specific portion of HTML from the given page. It might be useful regarding the downloading part: https://stackoverflow.com/a/28087280/2178180

更新:现在让您指定文件名

这篇关于将内联 SVG 保存为 JPEG/PNG/SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！