多个 JSON 对象画布创建多个图像答案

【问题标题】：multiple JSON object canvas create multiple Image多个 JSON 对象画布创建多个图像
【发布时间】：2015-11-26 21:21:52
【问题描述】：

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 对象，我想将它们全部转换为图像，我只想使用 1 个画布来创建这些图像。它必须使用 loadFromJSON。

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

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

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

【问题讨论】：

标签： canvas html5-canvas fabricjs

【解决方案1】：

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

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

剩下的代码没问题。

【讨论】：

【解决方案2】：

我对您的代码进行了一些修复，如您所见，（屏幕截图，jsfiddle）三个图像显示在 DOM 上。

我主要修改了你的 convertImgToBase64 函数。 sn-p 代码：

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/

截图：

希望有帮助，祝你好运。

【讨论】：