前端实现 SVG 转 PNG( 二 ) _SVG

文章插图

图片中上部分是导出前的%20svg，下图是导出后的%20png 。svg%20中的图片是本域的，在导出后不显示。
问题来源我们按照文章最开始提出的步骤，逐步排查，会发现在第一步的时候，svg%20中的图片就不显示了。也就是，当%20image%20元素的%20src%20为一个%20svg，并且%20svg%20里面包含图片，那么被包含的图片是不会显示的，即使这个图片是本域的。
W3C%20关于这个问题并没有做说明，最后在%20https://bugzilla.mozilla.org/show_bug.cgi?id=628747%20找到了关于这个问题的说明。意思是：禁止这么做是出于安全考虑，svg%20里面引用的所有外部资源包括%20image,%20stylesheet,%20script%20等都会被阻止。
里面还举了一个例子：假设没有这个限制，如果一个论坛允许用户上传这样的%20svg%20作为头像，就有可能出现这样的场景，一位黑客上传%20svg%20作为头像，里面包含代码：<image%20xlink:href=https://www.isolves.com/it/cxkf/yy/html5/2019-09-04/"http://evilhacker.com/myimage.png">（假设这位黑客拥有对于 evilhacker.com 的控制权），那么这位黑客就完全能做到下面的事情：

只要有人查看他的资料，evilhacker.com 就会接收到一次 ping 的请求（进而可以拿到查看者的 ip）;
可以做到对于不同的 ip 地址的人展示不一样的头像；
可以随时更换头像的外观（而不用通过论坛管理员的审核）。

看到这里，大概就明白了整个问题的来龙去脉了，当然还有一点原因可能是避免图像递归。
解决办法思路：由于安全因素，其实第一步的时候，图片已经显示不出来了。那么我们现在考虑的方法是在第一步之后遍历 svg 的结构，将所有的 image 元素的 url、位置和尺寸保存下来。在第三步之后，按顺序贴到 canvas 上。这样，最后导出的 png 图片就会有 svg 里面的 image 。关键代码：
// 此处略去生成 svg url 的过程var svgUrl = DomURL.createObjectURL(blob);var svgWidth = document.querySelector('#kity_svg').getAttribute('width');var svgHeight = document.querySelector('#kity_svg').getAttribute('height');var embededImages = document.querySelectorAll('#kity_svg image');// 由 nodeList 转为 arrayembededImages = Array.prototype.slice.call(embededImages);// 加载底层的图loadImage(svgUrl).then(function(img) {var canvas = document.createElement('canvas'),ctx = canvas.getContext("2d");canvas.width = svgWidth;canvas.height = svgHeight;ctx.drawImage(img, 0, 0); // 遍历 svg 里面所有的 image 元素 embededImages.reduce(function(sequence, svgImg){return sequence.then(function() {var url = svgImg.getAttribute('xlink:href') + 'abc',dX = svgImg.getAttribute('x'),dY = svgImg.getAttribute('y'),dWidth = svgImg.getAttribute('width'),dHeight = svgImg.getAttribute('height');return loadImage(url).then(function(sImg) {ctx.drawImage(sImg, 0, 0, sImg.width, sImg.height, dX, dY, dWidth, dHeight);}, function(err) {console.log(err);});}, function(err) {console.log(err);}); }, Promise.resolve()).then(function() {// 准备在前端下载var a = document.createElement("a");a.download = 'download.png';a.href = https://www.isolves.com/it/cxkf/yy/html5/2019-09-04/canvas.toDataURL("image/png");var clickEvent = new MouseEvent("click", {"view": window,"bubbles": true,"cancelable": false});a.dispatchEvent(clickEvent);}); }, function(err) {console.log(err); }) // 省略了 loadImage 函数 // 代码和第一个例子相同说明：

例子中 svg 里面的图像是根节点下面的，因此用于表示位置的 x, y 直接取来即可使用，在实际中，这些位置可能需要跟其他属性做一些运算之后得出。如果是基于 svg 库构建的，那么可以直接使用库里面用于定位的函数，比直接从底层运算更加方便和准确。
我们这里讨论的是本域的图片的导出问题，跨域的图片由于「污染了」画布，在执行 toDataUrl 函数的时候会报错。

结语在这里和大家分享了在前端将 svg 转为 png 的方法和过程中可能会遇到的两个问题，一个是浏览器对 canvas 的尺寸限制，另一个是导出图片的问题。当然，这两个问题还有其他的解决方法，同时由于知识所限，本文内容难免有纰漏，欢迎大家批评指正。
希望本文能帮助到您！点赞+转发，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓-_-）
关注｛我｝，享受文章首发体验！
每周重点攻克一个前端技术难点。更多精彩前端内容私信我回复“教程”
原文链接：http://fex.baidu.com/blog/2015/11/convert-svg-to-png-at-frontend/