我创建了一个简单的SVG元素,在点击按钮时会被下载到png,我的解决方案类似于here
基本思路是:
1.svg to canvas
2.canvas to dataUrl
3.从dataUrl下载触发器
问题是,在下载png文件时,它不包含在svg上应用的css样式 my solution result
注意 - 我知道有一种解决方案可以通过移动样式&#34; inline&#34;通过挖掘DOM树并使用 getComputedStyle(element,null)来处理<{3}}之类的元素或递归解决方案;
问题:
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>
我的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;
});
答案 0 :(得分:5)
问题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节点中。特别是对于字体,您需要在font-face
元素中设置<style>
属性。
所以最后,你的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>
在你提取标记之前,本身。