将原始 SVG 代码添加到 HTML Canvas

Question

今天早些时候，我已经成功地使用 javascript 将 SVG 文件转换为 JPEG。主要步骤是：

1. 从 url 获取 SVG 图像
2. 将图像添加到 HTML5 画布
3. 将画布转换为以 base64 编码的 JPEG

我在 jsPDF-master 上复制了 getImageFromUrl 函数来实现这一点。

var getImageFromUrl = function (url, callback) {
    var img = new Image,
        data, ret = {
            data: null,
            pending: true
        };
    img.onError = function () {
        throw new Error('Cannot load image: "' + url + '"');
    }
    img.onload = function () {
        var canvas = document.createElement('canvas');
        document.body.appendChild(canvas);
        canvas.width = img.width;
        canvas.height = img.height;
        var ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0);
        // Grab the image as a jpeg encoded in base64, but only the data
        data = canvas.toDataURL('image/jpeg').slice('data:image/jpeg;base64,'.length);
        // Convert the data to binary form
        data = atob(data)
        document.body.removeChild(canvas);
        ret['data'] = data;
        ret['pending'] = false;
        if (typeof callback === 'function') {
            callback(data);
        }
    }
    img.src = url;
    return ret;
}

通过该函数，要转换的图像实际上是一个文件。就我而言，我没有文件，只有原始代码（使用文本编辑器打开 SVG 文件时的文本）。

我的问题是：

如何将 SVG 文件的原始代码添加到 HTML 画布中？这个过程是否也像图像对象一样具有 .onload 事件属性？

谢谢

Answer 1

您可以通过将“原始”（内联）SVG 转换为 Blob 来将其转换为图像，然后将其用作图像源：

function drawInlineSVG(ctx, rawSVG, callback) {

    var
        /// create Blob of inlined SVG
        svg = new Blob([rawSVG], {type:"image/svg+xml;charset=utf-8"}),

        /// create URL (handle prefixed version)
        domURL = self.URL || self.webkitURL || self,
        url = domURL.createObjectURL(svg),

        /// create Image
        img = new Image;

    /// handle image loading
    img.onload = function () {

        /// draw SVG to canvas
        ctx.drawImage(this, 0, 0);     
        domURL.revokeObjectURL(url);

        callback(this);
    };

    img.src = url;
}

然后这样称呼它：

var rawSVG = '<svg ... >';

drawInlineSVG(ctx, rawSVG, function(img) {
    console.log('done!');
});

生产代码当然应该包含错误处理程序（此处未显示）。

重要提示：如果内联 SVG 包含外部引用（CSS 样式、图像等），则不能绘制它们。这是由于browser's security policies。您必须将所有外部引用转换为内联数据（即图像转换为 data-uris 等）。