任何代碼確保json完全添加到canvas？

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完全添加到canvas？

我需要確保json完全加載到畫布上，所以我找到了一個結構代碼調用對象：添加，它可以確保在畫布中添加對象，但是它會逐個計算對象，所以如果我的json cotain 2對象它會創建更多的圖像。

成就 1.我需要確保我的json完全加載或在創建圖像之前在畫布中創建，是否有任何方法可以確保json完全添加到畫布上？

Demo看到我的問題使用對象：添加它加載多個圖像。

來源

2015-11-28 Jung

你應該轉儲reviver並使用回調函數。

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

您將有fabricImages並有一個內容是異步的對象一定的困難。這在圖書館層面尚未解決。

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

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

完整的片段：

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++){ 
 
\t convertImgToBase64(v, "jpg"); 
 
} 
 
} 
 

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

 
function convertImgToBase64(number, outputFormat){ \t 
 
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); 
 
}

<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>

來源

2015-11-29 08:14:57 AndreaBogazzi

任何代碼確保json完全添加到canvas？

回答

相關問題