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

how to draw image from svg path array using imageMagick in PHP

我正在从事一个允许用户设计名片的网络项目。我在 Codeigniter 中使用 Fabric js 库, 我正在将 Canvas 转换为 JSON 以使用 imageMagick 创建图像,并且当在设计中仅使用图像时我能够打印图像,但是当我在 canvas 中使用 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 代码,post 设计为 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;
        },

对于路径、矩形、圆形等图形元素,您可以使用 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/

更新二: https://jsfiddle.net/6hbnjfw1/6/