Javascript 将原始SVG代码添加到HTML画布

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

从url获取SVG图像

将图像添加到HTML5画布

将画布转换为base64中编码的JPEG

为了实现这一点，我在jsPDF master上复制了这个函数

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事件属性（如图像对象）

谢谢

您可以将“原始”（内联）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!');
});

var-rawSVG=''；
drawInlineSVG（ctx、RAWSSVG、函数（img）{
console.log（'done！'）；
});

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

需要注意的重要事项：如果内联SVG包含外部引用（CSS样式、图像等），则无法绘制它们。这是由于。您必须将所有外部引用转换为内联数据（即，将图像转换为数据URI等）。

我还发现了此链接（），它可能很有用。