Question

var json = [];

json.push(json2);

function makeallImage(){
    console.log('json length'+json.length);
    for (var v = 0; v < json.length; v++){
        convertImgToBase64(v, "jpg");
        console.log("ksana"+v);
    }
}

function convertImgToBase64(number, outputFormat){  
var tmpData = 
canvas.loadFromJSON(json[number], canvas.renderAll.bind(canvas), function(){
    **//need to absolute comfirm it add all object in canvas, load complete json2 //**
    canvas.on('object:added', function(e) {
    toImg();
    });
    });
}

function toImg(outputFormat){
    var s = document.getElementById("last_Image");
    var url = canvas.toDataURL();
    var newImg = document.createElement("img"); // create img tag
    console.log(newImg);
    newImg.src = url;
    newImg.width = 100;
    newImg.height = 100;
    s.appendChild(newImg);
    console.log('mpike sto dom');
}

我正在使用此代码创建图像到字段，问题是如果我的json对象包含图像，它将创建空图像。所以我想出来是因为加载src需要时间和画布在完全加载之前创建图像。

我需要确保json首先在画布上完全加载，所以我找到了一个结构代码调用对象：添加，这可以确保在画布中添加对象，但它逐个计数对象，所以如果我的json cotain 2对象它会创建更多的图像。

成就 1.我需要确保我的json在创建图像之前完全加载或在画布中创建，是否可以确保json完全添加到画布中？

Demo使用对象查看我的问题：添加它加载多个图片。

Answer 1

你应该转储reviver并只使用回调函数。

http://jsfiddle.net/v1nmtz02/2/

对于FabricImages和具有异步内容的对象，您会遇到一些困难。这在图书馆层面尚未解决。

function _callback() {
  canvas.renderAll();
  toImg();
}

function convertImgToBase64(number, outputFormat){  
var tmpData = canvas.loadFromJSON(json[number], _callback);
}

完整代码段：

＆＃13;

  var canvas = new fabric.Canvas('canvas');
var json2 = '{"objects":[{"type":"circle","originX":"center","originY":"center","left":300,"top":400,"width":200,"height":200,"fill":"rgb(166,111,213)","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":{"color":"#5b238A","blur":20,"offsetX":-20,"offsetY":-10},"visible":true,"clipTo":null,"radius":100},{"type":"rect","originX":"center","originY":"center","left":300,"top":500,"width":150,"height":150,"fill":"#fbb802","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":{"color":"rgba(94, 128, 191, 0.5)","blur":5,"offsetX":10,"offsetY":10},"visible":true,"clipTo":null,"rx":0,"ry":0,"x":0,"y":0}],"background":""}';



var json = [];

json.push(json2);

function makeallImage(){
for (var v = 0; v < json.length; v++){
	convertImgToBase64(v, "jpg");
}
}

function _callback() {
  canvas.renderAll();
  toImg();
}

function convertImgToBase64(number, outputFormat){	
var tmpData = canvas.loadFromJSON(json[number], _callback);
}

function toImg(outputFormat){
var s = document.getElementById("last_Image");
var url = canvas.toDataURL();
var newImg = document.createElement("img");
newImg.src = url;
newImg.width = 100;
newImg.height = 100;
s.appendChild(newImg);
}

＆＃13;

<script src="http://fabricjs.com/lib/fabric.js"></script>
<canvas id='canvas' width="550" height="550" style="border:#000 1px solid;"></canvas>
<button onclick="makeallImage();">makepng</button>
<div id="last_Image" style="background:red"></div>

＆＃13;

任何代码都确保json完全添加到画布中？

1 个答案: