多个JSON对象画布创建多个Image

Question

var canvas = window._canvas = new fabric.Canvas('ImgCanvas');

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

function convertImgToBase64(number, outputFormat){
    canvas.loadFromJSON(json[number], canvas.renderAll.bind(canvas), function(){
    interval = setInterval(function() {
    toImg(outputFormat);
    canvas.clear();
    clearInterval(interval);
    }, 1000);
    });
}

function toImg(outputFormat){
    var s = document.getElementById("last_Image");
    var url = canvas.toDataURL();
    var newImg = document.createElement("img"); // create img tag
    newImg.src = url;
    newImg.width = 380;
    newImg.height = 400;
    s.appendChild(newImg);
}

我有多个json对象，我想将它们全部转换为Image，我只想使用1个画布来创建这些图像。它必须使用loadFromJSON。

但我的代码只创建了最后一个对象，并且还不断循环，我不知道为什么。谁可以帮我这个事？并且可能吗？或者从画布创建多个图像的好方法？

任何建议或帮助，我将不胜感激。

请检查我的演示。 按下按钮后向下滚动以查看图像和无限循环。 谢谢。 Demo

Answer 1

loadFromJSON上的回调实际上是第二个参数而不是第三个参数。此外，不需要setInterval。请尝试以下方法：

function convertImgToBase64(number, outputFormat) {
    canvas.loadFromJSON(json[number], function() {
        canvas.renderAll(canvas);
        toImg(outputFormat);
        canvas.clear();
    });
}

剩下的代码很好。

Answer 2

我对你的代码做了一些修改，你可以看到，（截图，jsfiddle）这三个图像显示在DOM上。

我主要更改了你的 convertImgToBase64 功能。 代码段：

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

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 = 150;
    newImg.height = 150;
    s.appendChild(newImg);
    console.log('mpike sto dom');
}

直播示例：http://jsfiddle.net/tornado1979/zzqhhbcq/9/

截图：

希望有所帮助，祝你好运。