如何处理TYPO3中的大json字符串

我开发了一个小小的订单扩展，客户可以在这里设计名片。此扩展使用与fabric.js关联的画布

客户可以添加一些文本、简单表单、图像等，她的定制结果是一个json字符串，我通过jquery将其绑定到一个隐藏输入，以便在提交表单时将该数据存储在属性图像中

流体：

<f:form.hidden class="custom-image" property="image" />

HTML结果：

<input class="custom-image" type="hidden" name="tx_example_orderform[step3data][image]" value="{&quot;objects&quot;:[{&quot;type&quot;:&quot;rect&quot;,&quot;originX&quot;:&quot;left&quot;,&quot;originY&quot;:&quot;top&quot;,&quot;left&quot;:761,&quot;top&quot;:181,&quot;width&quot;:50,&quot;height&quot;:50,&quot;fill&quot;:&quot;#68e5e7&quot;,&quot;stroke&quot;:null,&quot;strokeWidth&quot;:1,&quot;strokeDashArray&quot;:null,&quot;strokeLineCap&quot;:&quot;butt&quot;,&quot;strokeLineJoin&quot;:&quot;miter&quot;,&quot;strokeMiterLimit&quot;:10,&quot;scaleX&quot;:1,&quot;scaleY&quot;:1,&quot;angle&quot;:0,&quot;flipX&quot;:false,&quot;flipY&quot;:false,&quot;opacity&quot;:0.8,&quot;shadow&quot;:null,&quot;visible&quot;:true,&quot;clipTo&quot;:null,&quot;backgroundColor&quot;:&quot;&quot;,&quot;fillRule&quot;:&quot;nonzero&quot;,&quot;globalCompositeOperation&quot;:&quot;source-over&quot;,&quot;transformMatrix&quot;:null,&quot;params&quot;:{&quot;base&quot;:1,&quot;x&quot;:761,&quot;y&quot;:181,&quot;scaleX&quot;:1,&quot;scaleY&quot;:1},&quot;rx&quot;:0,&quot;ry&quot;:0}],&quot;background&quot;:&quot;&quot;}">

当json字符串不太大时，这非常有效，但是当json字符串太长时，我会得到一个空白页面，并且不会呈现任何内容，但是如果我调试图像属性，我可以看到仍然设置了属性图像：

有什么建议吗？ 也许有更好的方法来存储json字符串并将其从js传递到php或从php传递到js吗

---

希望您能帮助我：

有没有办法定制ViewHelper？您觉得ViewHelper会很棒吗？

<input class="custom-image" type="hidden" name="tx_example_orderform[step3data][image]" value="{&quot;objects&quot;:[{&quot;type&quot;:&quot;rect&quot;,&quot;originX&quot;:&quot;left&quot;,&quot;originY&quot;:&quot;top&quot;,&quot;left&quot;:761,&quot;top&quot;:181,&quot;width&quot;:50,&quot;height&quot;:50,&quot;fill&quot;:&quot;#68e5e7&quot;,&quot;stroke&quot;:null,&quot;strokeWidth&quot;:1,&quot;strokeDashArray&quot;:null,&quot;strokeLineCap&quot;:&quot;butt&quot;,&quot;strokeLineJoin&quot;:&quot;miter&quot;,&quot;strokeMiterLimit&quot;:10,&quot;scaleX&quot;:1,&quot;scaleY&quot;:1,&quot;angle&quot;:0,&quot;flipX&quot;:false,&quot;flipY&quot;:false,&quot;opacity&quot;:0.8,&quot;shadow&quot;:null,&quot;visible&quot;:true,&quot;clipTo&quot;:null,&quot;backgroundColor&quot;:&quot;&quot;,&quot;fillRule&quot;:&quot;nonzero&quot;,&quot;globalCompositeOperation&quot;:&quot;source-over&quot;,&quot;transformMatrix&quot;:null,&quot;params&quot;:{&quot;base&quot;:1,&quot;x&quot;:761,&quot;y&quot;:181,&quot;scaleX&quot;:1,&quot;scaleY&quot;:1},&quot;rx&quot;:0,&quot;ry&quot;:0}],&quot;background&quot;:&quot;&quot;}">

 <script type="text/javascript">
<![CDATA[var jsonCanvasString = ]]>
    <f:if condition="{step3data.image}">
        <f:then>
            <f:format.htmlentitiesDecode>{step3data.image}</f:format.htmlentitiesDecode>
        </f:then>
        <f:else>
            ''
        </f:else>
    </f:if>
<![CDATA[;]]>
</script>

if (typeof jsonCanvasString !== 'undefined') {
    canvas.loadFromJSON(jsonCanvasString, canvas.renderAll.bind(canvas));
}