使用 fabricjs 从 json 到图像

Question

我正在将 fabricjs canvas 作为 json 保存在我的数据库中。我无意修改它，我只是想恢复它，调整它的大小，最后创建一个 PNG 或 JPG 图像，我将把它添加到我的网页中。

目前，我已经完成了以下操作：

我创建了一个 canvas html 元素并将其隐藏
我在上面加载了 json（这有效）
从那个 canvas，我得到它的上下文，我调整它的大小然后我得到 dataURL（我得到一个明显的好url）
我创建了一个 html 元素，并将 dataURL 与 img src

好像可以，但是图像是透明的。大小还可以，但里面什么都没有。我想这样做而不必创建 canvas 元素并将其隐藏。比如，在 js 脚本上创建一个 var，在其上加载 json，调整它的大小，获取数据url 并将其设置在一个元素上。

var exerciseList;

var canvas0 = new fabric.Canvas('canvas0');
var canvas1 = new fabric.Canvas('canvas1');
var canvas2 = new fabric.Canvas('canvas2');
var canvas3 = new fabric.Canvas('canvas3');
var canvas4 = new fabric.Canvas('canvas4');

$(document).ready(function () {
    var login = $.session.get("login");

    $.ajax({
        url: backEndpoint + "usuarios/" + login + "/ejercicios",
        headers: {
            "Content-Type": "application/json"
        },
        method: "GET"
    })
        .done(function (data, textStatus, xhr) {
            exerciseList = data;
            for (var i = 0; i < exerciseList.length; i++) {
                addExercise(exerciseList[i],i);
                loadExercise(exerciseList[i],i);
            }

        })
        .fail(function (xhr, textStatus, errorThrown) {


        });
});
var canvas;

function loadExercise(exercise, idx) {
    switch (idx) {
        case 0:
            canvas = canvas0;
            break;
        case 1:
            canvas = canvas1;
            break;
        case 2:
            canvas = canvas2;
            break;
        case 3:
            canvas = canvas3;
            break;
        case 4:
            canvas = canvas4;
            break;
        default:
            console.log("ERROR")
            break;
    }
    canvas.loadFromJSON(exercise.figura, callbackFunction(idx));
}

function callbackFunction(idx) {
    canvas.renderAll.bind(canvas);
    //canvas.requestRenderAll(); // It doesnt work with anyone
    var $img = getImage(idx);
    $("#imageContainer"+idx).append($img);
}

function getImage(idx) {

    var width = 343;
    var height = 300;

    var resizedCanvas = document.createElement("canvas");
    var resizedContext = resizedCanvas.getContext("2d");

    resizedCanvas.width = "" + width;
    resizedCanvas.height = "" + height;

    var canvas = document.getElementById("canvas"+idx);

    resizedContext.drawImage(canvas, 0, 0, width, height);
    var myResizedData = resizedCanvas.toDataURL();

    return $('<img>').attr("src", myResizedData);

}

function addExercise(exercise, idx) {
    var title = exercise.titulo;
    var description = exercise.descripcion;

    var $exerciseContainer = $('<div>',
        { id: "exerciseContainer"+idx,class: "row ejercicio m-1 rounded border border-secondary" });

    var $imageContainer = $('<div>',
        { id: "imageContainer"+idx, class: "col-7 p-1 border border-secondary" });

    var $bodyContainer = $('<div>',
        { id: "bodyContainer"+idx, class: "col border border-secondary" });

    $('<div>', { class: "row h4 p-1" }).text(title).appendTo($bodyContainer);
    $('<div>', { class: "row  p-1" }).text(resumirDescripcion(description)).appendTo($bodyContainer);

    var $buttonContainer = $('<div>',
        { id: "buttonContainer"+idx, class: "col-1  p-1 border border-secondary" });

    $('<button>', { class: "btn btn-success btn-block p-2" }).appendTo($buttonContainer);
    $('<button>', { class: "btn btn-primary btn-block p-2" }).appendTo($buttonContainer);
    $('<button>', { class: "btn btn-warning btn-block p-2" }).appendTo($buttonContainer);
    $('<button>', { class: "btn btn-info btn-block p-2" }).appendTo($buttonContainer);
    $('<button>', { class: "btn btn-danger btn-block p-2" }).appendTo($buttonContainer);

    $exerciseContainer.append($imageContainer);
    $exerciseContainer.append($bodyContainer);
    $exerciseContainer.append($buttonContainer);

    $("#contenedorEjercicios").append($exerciseContainer);
}

我不知道为什么，但是当我按下按钮时调用这个函数它应该工作，但我需要它在页面加载时工作。

this is what I get when the page loads

this is what I want to get

重构一些代码后我得到了this，但它和以前一样。

Answer 1

canvas.loadFromJSON(canvasJSON, function(){
  var url = canvas.toDataURL();
  var $img = getImage();
  $imageContainer.append($img);
});

canvas#loadFromJSON 对于某些对象是异步的，因此最好在 loadFromJSON.

的回调上创建图像

canvas.loadFromJSON(exercise.figura, callbackFunction(idx)); 在这一行中这样做会 callbackFunction(idx) 执行 callbackFunction,

如果您想将匿名函数更改为命名函数并且需要传递参数，您可以这样做。


canvas.loadFromJSON(json, () => callbackFunction(exercise,idx))
function callbackFunction(exercise, idx){
  canvas.requestRenderAll();
  var url = canvas.toDataURL();
  var $img = getImage(idx);
  $imageContainer.append($img);
};

Answer 2

我有一个半解决方案，我知道这不是最佳做法，但它允许我继续该项目。我在问题中写的代码是一样的，但我改变了这个：

function callbackFunction(idx) {
   canvas.renderAll.bind(canvas)();
   setTimeout(function () {
       var $img = getImage(idx);
       $("#imageContainer" + idx).append($img);
   }, 500);

}

这就像强制等待半秒 canvas 渲染一样简单...

使用 fabricjs 从 json 到图像

From json to image using fabricjs

javascript

jquery

json

canvas

fabricjs