Question

我在画布中使用背景图片和文本框。

第1步：我正常使用Fabric JS创建canvas对象。

str[size-1]

第2步：我正在生成JSON并转到下一个表单

var canvas = window._canvas = new fabric.Canvas('c');
/* canvas background Image settings */
canvas.setBackgroundColor({source: imssrc, repeat: 'no-repeat'}, canvas.renderAll.bind(canvas));
// text box, 120x60, without background image
var txtBox = new fabric.Textbox("A Great text to be rendered in the screen, wraped", {
  fontSize: 18,
  fontFamily: 'Arial',
  textAlign: 'left',
  left: 20,
  top:20,
  right:20,
  bottom:20,
  width: 340,
  height: 510,
  fill:'#FFFFFF',
});
canvas.add(txtBox).setActiveObject(txtBox);

addHandler('sizepicker', function(obj) {
      setStyle(obj, 'fontSize', this.value);
    }, 'onchange');
addHandler('colorpicker', function(obj) {
      setStyle(obj, 'fill', this.value);
    }, 'onchange');
}

第3步：我将此表单值存储在会话中。如果用户单击此前一个按钮，则加载用户在上一阶段所做的内容。

var canvasjson = JSON.stringify( canvas.toDatalessJSON() );
document.getElementById('imgpath').value=o;
document.getElementById('canvasdata').value=canvasjson;
canvas.clear();
canvas.loadFromJSON(canvasjson, canvas.renderAll.bind(canvas));

// If you want the file to be visible in the browser 
// - please modify the callback in javascript. All you
// need is to return the url to the file, you just saved 
// and than put the image in your browser.
var imgtxt=document.getElementById('imgpath').value;
var txt=$("#description").code();
$("#events-description").val(txt);
if(imgtxt.length!=0){
  $('form').submit();
  //        console.log(canvasjson);
  return false;
}

我的预期结果是画布需要从这个JSON数据加载但是输出为空。我也找不到任何JS错误。

请帮我解决此问题。

我的JSON数据：

fabric.Object.prototype.set({
    transparentCorners: false,
    cornerColor: 'rgba(102,153,255,0.5)',
    cornerSize: 12,
    padding: 5
});

var canvas = window._canvas = new fabric.Canvas('c');
var object = JSON.parse(templateText); //use default json parser
canvas.loadFromJSON(templateText, function(){
            canvas.width = object.width;
            canvas.height = object.height;
});
canvas.renderAll();

我不知道自己犯了什么错误。请帮帮我。

使用JSON数据加载画布会导致空输出

0 个答案: