我创建了一个简单的 SVG 元素,单击按钮时会下载到 png,我的解决方案类似于here https://stackoverflow.com/questions/28226677/save-inline-svg-as-jpeg-png-svg
基本思想是:
1.svg转画布
2.canvas转dataUrl
3.从dataUrl触发下载
问题是,当下载 png 文件时,它不包含应用于 svg 的 css 样式
我的解决方案结果 https://i.stack.imgur.com/wyOAX.png
注意 - 我知道有一个解决方案,可以通过在元素上“内联”移动样式来解决 like here https://stackoverflow.com/questions/33189495/adding-css-style-when-converting-svg-to-png或者通过挖掘 DOM 树并使用递归解决方案getCompatedStyle(元素,null);
问题:
1.这个问题的真正原因是什么以及解决办法。
(GPU加速有什么关系吗?)
2.当使用 Fontface 的自定义字体时,我如何仍然克服这个问题
<button id="btn">svg to png</button>
<svg id="svg" width="200" height="200">
<circle cx="50" cy="50" r="30" />
<text class="svgTxt" x="0" y="100">Hen's SVG Image</text>
</svg>
<canvas id="canvas" width="200" height="200"></canvas>
my 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;
}
my code:
//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;
});