Question

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

从网址获取SVG图片
将图片添加到HTML5 Canvas
将画布转换为以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样式，图像等），则无法绘制内联SVG。这是由于browser's security policies。您必须将所有外部引用转换为内联数据（即图像到数据 - uris等）。

将原始SVG代码添加到HTML Canvas

1 个答案: