前言

svg 是一种矢量图形，在 web 上应用很广泛，但是很多时候由于应用的场景，常常需要将 svg 转为 png 格式，下载到本地等。随着浏览器对 HTML 5 的支持度越来越高，我们可以把 svg 转为 png 的工作交给浏览器来完成。

一般方式

  1. 创建 imageimage，src = xxx.svg;
  2. 创建 canvas，dragImage 将图片贴到 canvas 上；
  3. 利用 toDataUrl 函数，将 canvas 的表示为 url；
  4. new image, src = url, download = download.png；

但是，在转换的时候有时有时会碰到如下的如下的两个问题：

问题 1 ：浏览器对 canvas 限制

Canvas 的 W3C 的标准上没有提及 canvas 的最大高/宽度和面积，但是每个厂商的浏览器出于浏览器性能的考虑，在不同的平台上设置了最大的高/宽度或者是渲染面积，超过了这个阈值渲染的结果会是空白。测试了几种浏览器的 canvas 性能如下：

  • chrome (版本 46.0.2490.80 (64-bit))
  • 最大面积：268, 435, 456 px^2 = 16, 384 px * 16, 384 px
  • 最大宽/高：32, 767 px
  • firefox (版本 42.0)
  • 最大面积：32, 767 px * 16, 384 px
  • 最大宽/高：32, 767px
  • safari (版本 9.0.1 (11601.2.7.2))
  • 最大面积： 268, 435, 456 px^2 = 16, 384 px * 16, 384 px
  • ie 10(版本 10.0.9200.17414)
  • 最大宽/高： 8, 192px * 8, 192px

在一般的 web 应用中，可能很少会超过这些限制。但是，如果超过了这些限制，则会导致导出为空白或者由于内存泄露造成浏览器崩溃。

而且从另一方面来说，导出 png 也是一项很消耗内存的操作，粗略估算一下，导出 16, 384 px * 16, 384 px 的 svg 会消耗 16384 * 16384 * 4 / 1024 / 1024 = 1024 M 的内存。所以，在接近这些极限值的时候，浏览器也会反应变慢，能否导出成功也跟系统的可用内存大小等等都有关系。

对于这个问题，有如下两种解决方法：

  1. 将数据发送给后端，在后端完成转换；
  2. 前端将 svg 切分成多个图片导出；

第一种方法可以使用 PhantomJS、inkscape、ImageMagick 等工具，相对来说比较简单，这里我们主要探讨第二种解决方法。

svg 切分成多个图片导出

思路：浏览器虽然对 canvas 有尺寸和面积的限制，但是对于 image 元素并没有明确的限制，也就是第一步生成的 image 其实显示是正常的，我们要做的只是在第二步 dragImage 的时候分多次将 image 元素切分并贴到 canvas 上然后下载下来。 同时，应注意到 image 的载入是一个异步的过程。

关键代码：

// 构造 svg Url，此处省略将 svg 经字符过滤后转为 url 的过程。
var svgUrl = DomURL.createObjectURL(blob);
var svgWidth = document.querySelector('#kity_svg').getAttribute('width');
var svgHeight = document.querySelector('#kity_svg').getAttribute('height');

// 分片的宽度和高度，可根据浏览器做适配
var w0 = 8192;
var h0 = 8192;

// 每行和每列能容纳的分片数
var M = Math.ceil(svgWidth / w0);
var N = Math.ceil(svgHeight / h0);

var idx = 0;
loadImage(svgUrl).then(function(img) {

    while(idx < M * N) {
        // 要分割的面片在 image 上的坐标和尺寸
        var targetX = idx % M * w0,
            targetY = idx / M * h0,
            targetW = (idx + 1) % M ? w0 : (svgWidth - (M - 1) * w0),
            targetH = idx >= (N - 1) * M ? (svgHeight - (N - 1) * h0) : h0;

        var canvas = document.createElement('canvas'),
            ctx = canvas.getContext('2d');

            canvas.width = targetW;
            canvas.height = targetH;

            ctx.drawImage(img, targetX, targetY, targetW, targetH, 0, 0, targetW, targetH);

            console.log('now it is ' + idx);

            // 准备在前端下载
            var a = document.createElement('a');
            a.download = 'naotu-' + idx + '.png';
            a.href = canvas.toDataURL