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

Question

我正在开发一个允许用户设计名片的网络项目。我在 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;
        },

标签： svgfabricjsimagick

Answer 1

对于路径、矩形、圆形等图形元素，您可以使用 toSVG 方法。重写 toObject 方法并将 svg 参数放在那里。

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

之后，您在 php.ini 中有 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/