如何在PHP中使用imageMagick从svg路径数组绘制图像

Question

我正在研究一个允许用户设计名片的Web项目。我在Codeigniter中使用Fabric js库， 我正在将Canvas转换为JSON以使用imageMagick创建图像，并且仅在设计中使用图像时才能够打印图像，但是当我在画布中使用svg字符串并转换为json时，就可以获取此数据 而且我不知道如何使用imageMagick从此数据创建图像。 请帮忙。

stdClass Object
            (
                [type] => path
                [version] => 2.3.6
                [originX] => left
                [originY] => top
                [left] => 460.41162159184
                [top] => 201.78296829576
                [width] => 6.04
                [height] => 7.7
                [fill] => rgb(0,0,0)
                [stroke] => 
                [strokeWidth] => 1
                [strokeDashArray] => 
                [strokeLineCap] => butt
                [strokeLineJoin] => miter
                [strokeMiterLimit] => 10
                [scaleX] => 1
                [scaleY] => 1
                [angle] => 0
                [flipX] => 
                [flipY] => 
                [opacity] => 1
                [shadow] => 
                [visible] => 1
                [clipTo] => 
                [backgroundColor] => 
                [fillRule] => nonzero
                [paintFirst] => fill
                [globalCompositeOperation] => source-over
                [transformMatrix] => 
                [skewX] => 0
                [skewY] => 0
                [path] => Array
                    (
                        [0] => Array
                            (
                                [0] => M
                                [1] => 466.95
                                [2] => 203.98
                            )

                        [1] => Array
                            (
                                [0] => c
                                [1] => -2.17
                                [2] => 1.5
                                [3] => -1.59
                                [4] => 5.74
                                [5] => -5
                                [6] => 6
                            )

                        [2] => Array
                            (
                                [0] => c
                                [1] => -1.37
                                [2] => -1.29
                                [3] => -0.99
                                [4] => -4.34
                                [5] => -0.99
                                [6] => -7
                            )

                        [3] => Array
                            (
                                [0] => C
                                [1] => 464
                                [2] => 201.73
                                [3] => 464.84
                                [4] => 202.22
                                [5] => 466.95
                                [6] => 203.98
                            )

                        [4] => Array
                            (
                                [0] => z
                            )

                    )

            )

这是JS代码，将设计发布到PHP ImageMagick

savePNG : function(e) {

            savedCanvas[getItem('activeView')] = canvas.toJSON();
            var datas = JSON.stringify(savedCanvas);
            $.ajaxSetup({

                beforeSend: function(){
                    show_loader('show');
                },
            });
            $.post('studio/api/save', {csrf_token_name:token,designs:datas} ).done( function(data){
                console.log(data);
            }).always( function(){
                show_loader('hide');
            })
            return false;
        },

Answer 1

对于图形元素，例如路径，矩形，圆形，可以使用toSVG方法。重写toObject方法并在其中放置svg参数。

 toObject : function( propertiesToInclude ) {
        var o = extend( this.callSuper( 'toObject', ['sourcePath', 'pathOffset'].concat( propertiesToInclude ) ), {
            svg  : this.toSVG()
        } );
        return o;
    },

之后，您在php中有了svg元素。尝试使用该内容创建一个空的svg文件。之后，您可以将其用作图像或图形元素（我的建议是用作图形元素，因为其结果是矢量形状）

更新

从fabric.Object扩展toObject方法

//rewrite core
fabric.Object.prototype.toObject = (function (toObject) {
    return function () {

        return fabric.util.object.extend(toObject.call(this), {
            svgString: this.toSVG()
        });
    };
})(fabric.Object.prototype.toObject);

示例： https://jsfiddle.net/6hbnjfw1/4/

更新2： https://jsfiddle.net/6hbnjfw1/6/