- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试使用 javascript 通过浏览器将 SVG 转换为 PNG
我一直在关注这个问题的答案Save inline SVG as JPEG/PNG/SVG
它适用于该答案中给定的 XML不幸的是,我在尝试转换 SVG 时遇到了 Uncaught DOMException: Failed toexecute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be Export.
。这是我的代码片段。谁能告诉我为什么它不起作用?
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();
img.crossOrigin = 'anonymous'
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" width="161px" height="91px" version="1.1" style="background-color: rgb(255, 255, 255);"><defs/><g transform="translate(0.5,0.5)"><rect x="0" y="0" width="160" height="90" fill="#ffffff" stroke="#000000" pointer-events="none"/><path d="M 0 26 L 0 0 L 160 0 L 160 26 Z" fill="#dae8fc" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><g transform="translate(48.5,7.5)"><switch><foreignObject style="overflow:visible;" pointer-events="all" width="63" height="12" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; vertical-align: top; white-space: nowrap; font-weight: bold; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;">Classname</div></div></foreignObject><text x="32" y="12" fill="#000000" text-anchor="middle" font-size="12px" font-family="Helvetica" font-weight="bold">Classname</text></switch></g><g transform="translate(5.5,32.5)"><switch><foreignObject style="overflow:visible;" pointer-events="all" width="62" height="12" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; vertical-align: top; overflow: hidden; max-height: 22px; max-width: 148px; width: 63px; white-space: normal; word-wrap: normal;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;">+ field: type</div></div></foreignObject><text x="31" y="12" fill="#000000" text-anchor="middle" font-size="12px" font-family="Helvetica">+ field: type</text></switch></g><path d="M 0 56 L 160 56" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><g transform="translate(5.5,66.5)"><switch><foreignObject style="overflow:visible;" pointer-events="all" width="111" height="12" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; vertical-align: top; overflow: hidden; max-height: 22px; max-width: 148px; width: 112px; white-space: normal; word-wrap: normal;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;">+ method(type): type</div></div></foreignObject><text x="56" y="12" fill="#000000" text-anchor="middle" font-size="12px" font-family="Helvetica">+ method(type): type</text></switch></g></g></svg>
<canvas id="canvas"></canvas>
最佳答案
您的 SVG 的 foreignObject
存在问题,删除它即可解决您的问题,
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();
img.crossOrigin = 'anonymous'
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" width="161px" height="91px" version="1.1" style="background-color: rgb(255, 255, 255);">
<defs/>
<g transform="translate(0.5,0.5)">
<rect x="0" y="0" width="160" height="90" fill="#ffffff" stroke="#000000" pointer-events="none"/>
<path d="M 0 26 L 0 0 L 160 0 L 160 26 Z" fill="#dae8fc" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
<g transform="translate(48.5,7.5)">
<switch>
<text x="32" y="12" fill="#000000" text-anchor="middle" font-size="12px" font-family="Helvetica" font-weight="bold">Classname</text>
</switch>
</g>
<g transform="translate(5.5,32.5)">
<switch>
<text x="31" y="12" fill="#000000" text-anchor="middle" font-size="12px" font-family="Helvetica">+ field: type</text>
</switch>
</g>
<path d="M 0 56 L 160 56" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><g transform="translate(5.5,66.5)">
<switch>
<text x="56" y="12" fill="#000000" text-anchor="middle" font-size="12px" font-family="Helvetica">+ method(type): type</text>
</switch>
</g>
</g>
</svg>
<canvas id="canvas"></canvas>
您也可以尝试Canvas2Image plugin
关于javascript - 使用 javascript 将 SVG 保存为 PNG 未知 DOM 异常,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44403381/
我有一个交叉表函数,我过去曾多次成功使用它,但现在它在最后转储所有数据,而不是将其旋转到输出表中。它似乎无法找到交叉表。我通过以下方式对其进行了研究; 如果 tablefunc 不存在则创建扩展; -
表1(客户表) Id, CustomerId, IsKnownCustomer,phonemacaddress 1, 空 0 00:9a:34:cf:a4 2, 004024 1 00:6f:64:c
知道为什么我总是收到这个烦人且无用的错误代码/描述吗? Failed to pull image myapidemodocker.azurecr.io/apidemo:v4.0: rpc error:
我正在进行 PHP 登录,并且之前可以正常工作,但我尝试使用户名功能不区分大小写,但此后代码一直无法正常工作。我删除了我添加的所有内容,以尝试使其不区分大小写,即 strtolower()。页面上显示
有人会帮助我提供有关此错误的任何可能信息吗?原因?登录?在哪里寻找/开始? Cannot use output buffering in output buffering display handl
我已经添加了这样的脚本 我在我的 test.js 中做了这个 var app = angular.module('MyApp', ['ngRoute']).config
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post . 关闭 8 年前。 Improve this qu
我有这个sql语句: selectAllUsersByCriteria = 连接.prepareStatement( “从用户那里选择*?=?” ); 下面的方法运行该语句: public Array
我有一个白色的 EditText,在 Android 3.1 及更高版本中,光标不显示(因为它也是白色的)。有关信息,我使用 android:background="@android:drawable
我正在尝试使用 Keras 实现深度学习模型。但是我有一个未知形状实现的问题。我一直在寻找类似的错误,但没有找到。 这是我的代码。 Xhome = dataset[:,32:62] Xaway = d
关注此introduction可以通过导入命名空间 System.Xml 来使用 XMLReader 类。在我的 Visual Studio 项目中,我使用 .NET 4.0,但 System.Xml
我有一个动态链接库的程序。该程序将函数指针传递给该库以执行。 但是 ubsan(Undefined Behavior Sanitizer)指定指针位于错误的函数类型上。那只会发生 如果回调函数有一个类
我正在尝试在我的 Swift SpriteKit 应用程序中使用 AVAudioSession。我遇到了奇怪的“未声明类型”问题。例如…… import AVFoundation var audioS
如果在编译期间(在实际编译和运行程序之前)其参数之一的值已知/未知,如何专门化模板函数? 我还不知道怎么做。 想法 1: #include #include int main(void){
我看到一些人的代码是这样的: while (!(baseType == typeof(Object))) { .... baseType = baseType.BaseType;
我正在尝试使用 GoColly 框架获取所有 HREF 链接,但是只允许任何域的 url 为根 URL 或子域(否路径)。我已经注释掉了我的 REGEXP。文件扩展名没有事情。我只是在“/”之后不想要
我有一个包含多个实体的数据库,特别是 Book 和 User。它们之间存在这样的 ManyToMany 关系: 书: @Entity @Table(name = "Books") public cla
如果我将范围的初始部分设置为 Range("A:A"),如何确保将整行传递给排序? 数据 id、fname、mname、lname、后缀、状态、位置、时区 通过在 id 中搜索起点和终点来选择范围。
我对kubernetes很陌生,而对于docker来说就不那么多了。 我一直在研究示例,但是我对自动缩放器(似乎无法缩放)感到困惑。 我在这里通过示例https://kubernetes.io/doc
我在 ChildWindow 中使用 SL Toolkit 5 中的 BusyIndicator 控件。 在某些解决方案中,它可以工作,但在其他解决方案中,使用完全相同的代码(至少看起来),我在运
我是一名优秀的程序员,十分优秀!